Javascript继承机制的设计思想

作者: 阮一峰

日期: 2011年6月 5日

我一直很难理解Javascript语言的继承机制。

它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承。

我花了很多时间,学习这个部分,还做了很多笔记。但是都属于强行记忆,无法从根本上理解。

直到昨天,我读到法国程序员Vjeux的解释,才恍然大悟,完全明白了Javascript为什么这样设计。

下面,我尝试用自己的语言,来解释它的设计思想。彻底说明白prototype对象到底是怎么回事。其实根本就没那么复杂,真相非常简单。

一、从古代说起

要理解Javascript的设计思想,必须从它的诞生说起。

1994年,网景公司(Netscape)发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器,轰动一时。但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力。比如,如果网页上有一栏"用户名"要求填写,浏览器就无法判断访问者是否真的填写了,只有让服务器端判断。如果没有填写,服务器端就返回错误,要求用户重新填写,这太浪费时间和服务器资源了。

因此,网景公司急需一种网页脚本语言,使得浏览器可以与网页互动。工程师Brendan Eich负责开发这种新语言。他觉得,没必要设计得很复杂,这种语言只要能够完成一些简单操作就够了,比如判断用户有没有填写表单。

1994年正是面向对象编程(object-oriented programming)最兴盛的时期,C++是当时最流行的语言,而Java语言的1.0版即将于第二年推出,Sun公司正在大肆造势。

Brendan Eich无疑受到了影响,Javascript里面所有的数据类型都是对象(object),这一点与Java非常相似。但是,他随即就遇到了一个难题,到底要不要设计"继承"机制呢?

二、Brendan Eich的选择

如果真的是一种简易的脚本语言,其实不需要有"继承"机制。但是,Javascript里面都是对象,必须有一种机制,将所有对象联系起来。所以,Brendan Eich最后还是设计了"继承"。

但是,他不打算引入"类"(class)的概念,因为一旦有了"类",Javascript就是一种完整的面向对象编程语言了,这好像有点太正式了,而且增加了初学者的入门难度。

他考虑到,C++和Java语言都使用new命令,生成实例。

C++的写法是:

  ClassName *object = new ClassName(param);

Java的写法是:

  Foo foo = new Foo();

因此,他就把new命令引入了Javascript,用来从原型对象生成一个实例对象。但是,Javascript没有"类",怎么来表示原型对象呢?

这时,他想到C++和Java使用new命令时,都会调用"类"的构造函数(constructor)。他就做了一个简化的设计,在Javascript语言中,new命令后面跟的不是类,而是构造函数。

举例来说,现在有一个叫做DOG的构造函数,表示狗对象的原型。

  function DOG(name){

    this.name = name;

  }

对这个构造函数使用new,就会生成一个狗对象的实例。

  var dogA = new DOG('大毛');

  alert(dogA.name); // 大毛

注意构造函数中的this关键字,它就代表了新创建的实例对象。

三、new运算符的缺点

用构造函数生成实例对象,有一个缺点,那就是无法共享属性和方法。

比如,在DOG对象的构造函数中,设置一个实例对象的共有属性species。

  function DOG(name){

    this.name = name;

    this.species = '犬科';

  }

然后,生成两个实例对象:

  var dogA = new DOG('大毛');

  var dogB = new DOG('二毛');

这两个对象的species属性是独立的,修改其中一个,不会影响到另一个。

  dogA.species = '猫科';

  alert(dogB.species); // 显示"犬科",不受dogA的影响

每一个实例对象,都有自己的属性和方法的副本。这不仅无法做到数据共享,也是极大的资源浪费。

四、prototype属性的引入

考虑到这一点,Brendan Eich决定为构造函数设置一个prototype属性。

这个属性包含一个对象(以下简称"prototype对象"),所有实例对象需要共享的属性和方法,都放在这个对象里面;那些不需要共享的属性和方法,就放在构造函数里面。

实例对象一旦创建,将自动引用prototype对象的属性和方法。也就是说,实例对象的属性和方法,分成两种,一种是本地的,另一种是引用的。

