本文首发于GitHub，《JavaScript原型链以及ES3、ES5、ES6实现继承的不同方式》，欢迎关注我的GitHub。
原型
执行代码var o = new Object();，此时o对象内部会存储一个指针，这个指针指向了Object.prototype，当执行o.toString()等方法（或访问其他属性）时，o会首先查看自身有没有该方法或属性，如果没有的话就沿着内部存储的指针找到Object.prototype对象，然后查看Object.prototype对象是否有对应名称的方法或属性，如果有就调用Object.prototype的方法或属性。我们把这个指针叫做o对象的原型，你可以把它看做是Java类继承中的super关键字。
ES3规范中定义了Object.prototype.isPrototypeOf()方法，该方法可以判断某个对象是不是另一个对象的原型。Object.prototype.isPrototypeOf(o)返回true值可以确定Object.prototype就是o对象的原型。在ES3规范中，不能直接读取o对象的原型，也就是o对象的原型看不见摸不着的。ES5.1规范定义了Object.getPrototypeOf()方法，通过该方法可以获取对象的原型。我们可以通过Object.getPrototypeOf(o) === Object.prototype再次验证Object.prototype就是o对象的原型。ES6规范更加直接，为对象添加了一个__proto__属性，通过这个属性就可以获得对象的原型，所以在支持__proto__的浏览器中，o.__proto__ === Object.prototype也会返回true。
当我们执行var x = new X();时，浏览器会执行x.__proto__ = X.prototype，会将实例化对象的原型设置为对应的类的prototype对象，这一点很重要。
原型链
我们执行如下代码：
function Person(){};
var p = new Person();p -> Person.prototype -> Object.prototype -> nullfunction ClassA(name, age) {
this.name = name;
this.age = age;
}
ClassA.prototype.sayName = function () {
console.log(this.name);
};
ClassA.prototype.sayAge = function () {
console.log(this.age);
};function ClassB(name, age, job) {
ClassA.apply(this, [name, age]);
this.job = job;
}function ClassB(name, age, job) {
ClassA.apply(this, [name, age]);
this.job = job;
}
//新增
ClassB.prototype = ClassA.prototype;function ClassB(name, age, job) {
ClassA.apply(this, [name, age]);
this.job = job;
}
ClassB.prototype = ClassA.prototype;
//新增
ClassB.prototype.sayJob = function(){
console.log(this.job);
};function ClassB(name, age, job) {
ClassA.apply(this, [name, age]);
this.job = job;
}
// ClassB.prototype = ClassA.prototype;
//修改
ClassB.prototype = new ClassA();
ClassB.prototype.constructor = ClassB;
ClassB.prototype.sayJob = function(){
console.log(this.job);
};function ClassB(name, age, job) {
ClassA.apply(this, [name, age]);
this.job = job;
}
//修改
function ClassMiddle() {
}
ClassMiddle.prototype = ClassA.prototype;
ClassB.prototype = new ClassMiddle();
ClassB.prototype.constructor = ClassB;
ClassB.prototype.sayJob = function () {
console.log(this.job);
};...
//为ClassA添加静态属性
ClassA.staticValue = "static value";
//为ClassA添加静态方法
ClassA.getStaticValue = function() {
return ClassA.staticValue;
};
ClassA.setStaticValue = function(value) {
ClassA.staticValue = value;
};...
//ClassB继承ClassA的静态属性和方法
for (var p in ClassA) {
if (ClassA.hasOwnProperty(p)) {
ClassB[p] = ClassA[p];
}
}function extendsClass(Child, Father) {
//继承父类prototype中定义的实例属性和方法
function ClassMiddle() {
}
ClassMiddle.prototype = Father.prototype;
Child.prototype = new ClassMiddle();
Child.prototype.constructor = Child;
//继承父类的静态属性和方法
for (var p in Father) {
if (Father.hasOwnProperty(p)) {
Child[p] = Father[p];
}
}
}function ClassA(name, age) {
this.name = name;
this.age = age;
}
ClassA.prototype.sayName = function() {
console.log(this.name);
};
ClassA.prototype.sayAge = function() {
console.log(this.age);
};
ClassA.staticValue = "static value";
ClassA.getStaticValue = function() {
return ClassA.staticValue;
};
ClassA.setStaticValue = function(value) {
ClassA.staticValue = value;
};function ClassB(name, age, job) {
ClassA.apply(this, [name, age]);
this.job = job;
}
extendsClass(ClassB, ClassA);
ClassB.prototype.sayJob = function() {
console.log(this.job);
};我们可以在控制台中进行一下简单测试：
ES5实现继承
ES5.1规范中新增了Object.create()方法，该方法会传入一个对象，然后会返回一个对象，返回的对象的原型指向传入的对象，比如执行代码var output = Object.create(input)，相当于执行代码output.__proto__ = input;，output的原型是input。我们可以简化之前的代码，不再需要ClassMiddle，只需要执行ClassB.prototype = Object.create(ClassA.prototype);即可，相当于执行代码ClassB.prototype.__proto__ = ClassA.prototype;。
而且ES5.1中新增了Object.keys()方法用以获取对象自身的属性数组，我们可以用该方法简化继承父类静态属性和方法的过程。
根据以上两点，我们修改extendsClass方法如下所示：
function extendsClass(Child, Father) {
//继承父类prototype中定义的实例属性和方法
Child.prototype = Object.create(Father.prototype);
Child.prototype.constructor = Child;
//继承父类的静态属性和方法
Object.keys(Father).forEach(function(key) {
Child[key] = Father[key];
});
}ClassA和ClassB的代码无需变化。
ES6实现继承
我们之前提到，ES6规范定义了Object.prototype.proto属性，该属性既可读又可写，通过__proto__属性我们可以直接指定对象的原型。于是在ES6中我们将extendsClass修改为如下所示：
function extendsClass(Child, Father) {
//继承父类prototype中定义的实例属性和方法
Child.prototype.__proto__ = Father.prototype;//暴力直接，利用__proto__属性设置对象的原型
//继承父类的静态属性和方法
Child.__proto__ = Father;
}直接修改对象的__proto__属性值不是最佳选择，ES6规范中还定义了Object.setPrototypeOf()方法，通过执行Object.setPrototypeOf(b, a)会将a对象作为b对象的原型，即相当于执行了b.__proto__ = a;。为此我们利用该方法再次精简我们的extendsClass方法，如下所示：
function extendsClass(Child, Father) {
//继承父类prototype中定义的实例属性和方法
Object.setPrototypeOf(Child.prototype, Father.prototype);
//继承父类的静态属性和方法
Object.setPrototypeOf(Child, Father);
}Object.setPrototypeOf(Child.prototype, Father.prototype);相当于执行代码Child.prototype.__proto__ = Father.prototype;，使得Child能够继承Father中的实例属性和方法。Object.setPrototypeOf(Child, Father);相当于执行代码Child.__proto__ = Father;，使得Child能够继承Father中的静态属性和方法。
ES6中引入了class关键字，可以用class直接定义类，通过extends关键字实现类的继承，还可以通过static关键字定义类的静态方法。
我们用class等关键字重新实现ClassA和ClassB的代码，如下所示：
class ClassA{
constructor(name, age){
this.name = name;
this.age = age;
}
sayName(){
console.log(this.name);
}
sayAge(){
console.log(this.age);
}
static getStaticValue(){
return ClassA.staticValue;
}
static setStaticValue(value){
ClassA.staticValue = value;
}
}
ClassA.staticValue = "static value";
class ClassB extends ClassA{
constructor(name, age, job){
super(name, age);
this.job = job;
}
sayJob(){
console.log(this.job);
}
}ES6中不能通过static定义类的静态属性，我们可以直接通过ClassA.staticValue = "static value";定义类的静态属性。
需要注意的是，class关键字只是原型的语法糖，JavaScript继承仍然是基于原型实现的。
并不是所有的浏览器都支持class关键字，在生产环境中，我们可以编写ES6的代码，然后用Babel或TypeScript将其编译为ES5等主流浏览器支持的语法格式。
总结
执行
var x = new X();时，浏览器会执行x.__proto__ = X.prototype，会将实例化对象的原型设置为对应的类的prototype对象。实现类继承的关键是
Child.prototype.__proto__ = Father.prototype;，这样会将Father.prototype作为Child.prototype的原型。Object.prototype.__proto__属性是在ES6规范中所引入的，为了在ES3和ES5中需要通过各种方式模拟实现对Object.prototype.__proto__进行赋值。通过执行
Child.__proto__ = Father;可以实现继承父类的静态属性和方法。
参考
[1] MDN, ES3 Object.prototype.isPrototypeOf()
[2] MDN, ES5.1 Object.create()
[3] MDN, ES5.1 Object.getPrototypeOf()
[4] MDN, ES6 Object.setPrototypeOf()
[5] MDN, ES6 Object.prototype__proto__
[6] MDN, ES6 Classes