什么是继承？
简单说就是：在js中获取存在对象已有属性和方法的一种方式.下面我总结了几个继承：
一丶原型链继承
基本原理是：将父类的实例赋值给子类的原型。
// 父类
function Staff() {
this.company = 'tianchuang';
this.list = [];
}
// 父类的原型
Staff.prototype.getComName = function() {
return this.company;
};
// 子类
function Coder(name, skill) {
this.name = name;
this.skill = skill;
}
// 继承 Staff
Coder.prototype = new Staff();
// 因为子类原型的指向已经变了，所以需要把子类原型的co ntructor指向子类本身
Coder.prototype.constructor = Coder;
// 给子类原型添加属性
Coder.prototype.getInfo = function() {
return {
name: this.name,
skill: this.skill
};
};
let coder = new Coder('小明', 'javascript');
coder.getInfo(); // {name: '小明', skill: 'javascript'}
coder.getComName(); // 'tianchuang'
这种继承方式的缺点：
子类的实例可以访问父类的私有属性，子类的实例还可以更改该属性，这样不安全。
let coder1 = new Coder('zhangsan', 'python');
let coder2 = new Coder('liutian', 'java');
coder1.list; // []
coder1.list.push(1); //[1]
coder2.list // [1]
二丶构造函数继承
原理：在子类构造函数中，使用call来将子类的this绑定到父类中去
// 父类
function Staff() {
this.company = 'tianchuang';
this.list = [];
}
// 父类的原型
Staff.prototype.getComName = function() {
return this.company;
};
// 子类
function Coder(name, skill) {
Staff.call(this);
this.name = name;
this.skill = skill;
}
let coder = new Coder('xiaoming', 'java');
let coder2 = new Coder('zhaosan', 'c');
coder.getComName(); // Uncaught TypeError: coder.getComName is not a function
coder.list; //[]
coder.list.push(1); //[1]
coder2.list; //[]
优点：
借用构造函数法可以解决原型中引用类型值被修改的问题；
缺点：
只能继承父对象的实例属性和方法，不能继承父对象原型属性和方法
三丶组合继承
将原型继承和借用构造函数两种方式组合起来
// 父类
function Staff() {
this.company = 'tianchuang';
this.list = [];
}
// 父类的原型
Staff.prototype.getComName = function() {
return this.company;
};
// 子类
function Coder(name, skill) {
Staff.call(this); // 第一次调用
this.name = name;
this.skill = skill;
}
Coder.prototype = new Staff();// 第二次调用
Coder.prototype.constructor = Coder;
let coder = new Coder('xiaoming', 'java');
let coder2 = new Coder('zhaosan', 'c');
coder.getComName();
coder.list; //[]
coder.list.push(1); //[1]
coder2.list; //[]
优点：
可以保证每个函数有自己的属性，可以解决原型中引用类型值被修改的问题；
子类的实例可以继承父类原型上面的属性和方法
缺点：
在实例化子类的过程中，父类构造函数调用了两次
四丶寄生组合式继承（推荐）
所谓寄生继承：通过 Object.create() 将子类的原型继承到父类的原型上。
// 父类
function Staff() {
this.company = 'tianchuang';
this.list = [];
}
// 父类的原型
Staff.prototype.getComName = function() {
return this.company;
};
// 子类
function Coder(name, skill) {
Staff.call(this);
this.name = name;
this.skill = skill;
}
Coder.prototype = Object.create(Staff.prototype);
Coder.prototype.constructor = Coder;
let coder = new Coder('xiaoming', 'java');
let coder2 = new Coder('zhaosan', 'c');
coder.getComName(); // 'tianchuang'
coder.list; //[]
coder.list.push(1); //[1]
coder2.list; //[]
特点：
- 这种方式的高效率体现在纸雕用了一次父类构造函数，并且因此避免了在父类的prototype 上面创建不必要的、多余的属性。
- 同时，原型链还能保持不变，可以正常使用 instanceof 和 isPrototypeOf 。
- 开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。
五丶class extend 继承
ES6 中有了类的概念，可以通过 class 声明一个类，通过 extends 关键字来实现继承关系。
class 与 ES5 构造函数的主要区别：
class 只能通过 new 来调用，而构造函数则可以直接调用；
-
class 内部所有定义的方法，都是不可枚举的（non-enumerable）
class Parent { constructor(name) { this.name = name; } static say() { return 'hello'; } } class Child extends Parent { constructor(name, age) { super(name); // 调用父类的 constructor(name) this.age = age; } } var child1 = new Child('kevin', '18'); console.log(child1);
值得注意的是：
- super 关键字表示父类的构造函数，相当于 ES5 的 Parent.call(this)。
- 子类必须在 constructor 方法中调用 super 方法，否则新建实例时会报错。这是因为子类没有自己的 this 对象，而是继承父类的 this 对象，然后对其进行加工，如果不调用 super 方法，子类就得不到 this 对象。
- 正是因为这个原因，在子类的构造函数中，只有调用 super 之后，才可以使用 this 关键字，否则会报错。
-
子类的 proto 属性指向父类
因此，子类可以继承父类的静态方法。Child.__proto__ === Parent; // true Child.say(); // hello -
子类的原型的 proto，总是指向父类的 prototype 属性
Child.prototype.__proto__ === Parent.prototype; // true
我们会发现，相比寄生组合式继承，ES6 的 class 多了一个 Object.setPrototypeOf(Child, Parent) 的步骤，即 Child.proto = Parent。
————————————————
版权声明：本文原为CSDN博主「zhq2005095」的原创文章
原文链接：https://blog.csdn.net/zhq2005095/article/details/89242369