还是以DOG构造函数为例,现在用prototype属性进行改写:

  function DOG(name){

    this.name = name;

  }

  DOG.prototype = { species : '犬科' };


  var dogA = new DOG('大毛');

  var dogB = new DOG('二毛');


  alert(dogA.species); // 犬科

  alert(dogB.species); // 犬科

现在,species属性放在prototype对象里,是两个实例对象共享的。只要修改了prototype对象,就会同时影响到两个实例对象。

  DOG.prototype.species = '猫科';


  alert(dogA.species); // 猫科

  alert(dogB.species); // 猫科

五、总结

由于所有的实例对象共享同一个prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像"继承"了prototype对象一样。

这就是Javascript继承机制的设计思想。不知道我说清楚了没有,继承机制的具体应用方法,可以参考我写的系列文章:

  * 《Javascript面向对象编程(一):封装》

  * 《Javascript面向对象编程(二):构造函数的继承》

  * 《Javascript面向对象编程(三):非构造函数的继承》

(完)

留言(120条)

没接触过Javascript 一直是个遗憾。。暑假放假接触下。。

大牛的那本"The Good Parts of JavaScript"里讲解的非常清楚.

阮兄V5让我这个码农看了精神抖擞啊,经济的Phd竟能对js理解如此深刻。8错

不错,说得十分简洁清楚!

这也是javascript一直停留在"只能用来实现简单页面特效"的层次,而不能用来构建大型系统的原因。

时间对于别出心裁的小玩意是最无情的。javascript如果能早点 extend 一个对象,或许就没有红及一时的actionscript鸟。

个人观点...........

引用来诺的发言:

大牛的那本"The Good Parts of JavaScript"里讲解的非常清楚.

这个“讲解的清楚”对于非计算机专业的朋友可能仍会造成困惑。阮先生这篇文章追溯到 JS 语言设计者 BE 的设计初衷,很不错。

知道设计者“为什么这样做”远比“怎么做的”重要

引用wade的发言:

这也是javascript一直停留在"只能用来实现简单页面特效"的层次,而不能用来构建大型系统的原因。

时间对于别出心裁的小玩意是最无情的。javascript如果能早点 extend 一个对象,或许就没有红及一时的actionscript鸟。

能不能构建大型系统要看的不是语言,而是用语言的人。

用得好的人C也可以构建大型系统,javascript自然也是一样。

在javascript发明后的近10年中,确实javascript只是停留在“简单页面特效”的程度上,不过这不是因为Javascript不行,而是因为没有优秀的开发者屑于研究Javascript的应用。

在几个重量级开发者推动后,javascript才重生了。现在框架方面有着YUI, ext这些大型框架,语言方面有prototype.js, mootools这类标准化的扩展,使得Javascript完全可以胜任大型系统的开发了,而这些框架或者扩展所使用的语言基础,其实是1995年就定下来的那个javascript……

呃,那个,其实代码部分应该用等宽字体显示。


说起来prototype也是一种经典的面向对象的实现方式了. 是里面所介绍的模式之一.

普通OO语言是使用class实现继承, prototype使用对象链实现继承.

我认为javascript的prototype和函数式编程风格, 这两个特性让javascript简洁而不简单, 让javascript成为一个伟大的语言.
这种简洁而不简单的设计, 使得它不仅能担当"检测用户名是否已经输入"这样的简单活计, 还能在html5,nodejs,mongodb等新领域发挥更大的威力.

JavaScript = C + Lisp

自从有了 JSON,JavaScript 注定要成为伟大的语言。

prototype更多地用来继承一些方法,
属性的继承有时候反而有弊端。
比如文章中的 DOG.prototype = { species : '犬科' };
prototype指向的是 { species : '犬科' }这个对象的引用,子类继承的也是引用。
这样对某个子类做修改的话,就会影响到所有的子类。因为它们指向的是同一个对象的引用,

