JS实现继承的6种方式
1. 原型链继承
将构造函数的原型设置为另一个构造函数的实例对象,这样就可以继承另一个原型对象的所有属性和方法,可以继续往上,最终形成原型链。
第一个问题是,当实现继承后,另一个原型的实例属性,变成了现在这个原型的原型属性,然后该原型的引用类型属性会被所有的实例共享,这样继承原型引用类型属性的实例之间不再具有自己的独特性了。
第二个问题是,在创建子类型的实例时,没有办法在不影响所有对象实例的情况下给超类型的构造函数中传递参数。
2. 借用构造函数继承
为了解决原型中包含引用类型值的问题,开始使用借用构造函数,也叫伪造对象或经典继承
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function SuperType() { this .colors = [ "red" , "blue" , "green" ]; } function SubType() { //继承SuperType SuperType.call( this ); } var instance1 = new SubType(); instance1.colors.push( "black" ); alert(instance1.colors); //"red,blue,green,black" var instance2 = new SubType(); alert(instance2.colors); //"red,blue,green" |
-
将SuperType函数在SubType构造函数中调用,在每个实例中执行,这样每个实例中都会有一份SuperType中的属性方法的副本,也就实现了继承SuperType。
-
这种模式的优势就是可以在子类型构造函数中向超类型构造函数传递参数。
存在的问题就是,所有的类型都只能使用构造函数模式(因为超类型的原型中定义的方法对于子类型不可见),因此方法都在构造函数中定义,函数复用就无从谈起了。
3. 组合继承
也叫伪经典继承,将原型链和借用构造函数的技术组合到一块。使用原型链实现对原型属性和方法的继承,而通过构造函数来实现对实例属性的继承。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | function SuperType(name) { this .name = name; this .colors = [ "red" , "blue" , "green" ]; } SuperType.prototype.sayName = function() { alert( this .name); } function SubType(name, age) { // 继承属性 SuperType.call( this , name); this .age = age; } // 继承方法 SubType.prototype = new SuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function() { alert( this .age); }; var instance1 = new SubType( "Nicholas" , 29); instance1.colors.push( "black" ); alert(instance1.colors); //"red,blue,green,black" instance1.sayName(); //"Nicholas"; instance1.sayAge(); //29 var instance2 = new SubType( "Greg" , 27); alert(instance2.colors); //"red,blue,green" instance2.sayName(); //"Greg"; instance2.sayAge(); //27 |
将SubType的原型指定为SuperType的一个实例,大致步骤和原型链继承类似,只是多了在SubType中借调SuperType的过程。
实例属性定义在构造函数中,而方法则定义在构造函数的新原型中,同时将新原型的constructor指向构造函数。
可以通过instanceof和isPrototypeOf()来识别基于组合继承创建的对象。
避免了原型链和借用构造函数的缺陷,融合了它们的优点,成为JS中最常用的继承模式。
实际上是借用了构造函数,以覆盖的方式,解决了在原型链继承中原型的引用类型属性共享在所有实例中的问题。
因为在子类型中借调构造函数(SuperType.call(this))时,会在自己的所有实例中执行一遍SuperType中的代码,由于每个实例this都是不同的,因此SuperType中定义的属性会在每个实例中有一份副本,也就避免了原型链继承中,原型属性共享的问题(覆盖了原型属性)。
4. 原型式继承
不自定义类型的情况下,临时创建一个构造函数,借助已有的对象作为临时构造函数的原型,然后在此基础实例化对象,并返回。
1 2 3 4 5 | function object (o){ function F(){} F.prototype = o; return new F(); } |
本质上是object()对传入其中的对象执行了一次浅复制
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var person = { name: "Nicholas" , friends: [ "Shelby" , "Court" , "Van" ] }; var anotherPerson = object (person); anotherPerson.name = "Greg" ; anotherPerson.friends.push( "Rob" ); var yetAnotherPerson = object (person); yetAnotherPerson.name = "Linda" ; yetAnotherPerson.friends.push( "Barbie" ); alert(person.friends); //"Shelby,Court,Van,Rob,Barbie" |
-
原型的引用类型属性会在各实例之间共享。
-
当只想单纯地让一个对象与另一个对象保持类似的情况下,原型式继承是完全可以胜任的。
5. 寄生式继承
其实就是在原型式继承得到对象的基础上,在内部再以某种方式来增强对象,然后返回。
1 2 3 4 5 6 7 | function createAnother(original) { var clone = object (original); clone.sayHi = function() { alert( "hi" ); }; return clone; } |
-
思路与寄生构造函数和工厂模式类似。
-
新的对象中不仅具有original的所有属性和方法,而且还有自己的sayHi()方法。
-
寄生式继承在主要考虑对象而不是自定义类型和构造函数的情况下非常有用。
-
由于寄生式继承为对象添加函数不能做到函数复用,因此效率降低。
6. 寄生组合式继承
组合继承是JS中最常用的继承模式,但其实它也有不足,组合继承无论什么情况下都会调用两次超类型的构造函数,并且创建的每个实例中都要屏蔽超类型对象的所有实例属性。
寄生组合式继承就解决了上述问题,被认为是最理想的继承范式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | function object (o) { function F(){} F.prototype = o; return new F(); } function inheritPrototype(superType, subType) { var prototype = object (superType.prototype); prototype.constructor = subType; subType.prototype = prototype; } function SuperType(name) { this .name = name; this .colors = [ "red" , "blue" , "green" ]; } SuperType.prototype.sayName = function() { alert( this .name); }; function SubType(name, age) { SuperType.call( this , name); this .age = age; } inheritPrototype(SuperType, SubType); // 这一句,替代了组合继承中的SubType.prototype = new SuperType() SubType.prototype.sayAge = function() { alert( this .age); }; |
既然在组合模式中我们通过借调构造函数来为每个实例定义实例属性,从而覆盖原型属性,影响了效率,那么是否可以把原型改变一下呢,不让它作为SuperType
的实例,这样就不会有一些无用的原型属性了。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 葡萄城 AI 搜索升级:DeepSeek 加持,客户体验更智能
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