Tuesday, June 16, 2015

Javascript继承机制的设计思想 - 阮一峰的网络日志

Javascript继承机制的设计思想 - 阮一峰的网络日志

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继承机制的设计思想。不知道我说清楚了没有，继承机制的具体应用方法，可以参考我写的系列文章：
（完）

文档信息

留言（73条）

袁文聪 说：
没接触过Javascript 一直是个遗憾。。暑假放假接触下。。
来诺 说：
大牛的那本"The Good Parts of JavaScript"里讲解的非常清楚.
杨经纬 说：
阮兄V5让我这个码农看了精神抖擞啊，经济的Phd竟能对js理解如此深刻。8错
Jan 说：
不错，说得十分简洁清楚！
wade 说：
这也是javascript一直停留在"只能用来实现简单页面特效"的层次，而不能用来构建大型系统的原因。
时间对于别出心裁的小玩意是最无情的。javascript如果能早点 extend 一个对象，或许就没有红及一时的actionscript鸟。
个人观点...........
嘀咕 说：
引用来诺的发言：
大牛的那本"The Good Parts of JavaScript"里讲解的非常清楚.
这个“讲解的清楚”对于非计算机专业的朋友可能仍会造成困惑。阮先生这篇文章追溯到 JS 语言设计者 BE 的设计初衷，很不错。
知道设计者“为什么这样做”远比“怎么做的”重要
RedNax 说：
引用wade的发言：
这也是javascript一直停留在"只能用来实现简单页面特效"的层次，而不能用来构建大型系统的原因。
时间对于别出心裁的小玩意是最无情的。javascript如果能早点 extend 一个对象，或许就没有红及一时的actionscript鸟。
能不能构建大型系统要看的不是语言，而是用语言的人。
用得好的人C也可以构建大型系统，javascript自然也是一样。
在javascript发明后的近10年中，确实javascript只是停留在“简单页面特效”的程度上，不过这不是因为Javascript不行，而是因为没有优秀的开发者屑于研究Javascript的应用。
在几个重量级开发者推动后，javascript才重生了。现在框架方面有着YUI, ext这些大型框架，语言方面有prototype.js, mootools这类标准化的扩展，使得Javascript完全可以胜任大型系统的开发了，而这些框架或者扩展所使用的语言基础，其实是1995年就定下来的那个javascript……
。。。 说：
呃，那个，其实代码部分应该用等宽字体显示。
dulao5 说：

说起来prototype也是一种经典的面向对象的实现方式了. 是里面所介绍的模式之一.
普通OO语言是使用class实现继承, prototype使用对象链实现继承.
我认为javascript的prototype和函数式编程风格, 这两个特性让javascript简洁而不简单, 让javascript成为一个伟大的语言.
这种简洁而不简单的设计, 使得它不仅能担当"检测用户名是否已经输入"这样的简单活计, 还能在html5,nodejs,mongodb等新领域发挥更大的威力.
jlake 说：
JavaScript = C + Lisp
自从有了 JSON，JavaScript 注定要成为伟大的语言。
sapjax 说：
prototype更多地用来继承一些方法，
属性的继承有时候反而有弊端。
比如文章中的 DOG.prototype = { species : '犬科' };
prototype指向的是 { species : '犬科' }这个对象的引用，子类继承的也是引用。
这样对某个子类做修改的话，就会影响到所有的子类。因为它们指向的是同一个对象的引用，
所以一般可能会修改的属性，当放在构造函数的this里面继承，让子类去抄写。
或者给子类重新赋值一个对象的引用，这样一来就显得比较麻烦了，而且需要知道父类属性的具体内容。
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 = "大型犬";
那确实会把所有类和实例的值都改掉。
不知道是不我水平太低。 感觉说的都是原本就这样的东西，
从使用者角度来看。
没有让我感觉，哇，原来是这样的思想！
比较有亮点的是：讲了javascript的一些历史。
numbcoder 说：
引用wade的发言：
这也是javascript一直停留在"只能用来实现简单页面特效"的层次，而不能用来构建大型系统的原因。
时间对于别出心裁的小玩意是最无情的。javascript如果能早点 extend 一个对象，或许就没有红及一时的actionscript鸟。
个人观点...........
对于你的回答，我都笑喷了。去了解一下 CommonJS，nodejs，couchDB，看看js还是不是小玩意
Shawnhai 说：
引用wade的发言：
这也是javascript一直停留在"只能用来实现简单页面特效"的层次，而不能用来构建大型系统的原因。
时间对于别出心裁的小玩意是最无情的。javascript如果能早点 extend 一个对象，或许就没有红及一时的actionscript鸟。
个人观点...........
这个不敢苟同, 别的不说, Gmail就是一反例. actionscript红及一时是因为那个时代的浏览器(ie6-)的这几项生理缺陷: 1)无法消锯齿,构建不出美学意义的的矢量图形; 2)无法旋转; 3)不支持透明运算; 4)动画功能很弱. 给了Flash良机, actionscript的逐渐健壮也是水到渠成, 而且一家公司掌控的语言升级换代起来比通用语言要容易得多.
maduoyuan 说：
对于第四点举的例子感觉不恰当。我的理解是prototype相当于是模板，仅仅是将其成员复制到对象中，例子中的写法感觉是在“滥用”。如果我写的话，我会这么写：
DOG.species = '犬科';
我觉得这才是共享数据。