所以一般可能会修改的属性,当放在构造函数的this里面继承,让子类去抄写。
或者给子类重新赋值一个对象的引用,这样一来就显得比较麻烦了,而且需要知道父类属性的具体内容。

@sapjax:

不知道你说的“子类”是什么,不过无论是指实例(instance)还是指继承的类(class)都没有这个问题。

对于实例来说,dogA.species ="大型犬"; 这样只会修改dogA这个对象的属性,不会修改其prototype的属性(dogB.species 仍然是"犬科");

对于子类来说,我们可以做到子类的prototype是一个独立的对象,这个对象的prototype才是DOG.prototype,这样就可以保证在修改子类prototype的成员的时候也不会影响父类的成员,简单来说就是

dogSubClassA.prototype.__proto__ === DOG.prototype

做法在阮先生之前的数片文章也提到过。

当然另一方面。如果是这样构造类:
DOG.prototype = { properties:{species : '犬科'} };
然后又这样修改:
dogA.properties.species = "大型犬";
那确实会把所有类和实例的值都改掉。

不知道是不我水平太低。 感觉说的都是原本就这样的东西,
从使用者角度来看。

没有让我感觉,哇,原来是这样的思想!

比较有亮点的是:讲了javascript的一些历史。

引用wade的发言:

这也是javascript一直停留在"只能用来实现简单页面特效"的层次,而不能用来构建大型系统的原因。

时间对于别出心裁的小玩意是最无情的。javascript如果能早点 extend 一个对象,或许就没有红及一时的actionscript鸟。

个人观点...........

对于你的回答,我都笑喷了。去了解一下 CommonJS,nodejs,couchDB,看看js还是不是小玩意

引用wade的发言:

这也是javascript一直停留在"只能用来实现简单页面特效"的层次,而不能用来构建大型系统的原因。

时间对于别出心裁的小玩意是最无情的。javascript如果能早点 extend 一个对象,或许就没有红及一时的actionscript鸟。

个人观点...........

这个不敢苟同, 别的不说, Gmail就是一反例. actionscript红及一时是因为那个时代的浏览器(ie6-)的这几项生理缺陷: 1)无法消锯齿,构建不出美学意义的的矢量图形; 2)无法旋转; 3)不支持透明运算; 4)动画功能很弱. 给了Flash良机, actionscript的逐渐健壮也是水到渠成, 而且一家公司掌控的语言升级换代起来比通用语言要容易得多.

对于第四点举的例子感觉不恰当。我的理解是prototype相当于是模板,仅仅是将其成员复制到对象中,例子中的写法感觉是在“滥用”。如果我写的话,我会这么写:

DOG.species = '犬科';

我觉得这才是共享数据。


顺便再说一点。
“如果没有填写,服务器端就返回错误,要求用户重新填写,这太浪费时间和服务器资源了。”,应该不是浪费服务器资源,而是浪费了网络资源,服务器端的验证是必须的,因为不能保证“用户”仅仅以一种方式访问服务器。

是不是 prototype 可以用 Java 里的类里面的 static 属性来类比呢,即

public class Dog {
public static String species = "犬科";

private String name;

public Dog(String name) {
this.name = name;
}

public static void println(Object o) {
System.out.println(o);
}

public static void main(String[] args) {
Dog dogA = new Dog("大毛");
Dog dogB = new Dog("二毛");

println(dogA.species); // 犬科
println(dogB.species); // 犬科


Dog.species = "猫科";

println(dogA.species); // 猫科
println(dogB.species); // 猫科
}
}

引用maduoyuan的发言:

对于第四点举的例子感觉不恰当。我的理解是prototype相当于是模板,仅仅是将其成员复制到对象中,例子中的写法感觉是在“滥用”。如果我写的话,我会这么写:

DOG.species = '犬科';

我觉得这才是共享数据。

接下来实例化的DOG对象都访问不到这个species属性的

The Power of Simplicity
最直接的控制就好了,为什么还有用class做模板引入N多的东西呢
说到lisp,CLOS的generic更底层一点。自底向上的好处吧。相对而言,JOSN做“底”只比list 高点,通俗点。

