JavaScript常用七种继承方案
栏目: JavaScript · 发布时间: 6年前
内容简介:构造函数、原型和实例之间的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个原型对象的指针。继承的本质是原型链方案存在的缺点:多个实例对引用类型的操作会被篡改。
构造函数、原型和实例之间的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个原型对象的指针。
继承的本质是 重写原型对象,代之以一个新类型的实例 。
function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function() { return this.property; } function SubType() { this.subproperty = false; } // 这里是关键,创建SuperType的实例,并将该实例赋值给SubType.prototype SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function() { return this.subproperty; } var instance = new SubType(); console.log(instance.getSuperValue()); // true 复制代码
原型链方案存在的缺点:多个实例对引用类型的操作会被篡改。
function SuperType(){ this.colors = ["red", "blue", "green"]; } function SubType(){} SubType.prototype = new SuperType(); 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,black" 复制代码
2、借用构造函数继承
使用父类的构造函数来增强子类 实例 ,等同于复制父类的实例给子类(不使用原型)
function SuperType(){ this.color=["red","green","blue"]; } function SubType(){ //继承自SuperType SuperType.call(this); } var instance1 = new SubType(); instance1.color.push("black"); alert(instance1.color);//"red,green,blue,black" var instance2 = new SubType(); alert(instance2.color);//"red,green,blue" 复制代码
核心代码是 SuperType.call(this)
,创建子类实例时调用 SuperType
构造函数,于是 SubType
的每个实例都会将SuperType中的属性复制一份。
缺点:
- 只能继承父类的 实例 属性和方法,不能继承原型属性/方法
- 无法实现复用,每个子类都有父类实例函数的副本,影响性能
3、组合继承
组合上述两种方法就是组合继承。用原型链实现对 原型 属性和方法的继承,用借用构造函数技术来实现 实例 属性的继承。
function SuperType(name){ this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function(){ alert(this.name); }; function SubType(name, age){ // 继承属性 // 第二次调用SuperType() SuperType.call(this, name); this.age = age; } // 继承方法 // 构建原型链 // 第一次调用SuperType() SubType.prototype = new SuperType(); // 重写SubType.prototype的constructor属性,指向自己的构造函数SubType 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 复制代码
缺点:
- 第一次调用
SuperType()
:给SubType.prototype
写入两个属性name,color。 - 第二次调用
SuperType()
:给instance1
写入两个属性name,color。
实例对象 instance1
上的两个属性就屏蔽了其原型对象SubType.prototype的两个同名属性。所以,组合模式的缺点就是在使用子类创建实例对象时,其原型中会存在两份相同的属性/方法。
4、原型式继承
利用一个空对象作为中介,将某个对象直接赋值给空对象构造函数的原型。
function object(obj){ function F(){} F.prototype = obj; return new F(); } 复制代码
object()对传入其中的对象执行了一次 浅复制
,将构造函数F的原型直接指向传入的对象。
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" 复制代码
缺点:
- 原型链继承多个实例的引用类型属性指向相同,存在篡改的可能。
- 无法传递参数
另外,ES5中存在 Object.create()
的方法,能够代替上面的object方法。
5、寄生式继承
核心:在原型式继承的基础上,增强对象,返回构造函数
function createAnother(original){ var clone = object(original); // 通过调用 object() 函数创建一个新对象 clone.sayHi = function(){ // 以某种方式来增强对象 alert("hi"); }; return clone; // 返回这个对象 } 复制代码
函数的主要作用是为构造函数新增属性和方法,以 增强函数
var person = { name: "Nicholas", friends: ["Shelby", "Court", "Van"] }; var anotherPerson = createAnother(person); anotherPerson.sayHi(); //"hi" 复制代码
缺点(同原型式继承):
- 原型链继承多个实例的引用类型属性指向相同,存在篡改的可能。
- 无法传递参数
6、寄生组合式继承
结合借用构造函数传递参数和寄生模式实现继承
function inheritPrototype(subType, superType){ var prototype = Object.create(superType.prototype); // 创建对象,创建父类原型的一个副本 prototype.constructor = subType; // 增强对象,弥补因重写原型而失去的默认的constructor 属性 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(SubType, SuperType); // 新增子类原型属性 SubType.prototype.sayAge = function(){ alert(this.age); } var instance1 = new SubType("xyc", 23); var instance2 = new SubType("lxy", 23); instance1.colors.push("2"); // ["red", "blue", "green", "2"] instance1.colors.push("3"); // ["red", "blue", "green", "3"] 复制代码
这个例子的高效率体现在它只调用了一次 SuperType
构造函数,并且因此避免了在 SubType.prototype
上创建不必要的、多余的属性。于此同时,原型链还能保持不变;因此,还能够正常使用 instanceof
和 isPrototypeOf()
这是最成熟的方法,也是现在库实现的方法
7、混入方式继承多个对象
function MyClass() { SuperClass.call(this); OtherSuperClass.call(this); } // 继承一个类 MyClass.prototype = Object.create(SuperClass.prototype); // 混合其它 Object.assign(MyClass.prototype, OtherSuperClass.prototype); // 重新指定constructor MyClass.prototype.constructor = MyClass; MyClass.prototype.myMethod = function() { // do something }; 复制代码
Object.assign
会把 OtherSuperClass
原型上的函数拷贝到 MyClass
原型上,使 MyClass 的所有实例都可用 OtherSuperClass 的方法。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- js常用的继承方式
- JavaScript常用6大继承方式解析
- 028.Python面向对象继承(单继承,多继承,super,菱形继承)
- PHP类继承、接口继承关系概述
- 面向对象:理解 Python 类的单继承与多继承
- java入门第二季--继承--java中的继承初始化顺序
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。