JS的三种继承方式
1.ES6 类继承
//1- es6 类继承
class Parent {
constructor() {
this.age = 30;
}
}
class Child extends Parent {
constructor() {
super();
this.name = '张三';
}
}
let o1 = new Child();
console.log(o1, o1.name, o1.age);// Child {age: 30, name: '张三'} '张三' 30
2.原型链继承
优点: 父类方法可以复用
缺点:父类的所有引用属性(info)会被所有子类共享,更改一个子类的引用属性,其他子类也会受影响子类型实例不能给父类型构造函数传参
// 2- 原型链继承
function Parent() {
this.age = 30;
}
function Child() {
this.name = '张三';
}
Child.prototype = new Parent();
let o2 = new Child();
console.log(o2, o2.name, o2.age);// Child {name: '张三'} '张三' 30
3.构造函数继承
优点: 1.可以在子类构造函数中向父类传参数
2.父类的引用属性不会被共享
缺点:只能继承构造函数的内部成员,不能继承原型链(Parent.prototype)上的方法
// 3- 构造函数继承
function Parent() {
this.age = 18;
}
function Child() {
this.name = '张三';
Parent.call(this);
}
let o3 = new Child();
console.log(o3, o3.name, o3.age);// Child {name: '张三', age: 18} '张三' 18
4.混合继承
优点: 1.父类的方法可以复用
2.可以在Child构造函数中向Parent构造函数中传参
3.父类构造函数中的引用属性不会被共享
// 4- 组合式继承
function Parent() {
this.age = 19;
}
function Child() {
Parent.call(this);
this.name = '张三';
}
Child.prototype = new Parent();
let o4 = new Child();
console.log(o4, o4.name, o4.age);// Child {age: 19, name: '张三'} '张三' 19