期待楼主把 constructor 属性也介绍一下

引用孙博的发言:

接下来实例化的DOG对象都访问不到这个species属性的

一、我现在不太清楚“共享”是什么意思。如果是这个类实例化的所有对象的某个属性都相同,那就应该是只读的,并且也应该是隐含的,否则,这个类定义地有问题。

二、如果非要访问我的写法中的那个属性,可以用 dogA.constructor.species。

引用maduoyuan的发言:

如果非要访问我的写法中的那个属性,可以用 dogA.constructor.species。

实际上species是个静态变量

哈哈,不知道为什么,每次看你解释的都会觉得很清晰。谢谢!

据我了解继承的话必须要有父类和子类,并且所有类都继承与同一个父类:Object.文中并没有谈到父类和子类.所以对js的继承机制还是有点摸不着头脑.期待楼主能介绍的更清楚些.

function DOG(name){

    this.name = name;

    this.species = '犬科';

  }
var dogA = new DOG('大毛');
var dogB = new DOG('二毛');
dogA.species = '猫科';
alert(dogB.species); // 显示"犬科",不受dogA的影响
每一个实例对象,都有自己的属性和方法的副本。这不仅无法做到数据共享,也是极大的资源浪费。
-----------------------------------------------------------------------------------
dogA,dogB这两个不同实例,不知道楼主想做到共享什么数据?极大的资源浪费又是指的什么呢?

从别处看过这篇文章,可是作者没有写转载声明..谢谢!受益良多

看过lua的实现,看过python的实现,了解dict以及table,所以prototype就是dict和table。

引用cssview的发言:

期待楼主把 constructor 属性也介绍一下

document.write(Person.prototype.constructor.valueOf())

希望作者多写点JS的对象东西,比看书学的快多了,通俗易懂啊!

再三阅读,没发现所讲与继承有什么关系,倒是和静态变量的左右差不多。

Brendan Eich只是想设计一个比较简单的继承机制……

引用maduoyuan的发言:

对于第四点举的例子感觉不恰当。我的理解是prototype相当于是模板,仅仅是将其成员复制到对象中,例子中的写法感觉是在“滥用”。如果我写的话,我会这么写:

DOG.species = '犬科';

我觉得这才是共享数据。

不要误导人了, 这样写法你确定能共享吗?
DOG.species = '犬科'; //这种写法,只能是 DOG 可以用,
它的子对象根本不受其影响。

引用嘀咕的发言:

这个“讲解的清楚”对于非计算机专业的朋友可能仍会造成困惑。阮先生这篇文章追溯到 JS 语言设计者 BE 的设计初衷,很不错。

知道设计者“为什么这样做”远比“怎么做的”重要

有同感,每次读那本小蝴蝶的某些章节会有茅塞顿开的感觉,但都是在经历了问题之后反过来看的时候。这篇文章适合各种层次的程序员,哪怕是程序爱好者。

“每一个实例对象,都有自己的属性和方法的副本”,对这句话在其它语言中不是也这样吗?
prototype对象的属性和方法,理解为模仿其它语言中的静态属性和方法不知道对不对。

我的理解是用prototype指定的属性方法其实就是java对象的static修饰下的属性方法,不过作为脚本语言,这样的设计也是非常合理的。

听君一席话胜读十年书啊,拜服


对象的引用确实是个大坑啊..

写的很明白,谢谢

讲prototype理解为java中的static属性 肯定还是不完全正确的,因为在java的class中的static变量值是可以通过实例化对象来改变static变量的值的,也可以通过继承该class,来改变其class类中的static变量值的,所以把prototype看成和java中的static类似显然不对!

来这个博客学习,只需要注意一点就行,不要看评论

引用杨经纬的发言:

经济的Phd竟能对js理解如此深刻。8错

really? 阮兄NB!!! PFPF ^-^

非常不错,看后明白了很多东西,谢谢博主。

GOod,看明白了。对于有的评论到是糊里糊涂。

非常感谢,让我明白了一个非常难理解又非常重要的概念。

