【js基础】继承（原型链继承、组合式继承、寄生组合式继承、class的实现）

1、原型链继承
缺点：
（1）父类引用类型属性会被子类所有实例共享（改一个全变）
（2）子类不能给父类传参

// 原型链继承 function Parent() { this.name = 'parent' this.arr = [1,2,3] // 引用类型！坑点 } function Child(){} Child.prototype = new Parent(); let c1 = new Child(); let c2 = new Child(); c1.arr.push(4); console.log(c1.arr, c2.arr)

2、构造函数继承

缺点：
（1）方法在构造函数中，每个实例都会创建一遍，无法复用
（2）原型上的属性、方法不能继承

function Parent(name) { this.name = name; this.arr = [1,2,3] // 引用类型！坑点 } function Child(name){ Parent.call(this, name) } let c1 = new Child('宏宏'); let c2 = new Child('兰兰') console.log(c1.name) c1.arr.push(4); console.log(c1.arr, c2.arr)

3、组合继承，结合上面两种
缺点：
（1）2次调用父类构造函数、有性能问题
（2）子类原型上的属性，是冗余的，实例在构造函数中已经创建了自己的属性

function Parent(name) { this.name = name; this.arr = [1,2,3] // 引用类型！坑点 } Parent.prototype.say = function() { console.log('say hi') } function Child(){ Parent.call(this) } Child.prototype = new Parent(); let c1 = new Child('宏宏'); let c2 = new Child('兰兰')

4、原型继承
缺点和原型链继承一样

const person = { name: "张三", colors: ["红", "绿", "蓝"], // 引用类型！坑点 say() { console.log(this.name); } }; // 2. 使用原型式继承，创建新对象 const p1 = Object.create(person); p1.say()

5、寄生继承
寄生继承 在原型继承基础上增添一些方法

6、组合寄生式继承

function Parent() { this.name = 'parent' } Parent.prototype.say = function() {} function Child() { Parent.call(this) // 1次 } // 核心：继承父类原型，不调用父构造函数 Child.prototype = Object.create(Parent.prototype) Child.prototype.constructor = Child // 修复指向

7、class继承（实际就是组合寄生的语法糖）

class Parent {} class Child extends Parent { constructor() { super() // 相当于 Parent.call(this) } }

8、常见面试问答
（1）说说js继承的理解
答：js继承是基于原型链的继承，而不是基于类的继承。每个实例都有_proto_属性，每个构造函数都有prototype，每个实例的_proto_指针指向构造函数的原型，查找属性、方法时会向上查找，直到找到null。（结合原型链概念来说）
（2）为什么不能直接用Child.prototype = Parent.prototype？

答：因为原型是引用类型，直接赋值会污染父类，所有实例都会有影响。

（3）Object.create()的作用是什么？

答：创建一个空对象，使七_proto_属性指向传入的参数。

（4）继承中constructor为什么要修正？

答：不修正构造函数是Parent

（5）Object.create (null) 和 {} 有什么区别？继承关系有什么不同？
答：{}的_proto_指向Object.prototype,有Object的方法在上面，null的_proto_属性是undefined，没有原型链。

（6）如何实现一个 “继承”，既能继承属性，又不污染原型？

function inherit(child, parent) { let prototype = Object.create(parent.prototype); prototype.constructor = child; child.prototype = prototype; }

（7）用代码还原 ES6 继承底层

// 父类 function Parent(name) { this.name = name; } Parent.prototype.say = function () {} // 子类 function Child(name, age) { // 3. 调用父类创建 this Parent.call(this, name); this.age = age; } // 1. 子类 __proto__ 指向父类（继承静态属性） Child.__proto__ = Parent; // 2. 子类原型继承父类原型 Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Child;