js继承方法详解

最新推荐文章于 2024-06-13 14:23:28 发布

我爱雯雯o

最新推荐文章于 2024-06-13 14:23:28 发布

阅读量70

点赞数

文章标签： javascript 原型模式前端

本文链接：https://blog.csdn.net/weixin_43206959/article/details/124632644

版权

一、原型链继承

先来看一下实现的方法：

function Supertype(){
    this.name = 'pjh'
    this.colors = ['red','green','blue']
}
Supertype.prototype.getname = function(){
    return this.name
}
function Subtype(){
}
Subtype.prototype = new Supertype()
let sub1 = new Subtype()
sub1.name = 'pwj'   //在实例上加一个属性，不会修改原型上的name
sub1.colors.push('pink')   //直接修改了原型上的属性
let sub2 = new Subtype()
console.log(sub1.getname())  //pwj
console.log(sub2.getname())  //pjh
console.log(sub1.colors)     //['red', 'green', 'blue', 'pink']
console.log(sub2.colors)     //['red', 'green', 'blue', 'pink']
let super1 = new Supertype()
console.log(super1.colors)   //['red', 'green', 'blue']

实现继承通过Subtype.prototype = new Supertype()，这一句执行后，相当于给Subtype一个新原型，这个原型就是Supertype的实例。于是新原型不仅拥有了Supertype实例的所有属性和方法，还有一个指针指向Supertype的原型。具体原型链指向如图所示：
在这里插入图片描述
这种继承方法存在两个问题：
1、从父类继承过来的属性都在子类的原型上，原型上的属性会被子类的所有实例共享。如上所示如果是引用数据类型的属性，子类的一个实例修改了原型上的属性，那么其他实例的该属性也会被修改。
2、在创建子类的实例时，不能向父类的构造函数传参。

二、构造函数继承

function Supertype(name){
    this.name = name
    this.colors = ['red','green','blue']
}
Supertype.prototype.getname = function(){
    return this.name
}
function Subtype(){
    Supertype.call(this,'pjh')
}

let sub1 = new Subtype()
sub1.colors.push('pink')
let sub2 = new Subtype()
console.log(sub1.colors)     //['red', 'green', 'blue', 'pink']
console.log(sub2.colors)     //['red', 'green', 'blue']

实现的方法就是在子类的构造函数中调用父类，他可以解决上述原型链继承的两个问题，但时他本身也存在问题，即在父类原型中定义的方法，在子类中是不可见的。

三、组合继承

function Supertype(name){
    this.name = name
    this.colors = ['red','green','blue']
}
Supertype.prototype.getname = function(){
    return this.name
}
function Subtype(name,age){
    Supertype.call(this,name)
    this.age = age
}
Subtype.prototype = new Supertype()
Subtype.prototype.constructor = Subtype
let sub1 = new Subtype('pjh',20)
sub1.colors.push('pink')
let sub2 = new Subtype('pwj',21)
console.log(sub1.colors)     //['red', 'green', 'blue', 'pink']
console.log(sub2.colors)     //['red', 'green', 'blue']
console.log(sub1.getname())  //pjh
console.log(sub2.getname())  //pwj

组合继承就是将原型链继承和构造函数继承的方法结合，使用原型链实现对原型属性和方法的继承，使用构造函数实现对实例属性的继承。

四、原型继承

let person = {
    name:'pjh',
    colors:['red','green','blue'],
    getname: function(){
        return this.name
    }
}
function Object(o){
    function F(){}
    F.prototype = o
    return new F()
}
let person1 = Object(person)   //相当于Object.create(person)
let person2 = Object(person)
person1.name = 'pwj'
person1.colors.push('pink')
console.log(person1.name)  //pwj
console.log(person2.name)  //pjh
console.log(person.colors) //['red', 'green', 'blue', 'pink']
console.log(person1.colors)//['red', 'green', 'blue', 'pink']
console.log(person2.colors)//['red', 'green', 'blue', 'pink']
console.log(person1.getname())  //pwj

这种方法相当于对对象进行了浅拷贝，与Object.create()方法一样。这种方法包含引用类型的属性始终会共享相应的值。

五、寄生式继承

let person = {
    name:'pjh',
    colors:['red','green','blue'],
    getname: function(){
        return this.name
    }
}
function Object(o){
    function F(){}
    F.prototype = o
    return new F()
}
function createAnother(o){
    let clone = Object(o)
    clone.sayname = function(){
        console.log(this.name)
    }
    return clone
}
let person1 = createAnother(person)   
person1.sayname()   //pjh

这种方法在对象进行浅拷贝后可以增加自己的方法。

六、寄生组合式继承

function Object(o){
    function F(){}
    F.prototype = o
    return new F()
}
function inheritPrototype(Subtype,Supertype){
    var prototype = Object(Supertype.prototype)
    prototype.constructor = Subtype
    Subtype.prototype = prototype
}
function Supertype(name){
    this.name = name
    this.colors = ['red','green','blue']
}
Supertype.prototype.getname = function(){
    return this.name
}
function Subtype(name,age){
    Supertype.call(this,name)
    this.age = age
}

inheritPrototype(Subtype,Supertype)
Subtype.protptype.getage = function(){
    return this.age
}