你好,读了你写的三篇关于javascript的帖子,让我受益匪浅。。。
可否转载一下。。
转载的规矩我懂,放心。。

我感觉prototype就像Java中一个类的静态属性或方法,不大像继承,但倒是可以利用它来实现一种逻辑上的继承

你好,如果我在这里句 前面加一句dogA.species = 'fasdf';然后其他的不变。最后结果跟你写的不一样,这是为什么呢,想了想还是不通。
最终代码形式如下:
dogA.species = 'fasdf'

DOG.prototype.species = '猫科';
alert(dogA.species); // 猫科 #实际上是fasdf, chrome的dev tool下实验的
alert(dogB.species); // 猫科

不仅仅是自己明白 还写的明白 很了不起,看过很多你的博文,收益良多

其实算是委托吧

我想说博主的这篇中文稿,比文中提到的Vjeux的英文稿,讲得东西差太多了。目测博主没有理解__proto__这个属性

如果javaScript当时设计时不是因为应付简单的表单验证,应该也不会设计的这样简单。本人是比较反感Js的继承机制,搞的相当复杂。只是个人观点,不过这也是Js的独特的地方之一。如果当时不是简单的应付,如果设计这门语言很严谨的话。估计现在Js不仅仅只做前台,后台也可以

引用楸的发言:

如果javaScript当时设计时不是因为应付简单的表单验证,应该也不会设计的这样简单。本人是比较反感Js的继承机制,搞的相当复杂。只是个人观点,不过这也是Js的独特的地方之一。如果当时不是简单的应付,如果设计这门语言很严谨的话。估计现在Js不仅仅只做前台,后台也可以

node.js, CommonJS都被你吃了?twitter的后台要不是node.js,早挂了

写的很好,通俗易懂。

非常不错,看后明白了很多东西,谢谢博主。

初学js,谢谢博主~

在Java中,new操作符后面跟的也是构造方法的名称,
Foo foo = new Foo();
如果Foo类中没有写构造方法,默认会有一个无参数的构造方法Foo().

没看明白,JAVA不是能定义类的吗?CLASS

Brendan Eich决定为构造函数设置一个prototype属性。

原来prototype是一个属性,以前一直不明白这是什么东东.

这是我看过的最简单直白的说明,大牛.谢谢.

引用mars的发言:

你好,如果我在这里句 前面加一句dogA.species = 'fasdf';然后其他的不变。最后结果跟你写的不一样,这是为什么呢,想了想还是不通。
最终代码形式如下:
dogA.species = 'fasdf'

DOG.prototype.species = '猫科';
alert(dogA.species); // 猫科 #实际上是fasdf, chrome的dev tool下实验的
alert(dogB.species); // 猫科

你这个是属性的遮掩(或者叫覆盖),子类里面的同名属性自动覆盖父类中的属性,这样父类做的改变,也影响不到子类,应为子类中的属性已经不是父类属性的引用了

介绍一个东西为何而来,才能更好的让他在脑子里扎根,以后会多关注楼主的博客

讲得很清楚。

非常好!清晰明了。支持楼主

认真拜读了阮老师的这篇文章,收益匪浅,非常感谢阮老师的无私!

本人初学javascript,从这篇文章主要学到了两点:一是javascript如何借鉴当时的面向对象语言(c++/java)实现实例对象的构造;二是javascript出现prototype属性的原因。

再次感谢!

一直关注阮兄的文章,这几天研究unicode,结合阮兄的博文和网上的其他文章,总算弄明白了大概。然后又看到了javascript的历史(原来javascript和java真有不浅的关系),以及prototype的设计原理,受益匪浅。但是看了上面的评论,大家都没有提出,文中提到的数据共享,其实就是指针。

it a great help to me

非常独到的见解,理解不了的时候就追根溯源,从历史的角度来分析就容易理解。 赞

通俗易懂啊 看完后豁然开朗

引用AlanX的发言:

我感觉prototype就像Java中一个类的静态属性或方法,不大像继承,但倒是可以利用它来实现一种逻辑上的继承

