面试官问：JS 的继承

我不是女神ヾ 2022-01-30 23:29 305阅读 0赞

用过 `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源码：https://github.com/facebook/react/blob/master/packages/react/src/ReactBaseClasses.js。

面试官可以顺着这个问 `JS`继承的相关问题，比如：**`ES6`的 `class`继承用ES5如何实现**。据说很多人答得不好。

构造函数、原型对象和实例之间的关系

要弄懂extends继承之前，先来复习一下构造函数、原型对象和实例之间的关系。

代码表示：

1.  `function F(){}`
2.  `var f = new F();`
3.  `// 构造器`
4.  `F.prototype.constructor === F; // true`
5.  `F.__proto__ === Function.prototype; // true`
6.  `Function.prototype.__proto__ === Object.prototype; // true`
7.  `Object.prototype.__proto__ === null; // true`
8.   
9.  `// 实例`
10. `f.__proto__ === F.prototype; // true`
11. `F.prototype.__proto__ === Object.prototype; // true`
12. `Object.prototype.__proto__ === null; // true`

笔者画了一张图表示：![1551235053689716.jpg][]

ES6 extends 继承做了什么操作

我们先看看这段包含静态方法的 `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

一图胜千言，笔者也画了一张图表示，如图所示：![1551235053764335.jpg][]

结合代码和图可以知道， `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__`链接呢。

设置 **proto**

`new`、 `Object.create`和 `Object.setPrototypeOf`可以设置 `__proto__`。

说明一下， `__proto__`这种写法是浏览器厂商自己的实现。

再结合一下图和代码看一下的 `new`， `new`出来的实例的 `__proto__`指向构造函数的 `prototype`，这就是 `new`做的事情。

new 做了什么

1、创建了一个全新的对象。

2、这个对象会被执行 `[[Prototype]]`（也就是 `__proto__`）链接。

3、生成的新对象会绑定到函数调用的 `this`。

4、通过 `new`创建的每个对象将最终被 `[[Prototype]]`链接到这个函数的 `prototype`对象上。

5、如果函数没有返回对象类型 `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()` 方法设置一个指定的对象的原型（即内部 `[[Prototype]]`属性）到另一个对象或 `null`： `Object.setPrototypeOf(obj,prototype)`。

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

`nodejs`源码就是利用这个实现继承的工具函数的。

1.  `function inherits(ctor, superCtor) {`
2.  ` if (ctor === undefined || ctor === null)`
3.  `   throw new ERR_INVALID_ARG_TYPE('ctor', 'Function', ctor);`
4.   
5.  ` if (superCtor === undefined || superCtor === null)`
6.  `   throw new ERR_INVALID_ARG_TYPE('superCtor', 'Function', superCtor);`
7.   
8.  ` if (superCtor.prototype === undefined) {`
9.  `   throw new ERR_INVALID_ARG_TYPE('superCtor.prototype',`
10. `                                  'Object', superCtor.prototype);`
11. ` }`
12. ` Object.defineProperty(ctor, 'super_', {`
13. `   value: superCtor,`
14. `   writable: true,`
15. `   configurable: true`
16. ` });`
17. ` Object.setPrototypeOf(ctor.prototype, superCtor.prototype);`
18. `}`

extends的ES5版本实现

知道了ES6 `extends`继承做了什么操作和设置 `__proto__`的知识点后，把上面 `ES6`例子的用 `ES5`就比较容易实现了，也就是说**实现寄生组合式继承**，简版代码就是：

1.  `// ES5 实现ES6 extends的例子`
2.  `function Parent(name){`
3.  `   this.name = name;`
4.  `}`
5.  `Parent.sayHello = function(){`
6.  `   console.log('hello');`
7.  `}`
8.  `Parent.prototype.sayName = function(){`
9.  `   console.log('my name is ' + this.name);`
10. `   return this.name;`
11. `}`
12.  
13. `function Child(name, age){`
14. `   // 相当于super`
15. `   Parent.call(this, name);`
16. `   this.age = age;`
17. `}`
18. `// new`
19. `function object(){`
20. `   function F() {}`
21. `   F.prototype = proto;`
22. `   return new F();`
23. `}`
24. `function _inherits(Child, Parent){`
25. `   // Object.create`
26. `   Child.prototype = Object.create(Parent.prototype);`
27. `   // __proto__`
28. `   // Child.prototype.__proto__ = Parent.prototype;`
29. `   Child.prototype.constructor = Child;`
30. `   // ES6`
31. `   // Object.setPrototypeOf(Child, Parent);`
32. `   // __proto__`
33. `   Child.__proto__ = Parent;`
34. `}`
35. `_inherits(Child,  Parent);`
36. `Child.prototype.sayAge = function(){`
37. `   console.log('my age is ' + this.age);`
38. `   return this.age;`
39. `}`
40. `var parent = new Parent('Parent');`
41. `var child = new Child('Child', 18);`
42. `console.log('parent: ', parent); // parent:  Parent {name: "Parent"}`
43. `Parent.sayHello(); // hello`
44. `parent.sayName(); // my name is Parent`
45. `console.log('child: ', child); // child:  Child {name: "Child", age: 18}`
46. `Child.sayHello(); // hello`
47. `child.sayName(); // my name is Child`
48. `child.sayAge(); // my age is 18`

