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

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

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

class Point{...}

class ColorPoint extends Point{...}

var p = new Point(...),cp = new ColorPoint(...);

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

typeof Point// function
console.log(Object.getOwnPropertyNames(Point))//["length", "name", "prototype", "getDesc", "TAG"]

typeof ColorPoint //function
console.log(Object.getOwnPropertyNames(ColorPoint))//["length","name","prototype"]

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

console.log(typeof Point.prototype);//object
console.log(Object.getOwnPropertyNames(Point.prototype));//["constructor","toString"]
Point.prototype.constructor === Point//true

console.log(typeof ColorPoint.prototype);//object
console.log(Object.getOwnPropertyNames(ColorPoint.prototype));//["contructor","toString"]
ColorPoint.prototype.constructor === ColorPoint

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

Object.getPrototypeOf(Object.prototype) === null

Object.getPrototypeOf(Function.prototype) === Object.prototype

Object.getPrototypeOf(Point) === Function.prototype//true

Object.getPrototypeOf(ColorPoint) === Point//true

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

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

Object.getPrototypeOf(cp) === ColorPoint.prototype//true

Object.getPrototypeOf(ColorPoint.prototype) === Point.prototype//true

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

Object.getPrototypeOf(Object.prototype) === null//true

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

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



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

我们看几个其它的例子：

class C{}

Object.getPrototypeOf(C) === Function.prototype//true
Object.getPrototypeOf(C.prototype) === Object.prototype//true

class C extends Object {
}

Object.getPrototypeOf(C) === Object//true
Object.getPrototypeOf(C.prototype) === Object.prototype//true

class C extends null {
}

Object.getPrototypeOf(C) === Function.prototype //true
Object.getPrototypeOf(C.prototype) === null//true

*以上全部代码在Chrome 47下通过测试