prototype 其实很难同 Java 这类面向对象中的某个特性进行类比,将它类比为静态属性和继承都是不准确的。如果非要给 prototype 一个注解,个人感觉叫共享属性比较合适

个人感觉作者第三个例子举得不恰当,改变dogA的属性必然不能影响dogB的属性,他们是两个不同的实例,无论如何也是不能相互影响的,改成这样会好些
DOG.species="猫科";
alert(dogB.species); // 显示"犬科",不受DOG的影响
虽然我这样举例也有点别扭,但是说明了属性无法及时共享的问题,大家有什么好的例子吗?

我尽然刚发现这篇文章!写的真好,通俗易懂,!

跟通常的类概念下的继承比起来,JavaScript这样的继承机制/思想更贴向现代编程设计更主张的组合关系,把prototype隐式组合进去,而非传统继承关系。在大中型项目里,面向接口、面向组合无疑是更现代的设计选择,简单继承关系亦无可厚非,但是如果是醉心于设计类图复杂继承关系的,我只能表示呵呵。

终于理解了,原来如此

@RedNax:

“子类”或者“对象实例”的原型对象(__proto__)不就是指向其构造函数吗?
也就是通过子类的.__proto__.属性= value设置即可改变 构造其对象的构造函数里面的原型上设置的属性。
function myFunction(username) {
this.username = username;
myFunction.prototype.password="666666";
}

var param1=new myFunction("hehe");
var param2=new myFunction("hehe");
debugger;

param1.__proto__.password= "11111";

alert(param1.password);
alert(param2.password);
此时的结果应该都是11111

感谢不能更多!

  • 好奇心起,试试HTML
  • 打算把您javascript全看一遍,受益匪浅
  • 谢谢L

怒赞,受益匪浅啊

阮老师的博文对我影响很大,谢谢

引用萝卜的发言:


你这个是属性的遮掩(或者叫覆盖),子类里面的同名属性自动覆盖父类中的属性,这样父类做的改变,也影响不到子类,应为子类中的属性已经不是父类属性的引用了


并不是所谓的覆盖。

它所定义的:

// 存在于实例中
dogA.species = 'fasdf'
// 存在于该实例的“类”的原型对象中。
DOG.prototype.species = '猫科';

两者都存在着,只不过你在调用 dogA.species 时,优先找到了该实例中的属性,因此查找中止罢了。

我简单说说吧:
调用一个Object的属性/方法,就会去Object里找,如果找不到,就去找
私有属性._proto_里找,如果还是找不到,就去._proto_._proto_里找,以此类推。

new一个Object大概干了这些事:http://rockyuse.iteye.com/blog/1426522

非常感谢 写的很清楚

引用sapjax的发言:

prototype更多地用来继承一些方法,
属性的继承有时候反而有弊端。
比如文章中的 DOG.prototype = { species : '犬科' };
prototype指向的是 { species : '犬科' }这个对象的引用,子类继承的也是引用。
这样对某个子类做修改的话,就会影响到所有的子类。因为它们指向的是同一个对象的引用,

所以一般可能会修改的属性,当放在构造函数的this里面继承,让子类去抄写。
或者给子类重新赋值一个对象的引用,这样一来就显得比较麻烦了,而且需要知道父类属性的具体内容。

"这样对某个子类做修改的话,就会影响到所有的子类。因为它们指向的是同一个对象的引用" 这句话是不正确的。
指定 DOG.prototype = { species : '犬科' };后,子类是不能修改 species的属性的。

简单易懂

写的太好了,最近在看prototype.js的源码一直都搞不明白这个设计的用意,谢谢

十分清楚!

详解得十分清楚,谢谢

醍醐灌顶的感觉!

说的非常清楚!

阮老师,有个问题想问一下:
使用prototype:
function dog(name){
this.name = name;
}
dog.prototype = {species: '犬科'};
dogA.species = '猫科';
var dogA = new dog('大毛');
var dogB = new dog('二毛');
console.log(dogA.species); //输出犬科
console.log(dogB.species); //输出犬科

