javascript继承方式总结

怼烎@ 2022-10-19 14:58 186阅读 0赞

## javascript继承方式总结 ##

1.  原型继承

function supType() { 
      this.colors = ["red", "green", "blue"]
    }
    
    supType.prototype.getColors = function () { 
      return this.colors
    }
    
    function subType() { }
    subType.prototype = new supType()
    const instance1 = new subType()
    instance1.colors.push("grey")
    const instance2 = new subType()
    console.log(instance2.colors) //[ 'red', 'green', 'blue', 'grey' ]
    
    /*** * 问题： * １、原型上的引用类型的属性会被所有实例所共享，一个实例修改了该属性后， * 其它实例获取的属性值是修改后的属性值 * ２、无法给基类传参 * */

1.  构造函数实现继承

/*** * 利用构建函数实现继承 * 问题： * １、方法定义在父类的构造函数中，每次实例化一次时都会创建一遍方法 */
    
    function supType(name) { 
      this.name = name
      this.colors = ["red", "green"]
      this.getName = function () { 
        return this.name
      }
    }
    
    function subType(name) { 
      supType.call(this, name)
    }
    
    subType.prototype = new supType()
    const instance3 = new subType("lpq")
    instance3.colors.push("blue")
    console.log(instance3.getName(), instance3.colors) //lpq [ 'red', 'green', 'blue' ]
    const instance4 = new subType("lpq1")
    console.log(instance3.getName(), instance4.colors) //lpq [ 'red', 'green' ]

1.  组合继承  
    组合继承将原型和构造函数的优点集中起来，主要思路是：利用原型链继承原型的属性和方法，利用构造函数继承实例对象的属性。这样就可以把方法定义在原型上实现共享复用，同时每个实例都有自己的属性，互不干扰。

/** * 组合继承： * 利用原型链继承原型上的方法和属性， * 利用构造函数继承实例属性 */
    
    function supType(name) { 
      this.name = name
      this.colors = ["red", 'green']
    }
    
    supType.prototype.getName = function () { 
      return this.name
    }
    
    function subType(name, age) { 
      supType.call(this, name)
      this.age = age
    }
    
    subType.prototype = new supType()
    subType.prototype.constructor = subType
    
    const instance5 = new subType("lpq", 18)
    instance5.colors.push("blue")
    console.log(instance5.getName(), instance5.colors) //lpq [ 'red', 'green', 'blue' ]
    const instance6 = new subType("lpq6", 20)
    console.log(instance6.getName(), instance6.colors) //lpq6 [ 'red', 'green' ]

1.  寄生式组合模式

/** * 寄生式组合模式： * 不在直接调用父类的构造函数获取原型对象赋值给子类原型，二是通过一个空函数Ｆ()获取父类原型对象的副本 */
    
    function object(supPrototypeObj) { 
      function F() { }
      F.prototype = supPrototypeObj //F的构造函数
      return new F()
    }
    
    function inheritPrototype(subType, supType) { 
      let prototype = object(supType.prototype)
      subType.constructor = subType;
      subType.prototype = prototype;
    }
    
    function supType(name) { 
      this.name = name
      this.colors = ['red', 'green']
    }
    
    supType.prototype.getName = function () { 
      return this.name
    }
    
    function subType(name, age) { 
      supType.call(this, name);
      this.age = age;
    }
    
    inheritPrototype(subType, supType)
    
    const instance7 = new subType('lpq7', 16)
    instance7.colors.push("blue");
    console.log(instance7.getName(), instance7.colors) //lpq7 [ 'red', 'green', 'blue' ]
    const instance8 = new subType("lpq8", 18)
    console.log(instance8.getName(), instance8.colors) //lpq8 [ 'red', 'green' ]

1.  class继承（js）

/** * class 实现继承 */
    
    class supType { 
      constructor(name) { 
        this.name = name
        this.colors = ['red', 'green']
      }
    
      getName() { 
        return this.name
      }
    }
    
    class subType extends supType { 
      constructor(name, age) { 
        super(name)
        this.age = age;
      }
    }

1.  class继承(ts)

class sup { 
      name: string
      age: number
      constructor(name: string, age: number) { 
        this.name = name
        this.age = age
      }
    
      run(): string { 
        return `${ this.age}:${ this.name}`
      }
    }
    
    class sub extends sup { 
      agent: string
      constructor(name: string, age: number, agent: string) { 
        super(name, age)
        this.agent = agent
      }
    }
    
    const instance1 = new sub("lpq", 18, "wwww")
    console.log(instance1.run())