JS继承专题

近来有很多小伙伴都在讨论继承这一方面的知识，你所知道的js继承方式有哪些，下面来参考一下吧！

1、原型继承

把父类公有的和私有的，都变为子类实例公有的（类似）

缺点：

1. 父类想要赋予其他实例的私有属性，也会变成子类的公有属性
2. 子类可以基于原型链找到父类，并把它修改，这样对父类的其他实 例也会产生影响

function Parent(){
this.x=100;
}
Parent.prototype.getX=function(){
console.log(this.x);
}
let p=new Parent();
function Child(){
this.y=200;
}
Child.prototype=new Parent;
Child.prototype.getY=function(){
console.log(this.y);
}
let c=new Child();
console.dir(c);

2、call 继承

把父类的构造函数当做普通函数执行，让函数中的this指向子类的实例

把父类私有变成子类私有

缺点：无法获取父类的公有属性（普通函数执行和类的原型没什么关系）

 

function Parent(){
this.x=100;
}
Parent.prototype.getX=function(){
console.log(this.x);
}
let p=new Parent();
function Child(){
//让Parent运行，但是把它里面的this改为当前实例的this，
//这样就可以把Parent里面添加的属性给当前实例添加了
//等同于当前实例.x=100;
Parent.call(this);
this.y=200;
}
Child.prototype.getY=function(){
console.log(this.y);
}
let c=new Child();
console.dir(c);

3、寄生组合继承

通过 Object.create()来继承父类的公有属性，子类创建一个空的对象，让对象的原型为父类.prototype，不包含构造函数

function Parent(){
this.x=100;
}
Parent.prototype.getX=function(){
console.log(this.x);
}
let p=new Parent();
function Child(){
Parent.call(this);
this.y=200;
}
//创建一个this指向为Parent原型的空对象，让这个空对象指向Child的原型
Child.prototype=Object.create(Parent.prototype);
Child.prototype.getY=function(){
console.log(this.y);
}
let c=new Child();

4、class 继承

class继承中的extends 类似寄生组合式继承

class Parent{
constructor(arg) {
    this.x=100;
}
getX(){
console.log(this.x);
}
}

class Child extends Parent{
constructor(arg) {
super();
    this.y=100;
}
getY(){
console.log(this.y);
}
}
let c=new Child();
console.dir(c);

 如果看到这还是不太明白，那不妨运行一下，相信你就会懂了O(∩_∩)O