js继承

118 阅读2分钟

原型链继承:

  1. 实例对象的构造函数的原型指向另一个构造函数的实列
  2. 缺点:引用值共享
  3. 实例对象的构造函数,原型上的方法定义不能早于Sub.prototype = new Super() 会被覆盖
    // Super构造函数
    function Super(){ 
        this.a = 1
    }
    // Super构造函数原型
    Super.prototype.say = {
        b = 2
    }
    // 实例对象的Sub构造函数
    function Sub(){}
    // Sub的构造函数原型指向Super构造函数
    Sub.prototype = new Super() 
    // 实例对象
    const sub1 = new Sub() 

构造函数继承

  1. 实列化对象的构造函数内部,执行并改变另一个构造函数的this指向
  2. 解决引用值共享问题
  3. 缺点:没有办法拿到原型上的方法
    // Super构造函数
    function Super(name){ 
        this.name = name
    }
    // Super构造函数原型
    Super.prototype.say = function{
        console.log(2)
    }
    // 实例对象的Sub构造函数
    function Sub(name, age){
        // 更改Super函数的this指向
        Super.call(this, age)
        this.name = name
    }
    // 实例对象
    const sub1 = new Sub('shangsan', 18) 

组合继承(伪经典继承)

  1. 原型链继承,构造函数继承结合
  2. 缺点:被继承的构造函数执行了两次
  3. 实例对象的构造函数,原型上的方法定义不能早于Sub.prototype = new Super() 会被覆盖
    // Super构造函数
    function Super(age){ 
        this.age = age
    }
    // Super构造函数原型
    Super.prototype.say = function{
        console.log(2)
    }
    // 实例对象的Sub构造函数
    function Sub(name, age){
        // 更改Super函数的this指向
        Super.call(this, age) 
    }
    // Sub的构造函数原型指向Super构造函数
    Sub.prototype = new Super() 
    // 实例对象
    const sub1 = new Sub('zhangsan',  18) 

寄生继承(经典继承)

  1. 解决组合继承的缺点
  2. 通过Object.create(Spuer.prototype),实现原型上的继承
  3. 缺点Object.create,是ES5方法,不兼容
  4. 实例对象的构造函数,原型上的方法定义不能早于Sub.prototype = new Super() 会被覆盖
    // Super构造函数
    function Super(){ 
        this.a = 1
    }
    // Super构造函数原型
    Super.prototype.say = function{
        console.log(2)
    }
    // 实例对象的Sub构造函数
    function Sub(){
        // 更改Super函数的this指向
        Super.call(this) 
    }
    if (!Object.create){
        Object.create = function(proto) {
            function f() {}
            f.prototype = proto
            return new F()
        }
    }
    // Sub的构造函数原型指向Super构造函数
    Sub.prototype = Object.create(Spuer.prototype) 
    // 实例对象
    const sub1 = new Sub() 

圣杯模式

1.通过buffer中间件,继承

    // Super构造函数
    function Super(){ 
        this.a = 1
    }
    // Super构造函数原型
    Super.prototype.say = function{
        console.log(2)
    }
    // 实例对象的Sub构造函数
    function Sub(){
        this.aa = 2 
    }
    function buffer(){}
    var buffer = new Buffer()
    buff.prototype = Super.prototype
    
    Sbu.prototype = buff
    sbu.prototype.name = 'zhangsan'
    // 实例对象
    const sub1 = new Sub() 

ES6:class继承

    class Super {}
    class Sub extends Super{}