顺便再说一点。
“如果没有填写，服务器端就返回错误，要求用户重新填写，这太浪费时间和服务器资源了。”，应该不是浪费服务器资源，而是浪费了网络资源，服务器端的验证是必须的，因为不能保证“用户”仅仅以一种方式访问服务器。
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); // 猫科
}
}
孙博 说：
引用maduoyuan的发言：
对于第四点举的例子感觉不恰当。我的理解是prototype相当于是模板，仅仅是将其成员复制到对象中，例子中的写法感觉是在“滥用”。如果我写的话，我会这么写：
DOG.species = '犬科';
我觉得这才是共享数据。
接下来实例化的DOG对象都访问不到这个species属性的
Cibo 说：
The Power of Simplicity
最直接的控制就好了,为什么还有用class做模板引入N多的东西呢
说到lisp,CLOS的generic更底层一点。自底向上的好处吧。相对而言,JOSN做“底”只比list 高点，通俗点。
cssview 说：
期待楼主把 constructor 属性也介绍一下
maduoyuan 说：
引用孙博的发言：
接下来实例化的DOG对象都访问不到这个species属性的
一、我现在不太清楚“共享”是什么意思。如果是这个类实例化的所有对象的某个属性都相同，那就应该是只读的，并且也应该是隐含的，否则，这个类定义地有问题。
二、如果非要访问我的写法中的那个属性，可以用 dogA.constructor.species。
孙博 说：
引用maduoyuan的发言：
如果非要访问我的写法中的那个属性，可以用 dogA.constructor.species。
实际上species是个静态变量 
朱子成 说：
哈哈，不知道为什么，每次看你解释的都会觉得很清晰。谢谢!
robin 说：
据我了解继承的话必须要有父类和子类,并且所有类都继承与同一个父类:Object.文中并没有谈到父类和子类.所以对js的继承机制还是有点摸不着头脑.期待楼主能介绍的更清楚些.
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这两个不同实例，不知道楼主想做到共享什么数据？极大的资源浪费又是指的什么呢？
qmi 说：
从别处看过这篇文章,可是作者没有写转载声明..谢谢!受益良多
damon 说：
看过lua的实现，看过python的实现，了解dict以及table，所以prototype就是dict和table。
keviyu 说：
引用cssview的发言：
期待楼主把 constructor 属性也介绍一下
document.write(Person.prototype.constructor.valueOf())
Kvkens 说：
希望作者多写点JS的对象东西，比看书学的快多了，通俗易懂啊！
烟屁股 说：
再三阅读，没发现所讲与继承有什么关系，倒是和静态变量的左右差不多。
Jeff 说：
Brendan Eich只是想设计一个比较简单的继承机制……
L 说：
引用maduoyuan的发言：
对于第四点举的例子感觉不恰当。我的理解是prototype相当于是模板，仅仅是将其成员复制到对象中，例子中的写法感觉是在“滥用”。如果我写的话，我会这么写：
DOG.species = '犬科';
我觉得这才是共享数据。
不要误导人了， 这样写法你确定能共享吗？
DOG.species = '犬科'; //这种写法，只能是 DOG 可以用，
它的子对象根本不受其影响。
Star 说：
引用嘀咕的发言：
这个“讲解的清楚”对于非计算机专业的朋友可能仍会造成困惑。阮先生这篇文章追溯到 JS 语言设计者 BE 的设计初衷，很不错。
知道设计者“为什么这样做”远比“怎么做的”重要
有同感，每次读那本小蝴蝶的某些章节会有茅塞顿开的感觉，但都是在经历了问题之后反过来看的时候。这篇文章适合各种层次的程序员，哪怕是程序爱好者。
Yoya 说：
“每一个实例对象，都有自己的属性和方法的副本”，对这句话在其它语言中不是也这样吗？
prototype对象的属性和方法，理解为模仿其它语言中的静态属性和方法不知道对不对。
Jackyy 说：
我的理解是用prototype指定的属性方法其实就是java对象的static修饰下的属性方法，不过作为脚本语言，这样的设计也是非常合理的。
plums 说：
听君一席话胜读十年书啊，拜服
airowner 说：

