ES6学习——类语法：继承中的原型链

http://blog.csdn.net/kittyjie/article/details/50492054

上篇文章中我们讲了些类的基本概念，其中提到ES6中的类语法是对原型继承的一种封装。JS的原型继承一共有两条原型链，显示和隐式，那么在类继承的语法中，这两条原型链又是怎么样的呢？

继续使用上篇文章中的例子：

[html]  view plain  copy

 

1. class Point{...}  
2.   
3. class ColorPoint extends Point{...}  
4.   
5. var p = new Point(...),cp = new ColorPoint(...);  

下面先一步一步来检测显示原型链：

[html]  view plain  copy

 

1. typeof Point// function  
2. console.log(Object.getOwnPropertyNames(Point))//["length", "name", "prototype", "getDesc", "TAG"]  
3.   
4. typeof ColorPoint //function  
5. console.log(Object.getOwnPropertyNames(ColorPoint))//["length","name","prototype"]  

Point和ColorPoint都是function，存在显示原型prototype属性，其中Point上还存在静态属性TAG和静态方法getDesc：

[html]  view plain  copy

 

1. console.log(typeof Point.prototype);//object  
2. console.log(Object.getOwnPropertyNames(Point.prototype));//["constructor","toString"]  
3. Point.prototype.constructor === Point//true  
4.   
5. console.log(typeof ColorPoint.prototype);//object  
6. console.log(Object.getOwnPropertyNames(ColorPoint.prototype));//["contructor","toString"]  
7. ColorPoint.prototype.constructor === ColorPoint  

显示原型就这两个，剩下的都是隐式原型了，继承的关系都靠这条原型链完成，我们先看所谓的类Point和ColorPoint隐式原型：

[javascript]  view plain  copy

 

1. Object.getPrototypeOf(Object.prototype) === null  
2.   
3. Object.getPrototypeOf(Function.prototype) === Object.prototype  
4.   
5. Object.getPrototypeOf(Point) === Function.prototype//true  
6.   
7. Object.getPrototypeOf(ColorPoint) === Point//true  

看清上面的关系了吗？这也是为什么我们在Point上定义静态TAG属性，却也可以用ColorPoint来访问。

弄清了类之间的继承关系，在来看实例之间的继承关系：

[javascript]  view plain  copy

 

1. Object.getPrototypeOf(cp) === ColorPoint.prototype//true  
2.   
3. Object.getPrototypeOf(ColorPoint.prototype) === Point.prototype//true  
4.   
5. Object.getPrototypeOf(Point.prototype) === Object.prototype//true  
6.   
7. Object.getPrototypeOf(Object.prototype) === null//true  

[javascript]  view plain  copy

 

1. Object.getPrototypeOf(p) === Point.prototype//true  

看清上面的关系了吗？比较混乱是不是，看下面的图立刻就清楚了：

看了这个图是不是脑子里有了更形象的印象了，要熟记这个原型链，对以后复杂的应用会有很大帮助。

我们看几个其它的例子：

[javascript]  view plain  copy

 

1. class C{}  
2.   
3. Object.getPrototypeOf(C) === Function.prototype//true  
4. Object.getPrototypeOf(C.prototype) === Object.prototype//true  

[javascript]  view plain  copy

 

1. class C extends Object {  
2. }  
3.   
4. Object.getPrototypeOf(C) === Object//true  
5. Object.getPrototypeOf(C.prototype) === Object.prototype//true  

[javascript]  view plain  copy

 

1. class C extends null {  
2. }  
3.   
4. Object.getPrototypeOf(C) === Function.prototype //true  
5. Object.getPrototypeOf(C.prototype) === null//true