我一直很难理解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 一直是个遗憾。。暑假放假接触下。。
2011年6月 5日 20:09 | # | 引用
来诺 说:
大牛的那本"The Good Parts of JavaScript"里讲解的非常清楚.
2011年6月 5日 20:21 | # | 引用
杨经纬 说:
阮兄V5让我这个码农看了精神抖擞啊,经济的Phd竟能对js理解如此深刻。8错
2011年6月 5日 21:16 | # | 引用
Jan 说:
2011年6月 5日 21:38 | # | 引用
wade 说:
这也是javascript一直停留在"只能用来实现简单页面特效"的层次,而不能用来构建大型系统的原因。
时间对于别出心裁的小玩意是最无情的。javascript如果能早点 extend 一个对象,或许就没有红及一时的actionscript鸟。
个人观点...........
2011年6月 5日 21:38 | # | 引用
嘀咕 说:
这个“讲解的清楚”对于非计算机专业的朋友可能仍会造成困惑。阮先生这篇文章追溯到 JS 语言设计者 BE 的设计初衷,很不错。
知道设计者“为什么这样做”远比“怎么做的”重要
2011年6月 5日 22:36 | # | 引用
RedNax 说:
能不能构建大型系统要看的不是语言,而是用语言的人。
用得好的人C也可以构建大型系统,javascript自然也是一样。
在javascript发明后的近10年中,确实javascript只是停留在“简单页面特效”的程度上,不过这不是因为Javascript不行,而是因为没有优秀的开发者屑于研究Javascript的应用。
在几个重量级开发者推动后,javascript才重生了。现在框架方面有着YUI, ext这些大型框架,语言方面有prototype.js, mootools这类标准化的扩展,使得Javascript完全可以胜任大型系统的开发了,而这些框架或者扩展所使用的语言基础,其实是1995年就定下来的那个javascript……
2011年6月 6日 01:24 | # | 引用
。。。 说:
呃,那个,其实代码部分应该用等宽字体显示。
2011年6月 6日 02:17 | # | 引用
dulao5 说:
说起来prototype也是一种经典的面向对象的实现方式了. 是里面所介绍的模式之一.
普通OO语言是使用class实现继承, prototype使用对象链实现继承.
我认为javascript的prototype和函数式编程风格, 这两个特性让javascript简洁而不简单, 让javascript成为一个伟大的语言.
这种简洁而不简单的设计, 使得它不仅能担当"检测用户名是否已经输入"这样的简单活计, 还能在html5,nodejs,mongodb等新领域发挥更大的威力.
2011年6月 6日 07:40 | # | 引用
jlake 说:
JavaScript = C + Lisp
自从有了 JSON,JavaScript 注定要成为伟大的语言。
2011年6月 6日 11:33 | # | 引用
sapjax 说:
prototype更多地用来继承一些方法,
属性的继承有时候反而有弊端。
比如文章中的 DOG.prototype = { species : '犬科' };
prototype指向的是 { species : '犬科' }这个对象的引用,子类继承的也是引用。
这样对某个子类做修改的话,就会影响到所有的子类。因为它们指向的是同一个对象的引用,
所以一般可能会修改的属性,当放在构造函数的this里面继承,让子类去抄写。
或者给子类重新赋值一个对象的引用,这样一来就显得比较麻烦了,而且需要知道父类属性的具体内容。
2011年6月 6日 13:18 | # | 引用
RedNax 说:
@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 = "大型犬";
那确实会把所有类和实例的值都改掉。
2011年6月 6日 14:22 | # | 引用
别扭的牛二哥 说:
不知道是不我水平太低。 感觉说的都是原本就这样的东西,
从使用者角度来看。
没有让我感觉,哇,原来是这样的思想!
比较有亮点的是:讲了javascript的一些历史。
2011年6月 6日 15:37 | # | 引用
numbcoder 说:
2011年6月 6日 22:43 | # | 引用
Shawnhai 说:
2011年6月 7日 14:47 | # | 引用
maduoyuan 说:
对于第四点举的例子感觉不恰当。我的理解是prototype相当于是模板,仅仅是将其成员复制到对象中,例子中的写法感觉是在“滥用”。如果我写的话,我会这么写:
DOG.species = '犬科';
我觉得这才是共享数据。
顺便再说一点。
“如果没有填写,服务器端就返回错误,要求用户重新填写,这太浪费时间和服务器资源了。”,应该不是浪费服务器资源,而是浪费了网络资源,服务器端的验证是必须的,因为不能保证“用户”仅仅以一种方式访问服务器。
2011年6月 7日 19:15 | # | 引用
Sutra 说:
是不是 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); // 猫科
}
}
2011年6月 8日 12:58 | # | 引用
孙博 说:
接下来实例化的DOG对象都访问不到这个species属性的
2011年6月 8日 22:47 | # | 引用
Cibo 说:
The Power of Simplicity
最直接的控制就好了,为什么还有用class做模板引入N多的东西呢
说到lisp,CLOS的generic更底层一点。自底向上的好处吧。相对而言,JOSN做“底”只比list 高点,通俗点。
2011年6月 9日 02:46 | # | 引用
cssview 说:
期待楼主把 constructor 属性也介绍一下
2011年6月 9日 11:28 | # | 引用
ufo 说:
你能翻译下这个? http://www.diskeeper.com/fragbook/chapter1.htm
2011年6月 9日 22:14 | # | 引用
maduoyuan 说:
一、我现在不太清楚“共享”是什么意思。如果是这个类实例化的所有对象的某个属性都相同,那就应该是只读的,并且也应该是隐含的,否则,这个类定义地有问题。
二、如果非要访问我的写法中的那个属性,可以用 dogA.constructor.species。
2011年6月10日 19:28 | # | 引用
孙博 说:
实际上species是个静态变量
2011年6月12日 22:33 | # | 引用
朱子成 说:
哈哈,不知道为什么,每次看你解释的都会觉得很清晰。谢谢!
2011年6月13日 07:46 | # | 引用
robin 说:
据我了解继承的话必须要有父类和子类,并且所有类都继承与同一个父类:Object.文中并没有谈到父类和子类.所以对js的继承机制还是有点摸不着头脑.期待楼主能介绍的更清楚些.
2011年6月19日 19:48 | # | 引用
lein 说:
function DOG(name){
this.name = name;
this.species = '犬科';
}
var dogA = new DOG('大毛');
var dogB = new DOG('二毛');
dogA.species = '猫科';
alert(dogB.species); // 显示"犬科",不受dogA的影响
每一个实例对象,都有自己的属性和方法的副本。这不仅无法做到数据共享,也是极大的资源浪费。
-----------------------------------------------------------------------------------
dogA,dogB这两个不同实例,不知道楼主想做到共享什么数据?极大的资源浪费又是指的什么呢?
2011年6月23日 11:04 | # | 引用
qmi 说:
从别处看过这篇文章,可是作者没有写转载声明..谢谢!受益良多
2011年6月29日 12:08 | # | 引用
damon 说:
看过lua的实现,看过python的实现,了解dict以及table,所以prototype就是dict和table。
2011年6月29日 14:31 | # | 引用
keviyu 说:
document.write(Person.prototype.constructor.valueOf())
2011年7月12日 07:46 | # | 引用
Kvkens 说:
希望作者多写点JS的对象东西,比看书学的快多了,通俗易懂啊!
2011年7月26日 11:49 | # | 引用
烟屁股 说:
再三阅读,没发现所讲与继承有什么关系,倒是和静态变量的左右差不多。
2011年9月17日 21:28 | # | 引用
Jeff 说:
Brendan Eich只是想设计一个比较简单的继承机制……
2011年9月27日 23:32 | # | 引用
L 说:
不要误导人了, 这样写法你确定能共享吗?
DOG.species = '犬科'; //这种写法,只能是 DOG 可以用,
它的子对象根本不受其影响。
2011年11月22日 17:05 | # | 引用
Star 说:
有同感,每次读那本小蝴蝶的某些章节会有茅塞顿开的感觉,但都是在经历了问题之后反过来看的时候。这篇文章适合各种层次的程序员,哪怕是程序爱好者。
2011年11月22日 17:19 | # | 引用
Yoya 说:
“每一个实例对象,都有自己的属性和方法的副本”,对这句话在其它语言中不是也这样吗?
prototype对象的属性和方法,理解为模仿其它语言中的静态属性和方法不知道对不对。
2011年11月28日 18:12 | # | 引用
Jackyy 说:
我的理解是用prototype指定的属性方法其实就是java对象的static修饰下的属性方法,不过作为脚本语言,这样的设计也是非常合理的。
2011年12月25日 21:12 | # | 引用
plums 说:
听君一席话胜读十年书啊,拜服
2012年2月29日 10:21 | # | 引用
airowner 说:
对象的引用确实是个大坑啊..
2012年4月11日 12:23 | # | 引用
卡爱 说:
写的很明白,谢谢
2012年4月25日 18:10 | # | 引用
前端爱好者 说:
讲prototype理解为java中的static属性 肯定还是不完全正确的,因为在java的class中的static变量值是可以通过实例化对象来改变static变量的值的,也可以通过继承该class,来改变其class类中的static变量值的,所以把prototype看成和java中的static类似显然不对!
2012年5月 9日 23:53 | # | 引用
小人 说:
来这个博客学习,只需要注意一点就行,不要看评论
2012年5月11日 11:44 | # | 引用
Allen 说:
really? 阮兄NB!!! PFPF ^-^
2012年5月19日 21:17 | # | 引用
康杰 说:
非常不错,看后明白了很多东西,谢谢博主。
2012年8月16日 10:02 | # | 引用
InthendSun 说:
GOod,看明白了。对于有的评论到是糊里糊涂。
2012年8月17日 00:18 | # | 引用
river 说:
非常感谢,让我明白了一个非常难理解又非常重要的概念。
2012年9月15日 21:13 | # | 引用
玄 说:
你好,读了你写的三篇关于javascript的帖子,让我受益匪浅。。。
可否转载一下。。
转载的规矩我懂,放心。。
2012年9月18日 16:28 | # | 引用
AlanX 说:
我感觉prototype就像Java中一个类的静态属性或方法,不大像继承,但倒是可以利用它来实现一种逻辑上的继承
2013年1月30日 17:09 | # | 引用
mars 说:
你好,如果我在这里句 前面加一句dogA.species = 'fasdf';然后其他的不变。最后结果跟你写的不一样,这是为什么呢,想了想还是不通。
最终代码形式如下:
dogA.species = 'fasdf'
DOG.prototype.species = '猫科';
alert(dogA.species); // 猫科 #实际上是fasdf, chrome的dev tool下实验的
alert(dogB.species); // 猫科
2013年4月 6日 13:34 | # | 引用
柱子 说:
不仅仅是自己明白 还写的明白 很了不起,看过很多你的博文,收益良多
2013年4月16日 15:31 | # | 引用
Demon 说:
其实算是委托吧
2013年4月26日 10:55 | # | 引用
tianming 说:
我想说博主的这篇中文稿,比文中提到的Vjeux的英文稿,讲得东西差太多了。目测博主没有理解__proto__这个属性
2013年5月18日 12:43 | # | 引用
楸 说:
如果javaScript当时设计时不是因为应付简单的表单验证,应该也不会设计的这样简单。本人是比较反感Js的继承机制,搞的相当复杂。只是个人观点,不过这也是Js的独特的地方之一。如果当时不是简单的应付,如果设计这门语言很严谨的话。估计现在Js不仅仅只做前台,后台也可以
2013年7月 1日 15:04 | # | 引用
Steven 说:
node.js, CommonJS都被你吃了?twitter的后台要不是node.js,早挂了
2013年8月18日 11:02 | # | 引用
此人**** 说:
写的很好,通俗易懂。
2013年10月 7日 08:47 | # | 引用
色额由 说:
非常不错,看后明白了很多东西,谢谢博主。
2013年10月10日 22:30 | # | 引用
echo 说:
初学js,谢谢博主~
2013年11月26日 23:09 | # | 引用
L 说:
在Java中,new操作符后面跟的也是构造方法的名称,
Foo foo = new Foo();
如果Foo类中没有写构造方法,默认会有一个无参数的构造方法Foo().
2013年12月 4日 11:31 | # | 引用
melisa 说:
没看明白,JAVA不是能定义类的吗?CLASS
2013年12月25日 11:15 | # | 引用
kaibb 说:
Brendan Eich决定为构造函数设置一个prototype属性。
原来prototype是一个属性,以前一直不明白这是什么东东.
2014年4月 1日 17:00 | # | 引用
jiqimao 说:
这是我看过的最简单直白的说明,大牛.谢谢.
2014年4月 2日 12:57 | # | 引用
萝卜 说:
2014年4月29日 15:18 | # | 引用
张恩立 说:
介绍一个东西为何而来,才能更好的让他在脑子里扎根,以后会多关注楼主的博客
2014年7月21日 11:06 | # | 引用
showsscel 说:
讲得很清楚。
2014年9月27日 02:02 | # | 引用
qiu 说:
非常好!清晰明了。支持楼主
2014年10月10日 10:56 | # | 引用
王俊新 说:
认真拜读了阮老师的这篇文章,收益匪浅,非常感谢阮老师的无私!
本人初学javascript,从这篇文章主要学到了两点:一是javascript如何借鉴当时的面向对象语言(c++/java)实现实例对象的构造;二是javascript出现prototype属性的原因。
再次感谢!
2014年10月24日 11:51 | # | 引用
rocketzhao 说:
一直关注阮兄的文章,这几天研究unicode,结合阮兄的博文和网上的其他文章,总算弄明白了大概。然后又看到了javascript的历史(原来javascript和java真有不浅的关系),以及prototype的设计原理,受益匪浅。但是看了上面的评论,大家都没有提出,文中提到的数据共享,其实就是指针。
2015年1月13日 09:54 | # | 引用
wendy 说:
it a great help to me
2015年2月17日 11:51 | # | 引用
Kyle 说:
非常独到的见解,理解不了的时候就追根溯源,从历史的角度来分析就容易理解。 赞
2015年3月11日 17:17 | # | 引用
zzhi 说:
通俗易懂啊 看完后豁然开朗
2015年4月 3日 11:43 | # | 引用
Zhang Visper 说:
prototype 其实很难同 Java 这类面向对象中的某个特性进行类比,将它类比为静态属性和继承都是不准确的。如果非要给 prototype 一个注解,个人感觉叫共享属性比较合适
2015年4月17日 14:37 | # | 引用
dx 说:
个人感觉作者第三个例子举得不恰当,改变dogA的属性必然不能影响dogB的属性,他们是两个不同的实例,无论如何也是不能相互影响的,改成这样会好些
DOG.species="猫科";
alert(dogB.species); // 显示"犬科",不受DOG的影响
虽然我这样举例也有点别扭,但是说明了属性无法及时共享的问题,大家有什么好的例子吗?
2015年5月14日 16:14 | # | 引用
贺文榜 说:
我尽然刚发现这篇文章!写的真好,通俗易懂,!
2015年6月 3日 08:40 | # | 引用
endless 说:
跟通常的类概念下的继承比起来,JavaScript这样的继承机制/思想更贴向现代编程设计更主张的组合关系,把prototype隐式组合进去,而非传统继承关系。在大中型项目里,面向接口、面向组合无疑是更现代的设计选择,简单继承关系亦无可厚非,但是如果是醉心于设计类图复杂继承关系的,我只能表示呵呵。
2015年6月15日 16:09 | # | 引用
Jack 说:
终于理解了,原来如此
2015年7月28日 19:33 | # | 引用
qiushengGe 说:
@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
2015年8月11日 19:43 | # | 引用
噔噔蹬 说:
感谢不能更多!
2015年8月17日 10:21 | # | 引用
苏浩 说:
2015年10月25日 00:47 | # | 引用
fred 说:
2015年10月28日 22:41 | # | 引用
wzysoft 说:
阮老师的博文对我影响很大,谢谢
2015年10月29日 10:50 | # | 引用
Fancy 说:
并不是所谓的覆盖。
它所定义的:
// 存在于实例中
dogA.species = 'fasdf'
// 存在于该实例的“类”的原型对象中。
DOG.prototype.species = '猫科';
两者都存在着,只不过你在调用 dogA.species 时,优先找到了该实例中的属性,因此查找中止罢了。
2015年11月13日 20:03 | # | 引用
纸上扫雷 说:
我简单说说吧:
调用一个Object的属性/方法,就会去Object里找,如果找不到,就去找
私有属性._proto_里找,如果还是找不到,就去._proto_._proto_里找,以此类推。
new一个Object大概干了这些事:http://rockyuse.iteye.com/blog/1426522
2015年12月 8日 19:43 | # | 引用
kk 说:
非常感谢 写的很清楚
2016年1月15日 16:43 | # | 引用
yuantingjun 说:
"这样对某个子类做修改的话,就会影响到所有的子类。因为它们指向的是同一个对象的引用" 这句话是不正确的。
指定 DOG.prototype = { species : '犬科' };后,子类是不能修改 species的属性的。
2016年3月 4日 15:03 | # | 引用
李昂 说:
简单易懂
2016年3月 6日 14:13 | # | 引用
hc11 说:
写的太好了,最近在看prototype.js的源码一直都搞不明白这个设计的用意,谢谢
2016年3月23日 10:49 | # | 引用
AaronShi 说:
十分清楚!
2016年4月15日 11:05 | # | 引用
along 说:
详解得十分清楚,谢谢
2016年4月18日 08:56 | # | 引用
ocean 说:
醍醐灌顶的感觉!
2016年5月10日 09:15 | # | 引用
王凌永 说:
说的非常清楚!
2016年6月19日 02:36 | # | 引用
王冬 说:
阮老师,有个问题想问一下:
使用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='猫科'也不改变。
感谢阮老师,您回复的时候,能不能@我一下,下面是我的邮箱。
谢谢!!!
2016年7月 1日 16:13 | # | 引用
Asion 说:
dogA 被你重新赋值了 之前的dogA已经丢失了 在内存中等待gc中。。。
2016年7月20日 14:44 | # | 引用
Cindy_1 说:
我也觉得博主当时没有理解__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页那张图让我很迷惑啊!新手不懂,求教!
2016年8月11日 22:18 | # | 引用
bbq 说:
我觉得最后一点的例子不太恰当,DOG.prototype.species = '猫科';这不就是相当于重新赋值么,要体现共享,起码要这么修改,dogA.species = '猫科';输出alert(dogB.species)应为猫科,
但答案是alert(dogA.species);//猫科
alert(dogB.species)//犬科,这也没体现共享呐,不懂。
2016年11月28日 19:52 | # | 引用
bbq 说:
这种说是共享有些牵强了,只能说是提供了一种改变prototype里的某个方法或变量,改变所有实例中这个方法或变量的方法而已,算不得共享。
2016年11月28日 19:59 | # | 引用
李亚杰 说:
阮老师, 我现在有一个疑问, 就是Object.prototype是由谁创建出来的. 因为在看原型链的时候Object.prototype.__proto__ == null; 所以到这里就截止了, 那这个Object.prototype是怎么出来的, 能给我解答一下吗? 谢谢老师了.
2017年3月30日 15:14 | # | 引用
M 说:
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定义的属性,是每个对象维持一份的。
这和楼主讲的不同。
2017年5月18日 10:56 | # | 引用
Beatrice 说:
不知道为什么,看您的文章很容易懂!
2017年5月22日 09:33 | # | 引用
zzb 说:
@maduoyuan:
关于“浪费”这一点,你提到“服务器端的验证是必须的”所以不算浪费,应该是你理解偏离了。前端阻止了一些请求,就是节约了网络和服务器资源。另:没人说服务器端的验证不是必须的。
2017年5月27日 11:15 | # | 引用
iceberg 说:
最近接触到JS,对JS中的prototype机制比较困惑。看了此文如醍醐灌顶,感谢!
2017年9月14日 11:21 | # | 引用
莫子墨 说:
你定义了dogA和dogB对象的gender属性,这个属性会覆盖prototype对应的属性
dogA.gender = 'female';
dogB.gender = 'male';
2017年10月23日 01:31 | # | 引用
nf 说:
看了第二遍终于看懂,感谢
2017年11月 1日 10:04 | # | 引用
MaveRick 说:
说实话,不知道是作者对这个理解得不够深入还是表达能力不行,感觉讲得还是很肤浅,没有抓住本质。
2017年11月13日 15:37 | # | 引用
miss zhou 说:
DOG.prototype.eat=function(){
}
那么这样是代码两个实例共享方法eat吗
2018年2月 7日 14:25 | # | 引用
九月 说:
讲得很清楚了一部分。还有prototype里面的默认的属性等等其他性质没有讲。11年就那么对js理解那么深入。很是敬佩
2018年3月 4日 19:38 | # | 引用
badmask 说:
受益匪浅,感谢无私分享~看了许多您的文章了~
2018年3月15日 15:49 | # | 引用
楚鱼 说:
@M:
不是这样理解的,你这里相当于都重新给对象 dogA, dogB添加添加了新属性,不会再从原型上获取对应属性.
dogA.species = 'dog is cat';
dogA.gender = 'female';
dogB.gender = 'male';
2018年4月 4日 19:54 | # | 引用
gooqiao 说:
哎呀妈呀,实在写的太好了。易懂且深入。
2018年4月19日 22:31 | # | 引用
MarsZhang 说:
写的相当好,顿时明白了。。。所以说ES6,最终还是加入了继承机制。而且用了Class。。然后更像是Typescri了。
2018年5月 7日 15:15 | # | 引用
今天好开心 说:
个人觉得这和java中的“static”关键字是一样的作用,反而不像是继承,java中的继承不同实例间是不会相互影响的。
2018年8月 2日 18:29 | # | 引用
大鱼 说:
说的清晰 ,简单,明了 !
2018年11月25日 16:56 | # | 引用
乱世迷途小书童 说:
阮老师,您这个我看了怎么感觉没啥区别。不知道是不是自己没领悟到,还请您示下。
您刚开始是改的new出来的实例属性,加了prototype以后改的则是DOG,没有可对比性啊。
我的想法是 即使没有prototype,也可以共享DOG里定义的属性啊,因为new DOG的时候,this指向了实例对象,而new的时候相当于深拷贝,改变实例的属性,其他的实例和构造函数肯定不受影响。
加上prototype亦是如此。dogA.species = '1111';这样还是不受影响的啊。还是不能共享啊。
看您的描述是改变实例对象dogA.species 结果dogB没变。这样的数据不能共享?
我想说的是new出来的任何实例相互之间都不会受影响的。
2019年3月25日 19:55 | # | 引用
路人 说:
或许是版本原因,DOG.prototype = { species : '犬科' };已经不可用,需使用DOG.prototype.species = '猫科';这大概也是es6也没有静态属性的原因吧
2019年7月13日 17:59 | # | 引用
朱鹏钢 说:
关于prototype,看了又忘,忘了就只能回来看阮老师的这篇文章,讲的简单易懂。
2020年3月 9日 20:22 | # | 引用
王艺谋 说:
“所有实例对象需要共享的属性和方法,都放在这个对象里面;那些不需要共享的属性和方法,就放在构造函数里面。”这句话太有点醒作用了
2020年5月13日 10:44 | # | 引用
张大勇 说:
现在JavaScript中不仅加入了class,而且还配备了super和extends,想咋继承咋继承,这就叫真香定律~~~~
2020年8月12日 10:09 | # | 引用
楼上的 说:
我觉得阮老师说的不太对,设计prototype属性,并不是为了做到共享,而是JS本身就是以原型模式来设计的一门语言,每个对象都是以另外一个对象作为原型来创建。而正好构造函数里的prototype属性指向了他们的原型对象。
2020年11月 6日 00:37 | # | 引用
benjamin 说:
借用一句话,高端的食材往往只需要最简单的烹饪方法,同理,难以理解的知识点,真正精通的人讲解,就算入门者也能深刻的领会其中的含义。
2021年3月16日 10:43 | # | 引用
vsionly 说:
虽然完全理解这个文章需要一些基础 但对彻底理解原型链真的很有帮助 简单易懂 推荐
2021年7月22日 13:28 | # | 引用
haichao 说:
仔细想想,object对象上面的 toString() 这些方法不就是要共享的吗,真的很贴切
2021年10月11日 17:54 | # | 引用
mm 说:
@M:
你这是在实例中定义的gender,实例就不会通过原型链去找gender了,你看下dogB.__proto__.gender是不是还是原来的模样?
2022年3月15日 17:11 | # | 引用