继承

作者: cutecat | 来源:发表于2019-04-06 23:28 被阅读0次
    1. 原型链
    function Sub(name,color) {
        this.color = [1,2,4]
        this.name = name
    }
    Sub.prototype.getSubName = function() {
        console.log('sub', this.name)
    }
    function Super(name,age){
        this.age = age
    }
    Super.prototype = new Sub()
    const eg = new Super('eg',10)
    eg instanceof Super //true eg.__proto__ === Super.prototype
    eg instanceof Sub // true eg.__proto__.__proto__ === Sub.prototype
    

    将一个构造函数的实例作为子构造函数的原型对象,这样,子构造函数的原型对象中会继承到父构造函数实例上的属性方法及父构造函数原型对象上的方法属性
    弊端:实例属性方法都添加在原型上

    1. 借用构造函数
    function Sub(name,color) {
        this.color = [1,2,4]
        this.name = name
    }
    function Super(name,age){
        this.age = age
        Sub.call(this, name)
    }
    

    调用call,apply方法修改this指向并调用父构造函数
    弊端:只继承了构造函数中定义的方法

    1. 组合式继承
      1+2
    2. 原型式继承
      基于一个已有的对象,而不是还没有构造的对象,不用在自定义构造函数
      function object(o) {
      function F(){}
      F.prototype = o
      return new F()
      }
      与原型链一样,上面是一个自定义构造函数的实例作为原型,这个传入的o其实也是Object构造函数的原型
      4.寄生式继承
      xxx,在原型式继承时,在实力上添加方法,再返回
    function object(o) {
        function F(){}
        F.prototype = o
        var clone = new F()
        clone.getName=function(){}
        return clone
    } 
    

    5.寄生组合式继承

    function Sub(name,color) {
    this.color = [1,2,4]
    this.name = name
    }
    Sub.prototype.getSubName = function() {
    console.log('sub', this.name)
    }
    function Super(name,age){
    this.age = age
    Sub.call(this, name)
    }
    function F(){}
    F.prototype = Sub.prototype
    const f = new F()
    f._proto__ === F.prototype === Sub.prototype
    Super.prototype = f
    const eg = new Super('eg', 10)
    eg instanceof Super //true eg.__proto__ === Super.prototype
    eg instanceof Sub // true eg.__proto__.__proto__ === Sub.prototype
    

    子构造函数上只继承父构造函数原型上的属性方法,所以构造一个原型对象跟父构造函数原型同样,但是构造函数内部不创建属性方法的空构造函数,再将实例作为子构造函数原型

    相关文章

      网友评论

          本文标题:继承

          本文链接:https://www.haomeiwen.com/subject/qrwdiqtx.html