我们完全可以把上述 `ES6的例子`通过 `babeljs`(https://babeljs.io/repl)转码成 `ES5`来查看，更严谨的实现。

1.  `// 对转换后的代码进行了简要的注释`
2.  `"use strict";`
3.  `// 主要是对当前环境支持Symbol和不支持Symbol的typeof处理`
4.  `function _typeof(obj) {`
5.  `   if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {`
6.  `       _typeof = function _typeof(obj) {`
7.  `           return typeof obj;`
8.  `       };`
9.  `   } else {`
10. `       _typeof = function _typeof(obj) {`
11. `           return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;`
12. `       };`
13. `   }`
14. `   return _typeof(obj);`
15. `}`
16. `// _possibleConstructorReturn 判断Parent。call(this, name)函数返回值 是否为null或者函数或者对象。`
17. `function _possibleConstructorReturn(self, call) {`
18. `   if (call && (_typeof(call) === "object" || typeof call === "function")) {`
19. `       return call;`
20. `   }`
21. `   return _assertThisInitialized(self);`
22. `}`
23. `// 如何 self 是void 0 （undefined） 则报错`
24. `function _assertThisInitialized(self) {`
25. `   if (self === void 0) {`
26. `       throw new ReferenceError("this hasn't been initialised - super() hasn't been called");`
27. `   }`
28. `   return self;`
29. `}`
30. `// 获取__proto__`
31. `function _getPrototypeOf(o) {`
32. `   _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {`
33. `       return o.__proto__ || Object.getPrototypeOf(o);`
34. `   };`
35. `   return _getPrototypeOf(o);`
36. `}`
37. `// 寄生组合式继承的核心`
38. `function _inherits(subClass, superClass) {`
39. `   if (typeof superClass !== "function" && superClass !== null) {`
40. `       throw new TypeError("Super expression must either be null or a function");`
41. `   }`
42. `   // Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。`
43. `   // 也就是说执行后 subClass.prototype.__proto__ === superClass.prototype; 这条语句为true`
44. `   subClass.prototype = Object.create(superClass && superClass.prototype, {`
45. `       constructor: {`
46. `           value: subClass,`
47. `           writable: true,`
48. `           configurable: true`
49. `       }`
50. `   });`
51. `   if (superClass) _setPrototypeOf(subClass, superClass);`
52. `}`
53. `// 设置__proto__`
54. `function _setPrototypeOf(o, p) {`
55. `   _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {`
56. `       o.__proto__ = p;`
57. `       return o;`
58. `   };`
59. `   return _setPrototypeOf(o, p);`
60. `}`
61. `// instanceof操作符包含对Symbol的处理`
62. `function _instanceof(left, right) {`
63. `   if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {`
64. `       return right[Symbol.hasInstance](left);`
65. `   } else {`
66. `       return left instanceof right;`
67. `   }`
68. `}`
69.  
70. `function _classCallCheck(instance, Constructor) {`
71. `   if (!_instanceof(instance, Constructor)) {`
72. `       throw new TypeError("Cannot call a class as a function");`
73. `   }`
74. `}`
75. `// 按照它们的属性描述符 把方法和静态属性赋值到构造函数的prototype和构造器函数上`
76. `function _defineProperties(target, props) {`
77. `   for (var i = 0; i < props.length; i++) {`
78. `       var descriptor = props[i];`
79. `       descriptor.enumerable = descriptor.enumerable || false;`
80. `       descriptor.configurable = true;`
81. `       if ("value" in descriptor) descriptor.writable = true;`
82. `       Object.defineProperty(target, descriptor.key, descriptor);`
83. `   }`
84. `}`
85. `// 把方法和静态属性赋值到构造函数的prototype和构造器函数上`
86. `function _createClass(Constructor, protoProps, staticProps) {`
87. `   if (protoProps) _defineProperties(Constructor.prototype, protoProps);`
88. `   if (staticProps) _defineProperties(Constructor, staticProps);`
89. `   return Constructor;`
90. `}`
91.  
92. `// ES6`
93. `var Parent = function () {`
94. `   function Parent(name) {`
95. `       _classCallCheck(this, Parent);`
96. `       this.name = name;`
97. `   }`
98. `   _createClass(Parent, [{`
99. `       key: "sayName",`
100. `       value: function sayName() {`
101. `           console.log('my name is ' + this.name);`
102. `           return this.name;`
103. `       }`
104. `   }], [{`
105. `       key: "sayHello",`
106. `       value: function sayHello() {`
107. `           console.log('hello');`
108. `       }`
109. `   }]);`
110. `   return Parent;`
111. `}();`
112.  
113. `var Child = function (_Parent) {`
114. `   _inherits(Child, _Parent);`
115. `   function Child(name, age) {`
116. `       var _this;`
117. `       _classCallCheck(this, Child);`
118. `       // Child.__proto__ => Parent`
119. `       // 所以也就是相当于Parent.call(this, name); 是super(name)的一种转换`
120. `       // _possibleConstructorReturn 判断Parent.call(this, name)函数返回值 是否为null或者函数或者对象。`
121. `       _this = _possibleConstructorReturn(this, _getPrototypeOf(Child).call(this, name));`
122. `       _this.age = age;`
123. `       return _this;`
124. `   }`
125. `   _createClass(Child, [{`
126. `       key: "sayAge",`
127. `       value: function sayAge() {`
128. `           console.log('my age is ' + this.age);`
129. `           return this.age;`
130. `       }`
131. `   }]);`
132. `   return Child;`
133. `}(Parent);`
134.  
135. `var parent = new Parent('Parent');`
136. `var child = new Child('Child', 18);`
137. `console.log('parent: ', parent); // parent:  Parent {name: "Parent"}`
138. `Parent.sayHello(); // hello`
139. `parent.sayName(); // my name is Parent`
140. `console.log('child: ', child); // child:  Child {name: "Child", age: 18}`
141. `Child.sayHello(); // hello`
142. `child.sayName(); // my name is Child`
143. `child.sayAge(); // my age is 18`

如果对JS继承相关还是不太明白的读者，推荐阅读以下书籍的相关章节，可以自行找到相应的 `pdf`版本。

推荐阅读JS继承相关的书籍章节

**1、《JavaScript高级程序设计第3版》第6章——面向对象的程序设计**

6种继承的方案，分别是原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。图灵社区本书地址，后文放出 `github`链接，里面包含这几种继承的代码 `demo`。

**2、《JavaScript面向对象编程第2版》第6章——继承**

12种继承的方案：

1.  原型链法（仿传统）
2.  仅从原型继承法
3.  临时构造器法
4.  原型属性拷贝法
5.  全属性拷贝法（即浅拷贝法）
6.  深拷贝法
7.  原型继承法
8.  扩展与增强模式
9.  多重继承法
10. 寄生继承法
11. 构造器借用法
12. 构造器借用与属性拷贝法

**3、《ES6标准入门》第21章——class的继承**

**4、《深入理解ES6》第9章——JavaScript中的类**

**5、《你不知道的JavaScript》上卷第6章——行为委托和附录A（ES6中的class）**

总结

继承对于JS来说就是父类拥有的方法和属性、静态方法等，子类也要拥有。子类中可以利用原型链查找，也可以在子类调用父类，或者从父类拷贝一份到子类等方案。

继承方法可以有很多，重点在于必须理解并熟。

悉这些对象、原型以及构造器的工作方式，剩下的就简单了。**寄生组合式继承**是开发者使用比较多的。

回顾寄生组合式继承，主要就是三点：

1.  子类构造函数的 `__proto__`指向父类构造器，继承父类的静态方法
2.  子类构造函数的 `prototype`的 `__proto__`指向父类构造器的 `prototype`，继承父类的方法。
3.  子类构造器里调用父类构造器，继承父类的属性。

行文到此，文章就基本写完了。文章代码和图片等资源放在这里github inhert和 `demo`展示 `es6-extends`，结合 `console`、 `source`面板查看更佳。

[1551235053689716.jpg]: https://www.itcodemonkey.com/data/upload/portal/20190227/1551235053689716.jpg
[1551235053764335.jpg]: https://www.itcodemonkey.com/data/upload/portal/20190227/1551235053764335.jpg