不使用prototype
function dog(name){
this.name = name;
this.species = '犬科';
}
dogA.species = '猫科';
var dogA = new dog('大毛');
var dogB = new dog('二毛');
console.log(dogA.species); //输出犬科
console.log(dogB.species); //输出犬科

这两个例子中我都给dogA.species赋了一个"猫科"。
带有prototype属性的不改变,我理解。但是为什么this.species='猫科'也不改变。
感谢阮老师,您回复的时候,能不能@我一下,下面是我的邮箱。
谢谢!!!

引用王冬的发言:

阮老师,有个问题想问一下:
使用prototype:
function dog(name){
this.name = name;
}
dog.prototype = {species: '犬科'};
dogA.species = '猫科';
var dogA = new dog('大毛');
var dogB = new dog('二毛');
console.log(dogA.species);//输出犬科
console.log(dogB.species);//输出犬科

不使用prototype
function dog(name){
this.name = name;
this.species = '犬科';
}
dogA.species = '猫科';
var dogA = new dog('大毛');
var dogB = new dog('二毛');
console.log(dogA.species);//输出犬科
console.log(dogB.species);//输出犬科

这两个例子中我都给dogA.species赋了一个"猫科"。
带有prototype属性的不改变,我理解。但是为什么this.species='猫科'也不改变。
感谢阮老师,您回复的时候,能不能@我一下,下面是我的邮箱。
谢谢!!!

dogA 被你重新赋值了 之前的dogA已经丢失了 在内存中等待gc中。。。

引用tianming的发言:

我想说博主的这篇中文稿,比文中提到的Vjeux的英文稿,讲得东西差太多了。目测博主没有理解__proto__这个属性


我也觉得博主当时没有理解__proto__,__proto__应该是构造函数的实例的指针,指向了构造函数的原型对象(prototype),原文中 DOG.prototype = { species : '犬科' };实际上是重写了原型对象,即变成了一个new DOG prototype ,此时构造函数指向了这个new DOG prototype,而实例的_proto_还是指向原型对象DOG prototype,如果var dogA=new DOG('大毛');DOG.prototype = { species : '犬科' };这时console.log(dogA.species);// undefined 哎……我困惑的是,重构了原型对象也就是切断了实例与new DOG prototype 的联系,如果重构原型对象DOG.prototype = { species : '犬科' };写在实例了对象前面,实例怎么又和new DOG protype 有联系了?Nicholas那本书175页那张图让我很迷惑啊!新手不懂,求教!

我觉得最后一点的例子不太恰当,DOG.prototype.species = '猫科';这不就是相当于重新赋值么,要体现共享,起码要这么修改,dogA.species = '猫科';输出alert(dogB.species)应为猫科,
但答案是alert(dogA.species);//猫科
alert(dogB.species)//犬科,这也没体现共享呐,不懂。

这种说是共享有些牵强了,只能说是提供了一种改变prototype里的某个方法或变量,改变所有实例中这个方法或变量的方法而已,算不得共享。

阮老师, 我现在有一个疑问, 就是Object.prototype是由谁创建出来的. 因为在看原型链的时候Object.prototype.__proto__ == null; 所以到这里就截止了, 那这个Object.prototype是怎么出来的, 能给我解答一下吗? 谢谢老师了.

Node上跑:
function DOG(name){
this.name = name;
this.species = 'dog';
}
// DOG.prototype = { gender: 'male' };
DOG.prototype.gender = 'female';
var dogA = new DOG('dog A');
var dogB = new DOG('don B');
dogA.species = 'dog is cat';

dogA.gender = 'female';
dogB.gender = 'male';
console.log('dogB.species: ' + dogB.species);
console.log('dogA.species: ' + dogA.species);

console.log('dogB.gender: ' + dogB.gender);
console.log('dogA.gender: ' + dogA.gender);

结果如下:
dogB.species: dog
dogA.species: dog is cat
dogB.gender: male
dogA.gender: female