对象的引用确实是个大坑啊..
卡爱 说：
写的很明白，谢谢
讲prototype理解为java中的static属性 肯定还是不完全正确的，因为在java的class中的static变量值是可以通过实例化对象来改变static变量的值的，也可以通过继承该class，来改变其class类中的static变量值的，所以把prototype看成和java中的static类似显然不对！
小人 说：
来这个博客学习，只需要注意一点就行，不要看评论
Allen 说：
引用杨经纬的发言：
经济的Phd竟能对js理解如此深刻。8错
really? 阮兄NB!!! PFPF ^-^
康杰 说：
非常不错，看后明白了很多东西，谢谢博主。
InthendSun 说：
GOod,看明白了。对于有的评论到是糊里糊涂。
river 说：
非常感谢，让我明白了一个非常难理解又非常重要的概念。
玄 说：
你好，读了你写的三篇关于javascript的帖子，让我受益匪浅。。。
可否转载一下。。
转载的规矩我懂，放心。。
AlanX 说：
我感觉prototype就像Java中一个类的静态属性或方法，不大像继承，但倒是可以利用它来实现一种逻辑上的继承
mars 说：
你好，如果我在这里句 前面加一句dogA.species = 'fasdf';然后其他的不变。最后结果跟你写的不一样，这是为什么呢，想了想还是不通。
最终代码形式如下：
dogA.species = 'fasdf'
DOG.prototype.species = '猫科';
alert(dogA.species); // 猫科 #实际上是fasdf， chrome的dev tool下实验的
alert(dogB.species); // 猫科
柱子 说：
不仅仅是自己明白 还写的明白 很了不起，看过很多你的博文，收益良多
Demon 说：
其实算是委托吧
tianming 说：
我想说博主的这篇中文稿，比文中提到的Vjeux的英文稿，讲得东西差太多了。目测博主没有理解__proto__这个属性
楸 说：
如果javaScript当时设计时不是因为应付简单的表单验证，应该也不会设计的这样简单。本人是比较反感Js的继承机制，搞的相当复杂。只是个人观点，不过这也是Js的独特的地方之一。如果当时不是简单的应付，如果设计这门语言很严谨的话。估计现在Js不仅仅只做前台，后台也可以
Steven 说：
引用楸的发言：
如果javaScript当时设计时不是因为应付简单的表单验证，应该也不会设计的这样简单。本人是比较反感Js的继承机制，搞的相当复杂。只是个人观点，不过这也是Js的独特的地方之一。如果当时不是简单的应付，如果设计这门语言很严谨的话。估计现在Js不仅仅只做前台，后台也可以
node.js, CommonJS都被你吃了？twitter的后台要不是node.js，早挂了
此人**** 说：
写的很好，通俗易懂。
色额由 说：
非常不错，看后明白了很多东西，谢谢博主。
echo 说：
初学js,谢谢博主~
L 说：
在Java中，new操作符后面跟的也是构造方法的名称，
Foo foo = new Foo();
如果Foo类中没有写构造方法，默认会有一个无参数的构造方法Foo().
melisa 说：
没看明白，JAVA不是能定义类的吗?CLASS
kaibb 说：
Brendan Eich决定为构造函数设置一个prototype属性。
原来prototype是一个属性,以前一直不明白这是什么东东.
jiqimao 说：
这是我看过的最简单直白的说明,大牛.谢谢.
萝卜 说：
引用mars的发言：
你好，如果我在这里句 前面加一句dogA.species = 'fasdf';然后其他的不变。最后结果跟你写的不一样，这是为什么呢，想了想还是不通。
最终代码形式如下：
dogA.species = 'fasdf'
DOG.prototype.species = '猫科';
alert(dogA.species); // 猫科 #实际上是fasdf， chrome的dev tool下实验的
alert(dogB.species); // 猫科
你这个是属性的遮掩（或者叫覆盖），子类里面的同名属性自动覆盖父类中的属性，这样父类做的改变，也影响不到子类，应为子类中的属性已经不是父类属性的引用了
张恩立 说：
介绍一个东西为何而来，才能更好的让他在脑子里扎根，以后会多关注楼主的博客
showsscel 说：
讲得很清楚。
qiu 说：
非常好！清晰明了。支持楼主
王俊新 说：
认真拜读了阮老师的这篇文章，收益匪浅，非常感谢阮老师的无私！
本人初学javascript，从这篇文章主要学到了两点：一是javascript如何借鉴当时的面向对象语言（c++/java）实现实例对象的构造；二是javascript出现prototype属性的原因。
再次感谢！
rocketzhao 说：
一直关注阮兄的文章，这几天研究unicode，结合阮兄的博文和网上的其他文章，总算弄明白了大概。然后又看到了javascript的历史（原来javascript和java真有不浅的关系），以及prototype的设计原理，受益匪浅。但是看了上面的评论，大家都没有提出，文中提到的数据共享，其实就是指针。
wendy 说：
it a great help to me
Kyle 说：
非常独到的见解，理解不了的时候就追根溯源，从历史的角度来分析就容易理解。 赞
zzhi 说：
通俗易懂啊 看完后豁然开朗
Zhang Visper 说：
引用AlanX的发言：
我感觉prototype就像Java中一个类的静态属性或方法，不大像继承，但倒是可以利用它来实现一种逻辑上的继承
prototype 其实很难同 Java 这类面向对象中的某个特性进行类比，将它类比为静态属性和继承都是不准确的。如果非要给 prototype 一个注解，个人感觉叫共享属性比较合适
dx 说：
个人感觉作者第三个例子举得不恰当，改变dogA的属性必然不能影响dogB的属性，他们是两个不同的实例，无论如何也是不能相互影响的，改成这样会好些
DOG.species="猫科";
alert(dogB.species); // 显示"犬科"，不受DOG的影响
虽然我这样举例也有点别扭，但是说明了属性无法及时共享的问题，大家有什么好的例子吗？
贺文榜 说：
我尽然刚发现这篇文章！写的真好，通俗易懂，！
endless 说：
跟通常的类概念下的继承比起来，JavaScript这样的继承机制/思想更贴向现代编程设计更主张的组合关系，把prototype隐式组合进去，而非传统继承关系。在大中型项目里，面向接口、面向组合无疑是更现代的设计选择，简单继承关系亦无可厚非，但是如果是醉心于设计类图复杂继承关系的，我只能表示呵呵。
Posted by at No comments:
Subscribe to: Posts (Atom)