再谈javascript面向对象编程

另外，这篇文章是一篇入门文章，我刚开始学习Javascript，所以想稍微体验一下就写这样一篇文章。文章中有一些错误，请放心吐槽，第一时间改正Javascript。这种语言确实会让很多正规部队感到很多不适，这源于Javascript语法的简洁和不精确。这种不适感也来自于Javascript这个悲伤的名字。我在想网景公司的Javascript设计师在给他起名的时候一定是疯了，这让Javascript这些年来遭受了太多的冤屈，人们都以为它是WEB玩具语言Java的附属品。因此，有些人会鄙视Javascript，认为Javascript不是真正的语言，但他们真的错了。Javascript不仅是一种语言，也是一种真正的语言，更是一种里程碑式的语言。他创造了很多新的编程模式，即原型继承和闭包(作者注：闭包不是JS的主动，应该由Scheme发起，原型继承和动态对象是自语言的主动，Javascript的主动并不精彩。感谢您的评论。)，这对后来的动态语言产生了很大的影响。作为当今最流行的语言(无)，您可以通过查看git上提交最多的语言类型来理解它。随着HTML5的出现，浏览器将在个人电脑上展现自己的才华，有完全取代OS的趋势。作为浏览器上唯一真正的语言，javascript就像C到unix/linux，Java到JVM，Cobol到大型机，所以我们需要重新认真理解和审视这种语言。另外，Javascript的官方名称是ECMAScript，显然比Javascript帅多了！不管怎样，让我们切入主题—— JavaScript的面向对象编程。要谈Javascript的面向对象编程，首先要做的就是忘记我们学过的面向对象编程。用C或Java的传统面向对象思维学习面向对象的Javascript会给你带来很多困惑。让我们忘记所学的知识，从新开始学习这种特殊的面向对象编程。既然是OO编程，那我们应该如何理解OO编程呢？记得以前学过C，但是很久没有入门。后来我有幸看了《Inside The C++ Object Model》，一下子就明白了。因此，本文也将以对象模型的方式来讨论Javascript的OO编程。由于Javascript对象模型的特殊性，Javascript的继承与传统的继承有很大的不同，而且因为Javascript中没有类，就意味着Javascript中没有扩展、实现。那么Javascript是如何实现OO编程的呢？好了，我们开始吧。让我们在Javascript的OO世界中遨游吧。首先，我们需要看看Javascript是如何定义一个对象的。以下是我们的一个对象定义：复制代码如下： var o={ }；也可以定义一个对象复制代码如下：函数f() {}是的，你没看错。在Javascript中，函数也是对象。当然，也可以复制代码如下：var array1=[1，2，3]；数组也是一个对象。关于对象的其他基本概念的描述，请参考陈皓《Javascript 面向对象编程》文章。所有的对象都有，唯一没有的就是class，因为Javascript中没有class关键字，还有function。函数的存在让我们可以灵活定义类。在展开这个主题之前，我们还需要知道一个Javascript对象最重要的属性，__proto__ member。成员__proto__严格来说，这个成员不应该用这个名字来称呼。__proto__是Firefox中的名称，而__proto__只能在Firefox浏览器中访问。作为一个对象，当您访问它的一个成员或方法时，如果这个对象中没有这样的方法或成员，Javascript引擎将访问这个对象的__proto__成员所指向的另一个对象，并在那个对象中找到指定的方法或成员。如果找不到，它将继续递归搜索该对象的__proto__成员所指向的对象，直到该链表结束。

好，我们举个例子。例如，上面定义的数组对象array1。当我们创建对象array1时，Javascript引擎中array1的实际对象模型如下：。

array1对象的长度属性值为3，但是我们可以通过以下方法向array1添加元素：复制代码如下： array 1 . push(4)；push方法来自array1的__proto__成员指向对象的方法(array . prototey . push())。正是因为所有数组对象(由[])都包含一个__proto__成员，用推、反等方法指向同一个对象(Array.prototype)，这些数组对象才能使用推、反等方法。那么这个__proto__属性就相当于面向对象中的“有”关系。在这种情况下，只要我们有一个像Array.prototype这样的模板对象，然后将其他对象的__proto__属性指向这个对象，我们就可以完成一个继承模式。还不错！我们完全可以做到。但是不要太高兴，这个属性只在FireFox中有效。其他浏览器虽然有属性，但是不能通过__proto__访问，只能通过getPrototypeOf方法访问，而且这个属性是只读的。我们在Javascript中实现继承似乎并不容易。对象原型成员首先，让我们看看函数原型成员的定义，当一个函数对象被创建时。给定一个原型成员，它是一个包含构造函数成员的对象，构造函数成员是创建函数对象时对函数对象的引用。函数对象有一个原型成员，它是一个包含指向函数对象的构造函数成员的对象。例如，复制代码如下：函数Base () {this。id=' base'} base。这个函数对象有一个原型成员。为什么我们把这种函数构造函数称为基函数对象本身？原因是这种功能是为新操作员设计的。为了区别于一般的函数对象，这类函数的首字母通常是大写的。构造函数的主要功能是创建一类相似的对象。Javascript引擎中上述代码的对象模型是这样的。

