js中的继承 | 三十六重天凌霄股份有限公司

发布日期: 2020-03-23

文章字数: 1.1k

阅读时长: 4 分

阅读次数:

继承的概念

继承就是子类继承父类的属性和方法，目的可以让子类的实例能够使用父类的属性和方法，那在JS中类指的就是构造函数

1.原型链继承

原型链继承的核心

子类构造函数.prototype=父类的实例
子类构造函数.prototype.constructor=子类构造函数

1.原型链继承就是将父类的原型放到子类的原型链上，实例想要调用原型中的方法可以通过__proto__原型链的机制来完成

2.子类可以重写父类上的属性和方法

3.父类中私有的或者公有的属性和方法，最后都会变成子类公有的属性和方法

// 父类构造函数
function A(X){
    this.x=x
}
 
// 父类的公有的方法
A.prototype.getX=function(){
    console.log(this.x)
}
 
//子类
function B(y){
    this.y=y
}
 
//实现继承 把父类实例放到子类的原型上
B.prototype=new A('父类')
 
//原型链
B.prototype.constructor=B
B.prototype.getY=function(){
    console.log(this.y)
}
 
//创建实例
let b=new B('子类')
console.log(b)

2.call继承

call继承又称（借用构造函数继承）

在子类构造函数中把父类构造函数当作普通函数执行，并且通过call方法把父类构造函数中的this替换成子类的实例（this），这样相当于给子类实例上设置了私有的属性和方法。

1.只能继承父类的私有的属性和方法（因为只是把父类构造当作普通函数执行了一次，跟父类的原型上的方法和属性没有任何关系）

2.父类的私有的属性和方法都会变成子类私有的属性和方法

// 父类
function A(x){
this.x=x
this.seyHello=function(){
console.log("hello world")
    }
}
 
A.prototype,getX=function(){
console.log(this.x)
}
 
let a=new A(100)
 
//子类
function B(y,x){
this.y=y
A.call(this,x)
}
 
B.prototype.getY=function(){
console.log(this.y)
}
 
let b=new B(200,100)
console.log(b)

3.组合继承

结合原型链继承和借用构造函数继承组合起来的实现继承的一种方式

（call继承）中

1.子类实例可以使用父类私有的属性和方法

2.父类私有的属性和方法都会变成子类实例私有的属性和方法

（原型链继承）

3.子类实例可以通过原型链访问和使用父类公有的属性和方法

4.子类的原型链上会存在一份多余的父类的私有属性和方法

// 父类
function A(x){
this.x=x
this.seyHello=function(){
console.log("hello world")
    }
}
 
A.prototype.getX=function(){
console.log(this.x)
}
 
// 子类
function B(y,x){
this.y=y
A.call(this,x)
}
 
B.prototype=new A()
B.prototype.constructor=B
B.prototype.getY=function(){
console.log(this.y)
}
 
let b =new B(200,100)
console.log(b)

4.寄生组合继承

在原型链继承和借用构造函数继承基础上，同时自己创建一个对象，并且让这个对象的原型指向父类构造函数的prototype.实现寄生组合继承

1.最完美的js继承解决方案

2.父类私有的属性和方法，成为子类实例私有的属性和方法

3.父类公有的属性和方法，成为子类实例公有的属性和方法

// 父类
function A(x){
this.x=x
this.seyHello=function(){
console.log("hello world")
    }
}
 
A.prototype.getX=function(){
console.log(this.x)
}
 
//子类
function B(y,x){
this.y=y
A.call(this,x)
}
 
B.prototype=Object.create(A.prototype)
B.prototype.constructor=B
B.prototype.getY=function(){
console.log(this.y)
}
 
let b =new B(200,100)
console.log(b)
 
Object.create=function (arg){
function NewObj(){}
NewObj.prototype=arg
return new NewObj()
}