原文作者若川，掘金鏈接：https://juejin.im/post/5c433e216fb9a049c15f841b

寫于2019年2月20日，現在發到公眾號聲明原創，之前被《前端大全》公眾號等轉載閱讀量超1w+，知乎掘金等累計閱讀量超過1w+。
導讀：文章主要通過ES6的extends，結合ES5的寄生組合繼承，圖文并茂的講述JS的繼承，最后還推薦了一些書籍的繼承的章節，旨在讓讀者掌握JS的繼承。

用過?React的讀者知道，經常用?extends繼承?React.Component。

// 部分源碼
function Component(props, context, updater) {// ...
}
Component.prototype.setState = function(partialState, callback){// ...
}
const React = {Component,// ...
}
// 使用
class index extends React.Component{// ...
}

點擊這里查看 React github源碼

面試官可以順著這個問?JS繼承的相關問題，比如：?ES6的?class繼承用ES5如何實現。據說很多人答得不好。

構造函數、原型對象和實例之間的關系

要弄懂extends繼承之前，先來復習一下構造函數、原型對象和實例之間的關系。代碼表示：

function F(){}
var f = new F();
// 構造器
F.prototype.constructor === F; // true
F.__proto__ === Function.prototype; // true
Function.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true
// 實例
f.__proto__ === F.prototype; // true
F.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true

筆者畫了一張圖表示：?

`ES6extends`?繼承做了什么操作

我們先看看這段包含靜態方法的?ES6繼承代碼：

// ES6
class Parent{constructor(name){this.name = name;}static sayHello(){console.log('hello');}sayName(){console.log('my name is ' + this.name);return this.name;}
}
class Child extends Parent{constructor(name, age){super(name);this.age = age;}sayAge(){console.log('my age is ' + this.age);return this.age;}
}
let parent = new Parent('Parent');
let child = new Child('Child', 18);
console.log('parent: ', parent); // parent:  Parent?{name: "Parent"}
Parent.sayHello(); // hello
parent.sayName(); // my name is Parent
console.log('child: ', child); // child:  Child?{name: "Child", age: 18}
Child.sayHello(); // hello
child.sayName(); // my name is Child
child.sayAge(); // my age is 18

其中這段代碼里有兩條原型鏈，不信看具體代碼。

// 1、構造器原型鏈
Child.__proto__ === Parent; // true
Parent.__proto__ === Function.prototype; // true
Function.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true
// 2、實例原型鏈
child.__proto__ === Child.prototype; // true
Child.prototype.__proto__ === Parent.prototype; // true
Parent.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true

一圖勝千言，筆者也畫了一張圖表示，如圖所示：

?結合代碼和圖可以知道。?ES6extends?繼承，主要就是：

1.把子類構造函數(?Child)的原型(?__proto__)指向了父類構造函數(?Parent)，
2.把子類實例?child的原型對象(?Child.prototype) 的原型(?__proto__)指向了父類?parent的原型對象(?Parent.prototype)。

這兩點也就是圖中用不同顏色標記的兩條線。

3.子類構造函數?Child繼承了父類構造函數?Preant的里的屬性。使用?super調用的(?ES5則用?call或者?apply調用傳參)。也就是圖中用不同顏色標記的兩條線。

看過《JavaScript高級程序設計-第3版》章節?6.3繼承的讀者應該知道，這?2和3小點，正是寄生組合式繼承，書中例子沒有?第1小點。?1和2小點都是相對于設置了?__proto__鏈接。那問題來了，什么可以設置了?__proto__鏈接呢。

`new`、?`Object.create`和?`Object.setPrototypeOf`可以設置?`proto`

說明一下，?__proto__這種寫法是瀏覽器廠商自己的實現。再結合一下圖和代碼看一下的?new，?new出來的實例的proto指向構造函數的?prototype，這就是?new做的事情。摘抄一下之前寫過文章的一段。面試官問：能否模擬實現JS的new操作符，有興趣的讀者可以點擊查看。

`new`做了什么：

創建了一個全新的對象。
這個對象會被執行?[[Prototype]]（也就是?__proto__）鏈接。
生成的新對象會綁定到函數調用的?this。
通過?new創建的每個對象將最終被?[[Prototype]]鏈接到這個函數的?prototype對象上。
如果函數沒有返回對象類型?Object(包含?Functoin,?Array,?Date,?RegExg,?Error)，那么?new表達式中的函數調用會自動返回這個新的對象。