总结:
prototype定义的属性,是每个对象维持一份的。
这和楼主讲的不同。

不知道为什么,看您的文章很容易懂!

@maduoyuan:

关于“浪费”这一点,你提到“服务器端的验证是必须的”所以不算浪费,应该是你理解偏离了。前端阻止了一些请求,就是节约了网络和服务器资源。另:没人说服务器端的验证不是必须的。

最近接触到JS,对JS中的prototype机制比较困惑。看了此文如醍醐灌顶,感谢!

你定义了dogA和dogB对象的gender属性,这个属性会覆盖prototype对应的属性
dogA.gender = 'female';
dogB.gender = 'male';

看了第二遍终于看懂,感谢

说实话,不知道是作者对这个理解得不够深入还是表达能力不行,感觉讲得还是很肤浅,没有抓住本质。

DOG.prototype.eat=function(){

}

那么这样是代码两个实例共享方法eat吗

讲得很清楚了一部分。还有prototype里面的默认的属性等等其他性质没有讲。11年就那么对js理解那么深入。很是敬佩

受益匪浅,感谢无私分享~看了许多您的文章了~

@M:

不是这样理解的,你这里相当于都重新给对象 dogA, dogB添加添加了新属性,不会再从原型上获取对应属性.
dogA.species = 'dog is cat';

dogA.gender = 'female';
dogB.gender = 'male';

哎呀妈呀,实在写的太好了。易懂且深入。

写的相当好,顿时明白了。。。所以说ES6,最终还是加入了继承机制。而且用了Class。。然后更像是Typescri了。

个人觉得这和java中的“static”关键字是一样的作用,反而不像是继承,java中的继承不同实例间是不会相互影响的。

说的清晰 ,简单,明了 !

阮老师,您这个我看了怎么感觉没啥区别。不知道是不是自己没领悟到,还请您示下。
您刚开始是改的new出来的实例属性,加了prototype以后改的则是DOG,没有可对比性啊。

我的想法是 即使没有prototype,也可以共享DOG里定义的属性啊,因为new DOG的时候,this指向了实例对象,而new的时候相当于深拷贝,改变实例的属性,其他的实例和构造函数肯定不受影响。
加上prototype亦是如此。dogA.species = '1111';这样还是不受影响的啊。还是不能共享啊。

看您的描述是改变实例对象dogA.species 结果dogB没变。这样的数据不能共享?
我想说的是new出来的任何实例相互之间都不会受影响的。

或许是版本原因,DOG.prototype = { species : '犬科' };已经不可用,需使用DOG.prototype.species = '猫科';这大概也是es6也没有静态属性的原因吧

关于prototype,看了又忘,忘了就只能回来看阮老师的这篇文章,讲的简单易懂。

“所有实例对象需要共享的属性和方法,都放在这个对象里面;那些不需要共享的属性和方法,就放在构造函数里面。”这句话太有点醒作用了

现在JavaScript中不仅加入了class,而且还配备了super和extends,想咋继承咋继承,这就叫真香定律~~~~

我觉得阮老师说的不太对,设计prototype属性,并不是为了做到共享,而是JS本身就是以原型模式来设计的一门语言,每个对象都是以另外一个对象作为原型来创建。而正好构造函数里的prototype属性指向了他们的原型对象。

借用一句话,高端的食材往往只需要最简单的烹饪方法,同理,难以理解的知识点,真正精通的人讲解,就算入门者也能深刻的领会其中的含义。

虽然完全理解这个文章需要一些基础 但对彻底理解原型链真的很有帮助 简单易懂 推荐

引用王艺谋的发言:

“所有实例对象需要共享的属性和方法,都放在这个对象里面;那些不需要共享的属性和方法,就放在构造函数里面。”这句话太有点醒作用了

仔细想想,object对象上面的 toString() 这些方法不就是要共享的吗,真的很贴切

@M:

你这是在实例中定义的gender,实例就不会通过原型链去找gender了,你看下dogB.__proto__.gender是不是还是原来的模样?

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接