前端实现继承的几种方式( 二 )

缺点: 组合继承其实也存在效率问题 。最主要的效率问题就是 父类构造函数始终会被调用两次 :一次在是创建子类原型时调用,另一次是在子类构造函数中调用
四、原型式继承重点: 用一个函数包装一个对象,然后返回这个函数的调用,这个函数就变成了个可以随意增添属性的实例或对象 。object.create()就是这个原理 。
 //核心代码function object(o) {function F() {}F.prototype = oreturn new F()}let person = {name: "Nicholas",friends: ["Shelby", "Court", "Van"],}let anotherPerson = object(person)anotherPerson.name = "Greg"anotherPerson.friends.push("Rob")let yetAnotherPerson = object(person)yetAnotherPerson.name = "Linda"yetAnotherPerson.friends.push("Barbie")console.log(person.friends) // "Shelby,Court,Van,Rob,Barbie"复制代码特点: 类似于复制一个对象,用函数来包装 。
缺点:

  1. 所有实例都会继承原型上的属性 。
  2. 无法实现复用 。(新实例属性都是后面添加的)
原型式继承非常适合不需要单独创建构造函数,但仍然需要在对象间共享信息的场合 。但要记住,属性中包含的引用值始终会在相关对象间共享,跟使用原型模式是一样的
五、寄生式继承重点: 就是给原型式继承外面套了个壳子 。
 function object(o) {function F() {}F.prototype = oreturn new F()}function createAnother(original) {let clone = object(original) // 通过调用函数创建一个新对象clone.sayHi = function () {// 以某种方式增强这个对象console.log("hi")}return clone // 返回这个对象}let person = {name: "Nicholas",friends: ["Shelby", "Court", "Van"],}let anotherPerson = createAnother(person)anotherPerson.sayHi() // "hi"//寄生式继承同样适合主要关注对象,而不在乎类型和构造函数的场景 。object()函数不是寄生式继承所必需的,任何返回新对象的函数都可以在这里使用 。// 注意 通过寄生式继承给对象添加函数会导致函数难以重用,与构造函数模式类似 。优点: 没有创建自定义类型,因为只是套了个壳子返回对象(这个),这个函数顺理成章就成了创建的新对象 。
缺点: 没用到原型,无法复用 。
六、寄生组合式继承(常用)重点: 通过借用构造函数继承属性 ,但使用混合式原型链继承方法 。基本思路是不通过调用父类构造函数给子类原型赋值,而是取得父类原型的一个副本 。说到底就是使用寄生式继承来继承父类原型,然后将返回的新对象赋值给子类原型 。
寄生: 在函数内返回对象然后调用
组合:
  1. 函数的原型等于另一个实例 。
  2. 在函数中用 apply 或者 call 引入另一个构造函数,可传参
 function object(o) {function F() {}F.prototype = oreturn new F()}/*function inheritPrototype(subType, superType) {let prototype = object(superType.prototype); // 创建对象 prototype.constructor = subType; // 增强对象subType.prototype = prototype; // 赋值对象}*/function SuperType(name) {this.name = namethis.colors = ["red", "blue", "green"]}SuperType.prototype.sayName = function () {console.log(this.name)}function SubType(name, age) {SuperType.call(this, name)this.age = age}let prototype = object(superType.prototype) // 创建对象subType.prototype = prototype // 赋值对象prototype.constructor = subType // 修复实例//inheritPrototype(SubType, SuperType);SubType.prototype.sayAge = function () {console.log(this.age)}优先: 修复了组合继承的问题缺点: 实现麻烦
文章出自:??前端餐厅ReTech??,如有转载本文请联系前端餐厅ReTech今日头条号 。
github:??https://github.com/zuopf769?




推荐阅读