`Object.create`?`ES5提供的`

Object.create(proto,[propertiesObject])?方法創建一個新對象，使用現有的對象來提供新創建的對象的proto。它接收兩個參數，不過第二個可選參數是屬性描述符（不常用，默認是?undefined）。對于不支持?ES5的瀏覽器，?MDN上提供了?ployfill方案。?MDN Object.create()

// 簡版：也正是應用了new會設置__proto__鏈接的原理。
if(typeof Object.create !== 'function'){Object.create = function(proto){function F() {}F.prototype = proto;return new F();}
}

`Object.setPrototypeOf`?`ES6提供的`

Object.setPrototypeOf?MDN

Object.setPrototypeOf()?方法設置一個指定的對象的原型 ( 即, 內部?[[Prototype]]屬性）到另一個對象或?null。?Object.setPrototypeOf(obj,prototype)

`ployfill`
// 僅適用于Chrome和FireFox，在IE中不工作：
Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {obj.__proto__ = proto;return obj;
}

nodejs源碼就是利用這個實現繼承的工具函數的。?nodejs utils inherits

function inherits(ctor, superCtor) {if (ctor === undefined || ctor === null)throw new ERR_INVALID_ARG_TYPE('ctor', 'Function', ctor);if (superCtor === undefined || superCtor === null)throw new ERR_INVALID_ARG_TYPE('superCtor', 'Function', superCtor);if (superCtor.prototype === undefined) {throw new ERR_INVALID_ARG_TYPE('superCtor.prototype','Object', superCtor.prototype);}Object.defineProperty(ctor, 'super_', {value: superCtor,writable: true,configurable: true});Object.setPrototypeOf(ctor.prototype, superCtor.prototype);
}

`ES6`的?`extends`的?`ES5`版本實現

知道了?ES6extends繼承做了什么操作和設置?__proto__的知識點后，把上面?ES6例子的用?ES5就比較容易實現了，也就是說實現寄生組合式繼承，簡版代碼就是：

// ES5 實現ES6 extends的例子
function Parent(name){this.name = name;
}
Parent.sayHello = function(){console.log('hello');
}
Parent.prototype.sayName = function(){console.log('my name is ' + this.name);return this.name;
}
function Child(name, age){// 相當于superParent.call(this, name);this.age = age;
}
// new
function object(){function F() {}F.prototype = proto;return new F();
}
function _inherits(Child, Parent){// Object.createChild.prototype = Object.create(Parent.prototype);// __proto__// Child.prototype.__proto__ = Parent.prototype;Child.prototype.constructor = Child;// ES6// Object.setPrototypeOf(Child, Parent);// __proto__Child.__proto__ = Parent;
}
_inherits(Child,  Parent);
Child.prototype.sayAge = function(){console.log('my age is ' + this.age);return this.age;
}
var parent = new Parent('Parent');
var child = new Child('Child', 18);
console.log('parent: ', parent); // parent:  Parent?{name: "Parent"}
Parent.sayHello(); // hello
parent.sayName(); // my name is Parent
console.log('child: ', child); // child:  Child?{name: "Child", age: 18}
Child.sayHello(); // hello
child.sayName(); // my name is Child
child.sayAge(); // my age is 18

我們完全可以把上述?ES6的例子通過?babeljs轉碼成?ES5來查看，更嚴謹的實現。

// 對轉換后的代碼進行了簡要的注釋
"use strict";
// 主要是對當前環境支持Symbol和不支持Symbol的typeof處理
function _typeof(obj) {if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {_typeof = function _typeof(obj) {return typeof obj;};} else {_typeof = function _typeof(obj) {return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;};}return _typeof(obj);
}
// _possibleConstructorReturn 判斷Parent。call(this, name)函數返回值 是否為null或者函數或者對象。
function _possibleConstructorReturn(self, call) {if (call && (_typeof(call) === "object" || typeof call === "function")) {return call;}return _assertThisInitialized(self);
}
// 如何 self 是void 0 （undefined） 則報錯
function _assertThisInitialized(self) {if (self === void 0) {throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;
}
// 獲取__proto__
function _getPrototypeOf(o) {_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {return o.__proto__ || Object.getPrototypeOf(o);};return _getPrototypeOf(o);
}
// 寄生組合式繼承的核心
function _inherits(subClass, superClass) {if (typeof superClass !== "function" && superClass !== null) {throw new TypeError("Super expression must either be null or a function");}// Object.create()方法創建一個新對象，使用現有的對象來提供新創建的對象的__proto__。// 也就是說執行后 subClass.prototype.__proto__ === superClass.prototype; 這條語句為truesubClass.prototype = Object.create(superClass && superClass.prototype, {constructor: {value: subClass,writable: true,configurable: true}});if (superClass) _setPrototypeOf(subClass, superClass);
}
// 設置__proto__
function _setPrototypeOf(o, p) {_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {o.__proto__ = p;return o;};return _setPrototypeOf(o, p);
}
// instanceof操作符包含對Symbol的處理
function _instanceof(left, right) {if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {return right[Symbol.hasInstance](left);} else {return left instanceof right;}
}
function _classCallCheck(instance, Constructor) {if (!_instanceof(instance, Constructor)) {throw new TypeError("Cannot call a class as a function");}
}
// 按照它們的屬性描述符 把方法和靜態屬性賦值到構造函數的prototype和構造器函數上
function _defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}
}
// 把方法和靜態屬性賦值到構造函數的prototype和構造器函數上
function _createClass(Constructor, protoProps, staticProps) {if (protoProps) _defineProperties(Constructor.prototype, protoProps);if (staticProps) _defineProperties(Constructor, staticProps);return Constructor;
}
// ES6
var Parent = function () {function Parent(name) {_classCallCheck(this, Parent);this.name = name;}_createClass(Parent, [{key: "sayName",value: function sayName() {console.log('my name is ' + this.name);return this.name;}}], [{key: "sayHello",value: function sayHello() {console.log('hello');}}]);return Parent;
}();
var Child = function (_Parent) {_inherits(Child, _Parent);function Child(name, age) {var _this;_classCallCheck(this, Child);// Child.__proto__ => Parent// 所以也就是相當于Parent.call(this, name); 是super(name)的一種轉換// _possibleConstructorReturn 判斷Parent.call(this, name)函數返回值 是否為null或者函數或者對象。_this = _possibleConstructorReturn(this, _getPrototypeOf(Child).call(this, name));_this.age = age;return _this;}_createClass(Child, [{key: "sayAge",value: function sayAge() {console.log('my age is ' + this.age);return this.age;}}]);return Child;
}(Parent);
var parent = new Parent('Parent');
var child = new Child('Child', 18);
console.log('parent: ', parent); // parent:  Parent?{name: "Parent"}
Parent.sayHello(); // hello
parent.sayName(); // my name is Parent
console.log('child: ', child); // child:  Child?{name: "Child", age: 18}
Child.sayHello(); // hello
child.sayName(); // my name is Child
child.sayAge(); // my age is 18

如果對JS繼承相關還是不太明白的讀者，推薦閱讀以下書籍的相關章節，可以自行找到相應的?pdf版本。

總結

繼承對于JS來說就是父類擁有的方法和屬性、靜態方法等，子類也要擁有。子類中可以利用原型鏈查找，也可以在子類調用父類，或者從父類拷貝一份到子類等方案。繼承方法可以有很多，重點在于必須理解并熟悉這些對象、原型以及構造器的工作方式，剩下的就簡單了。寄生組合式繼承是開發者使用比較多的。回顧寄生組合式繼承。主要就是三點：

1.子類構造函數的?__proto__指向父類構造器，繼承父類的靜態方法。
2.子類構造函數的?prototype的?__proto__指向父類構造器的?prototype，繼承父類的方法。
3.子類構造器里調用父類構造器，繼承父類的屬性。行文到此，文章就基本寫完了。文章代碼和圖片等資源放在這里github inhert和?demo展示?es6-extends，結合?console、source面板查看更佳。

讀者發現有不妥或可改善之處，歡迎評論指出。另外覺得寫得不錯，可以點贊、評論、轉發，也是對筆者的一種支持。

關于

作者：常以若川為名混跡于江湖。前端路上 | PPT愛好者 | 所知甚少，唯善學。
個人博客 http://lxchuan12.github.io?使用?vuepress重構了，閱讀體驗可能更好些
https://github.com/lxchuan12/blog，相關源碼和資源都放在這里，求個 star^_^~

微信交流群，加我微信lxchuan12，注明來源，拉您進前端視野交流群

下圖是公眾號二維碼：若川視野，一個可能比較有趣的前端開發類公眾號，目前前端內容不多