随着上述基本概念的引入和新操作符的加入，我们可以用传统的面向对象类的新方式创建对象。在Javascript中，我们称这种方式为伪经典。基于上面的例子，我们执行以下代码复制代码如下： var obj=new Base()；这段代码的结果是什么？我们在Javascript引擎中看到的对象模型是：。

新接线员到底做了什么？其实很简单。我做了三件事。复制的代码如下： var obj={ }；物体。__原型_ _ _=基础.原型；base . call(obj)；在第一行中，我们创建了空对象obj的第二行。我们将这个空对象的__proto__成员指向基础函数对象的原型成员对象的第三行。我们用obj替换了base函数对象的这个指针，然后调用Base函数，所以我们给obj对象分配了一个id成员变量，这个成员变量的值是“Base”。关于呼叫功能的使用，请参考陈皓《Javascript 面向对象编程》文章。如果我们给Base.prototype的对象添加一些函数会有什么效果？例如，代码如下：复制代码如下： base . prototype . tostring=function(){ returnthis . id；}然后当我们使用new创建一个新的对象时，根据__proto__的特性，toString方法也可以作为一个新的对象方法来访问。所以我们可以看到：在构造函数中，我们设置了‘class’的成员变量(例如，示例中的id)，在构造函数原型中，我们设置了‘class’的公共方法。然后，通过函数对象，__proto__和原型成员以及新的操作符，模拟了类和类实例化的效果。伪经典继承了我们的模拟类，那我们该怎么处理呢？其实很简单，我们只是把构造函数的原型指向父类。例如，我们设计了一个衍生类。以下复制代码如下：函数导数(id){ this . id=id；} deriver . prototype=new Base()；deriver . prototype . test=function(id){ return this . id===id；} var NewObj=new Derive(' Derive ')；执行这段代码后的对象模型是什么？按照前面的推演，应该是下面的对象模型。

这样，我们的newObj也继承了基类基类的toString方法，并且有自己的成员id。这个对象模型是如何推导出来的，就留给所有学生了。参考前面的描述，导出这个对象模型应该不难。伪经典继承会让学过C /Java的同学感觉舒服一点，尤其是新的关键字，看的很亲切。虽然它们相似，但机理完全不同。当然，无论是哪种继承，__proto__成员都是不可或缺的。原型继承这是继承Javascript的另一种方式，这种继承也是陈皓文章《Javascript 面向对象编程》中的create函数。不幸的是，这是ECMAScript V5的标准，目前支持V5的浏览器是IE9，最新版本的Chrome和Firefox。虽然看的人很多，但作为IE6重灾区中国，建议大家避免使用create功能。幸运的是，在create函数存在之前，Javascript用户已经设计了这个函数的等价物。例如，让我们看看道格拉斯克洛克福特的对象函数。复制的代码如下：函数对象(旧){ function f(){ }；F.prototype=old返回新的F()；} var NewObj=object(oldObject)；例如，复制以下代码段的代码如下： varbase={id:' base '，tostring 3360 function(){ returnthis . id；} };var derive=object(base)；执行上述功能后的对象模型为：。

如何形成这样一个对象模型的原理也很简单。您可以通过扩展对象的功能来绘制这个模型。留给读者去画。这种继承方式叫做原型继承。相对来说，比伪经典继承的更简单方便。为此，ECMAScript V5只增加了create函数，让开发人员可以快速实现原型继承。以上两种继承方法是Javascript中最常用的继承方法。通过本文的讲解，你应该对Javascript的OO编程有一些‘原理’层面的理解。请参考： 《Prototypes and Inheritance in JavaScript Prototypes and Inheritance in JavaScript》高级JavaScript(道格拉斯克洛克福特视频，一定要看)。题外话：web2.0之后，web应用发展迅速。现在，随着HTML5的发布，浏览器的功能得到了很大的增强。感觉浏览器远没有浏览器那么简单。记得C之父曾经说过，JAVA不是跨平台的，但是JAVA本身就是一个平台。今天的浏览器本身就是一个平台。幸运的是，这个平台是基于标准的。如果Browser是平台，由于Browser安全沙盒的限制，个人电脑的资源很少使用，感觉Browser是一台NC(网络电脑)？我们回到了孙最初提出的想法。孙是不是太厉害了？