JavaScript实现继承
栏目: JavaScript · 发布时间: 6年前
内容简介:本文不准备深入细节,主要是对《JavaScript高级程序设计中》介绍的JS如何实现继承做一个总结,毕竟好记性不如烂笔头。文末会附带一张神图,搞清楚这张图,原型链也就没有什么问题了。基本思想:
本文不准备深入细节,主要是对《JavaScript高级程序设计中》介绍的JS如何实现继承做一个总结,毕竟好记性不如烂笔头。文末会附带一张神图,搞清楚这张图,原型链也就没有什么问题了。
ES5实现继承的六种方式
1. 原型链
基本思想:
利用原型链让一个引用类型继承另一个引用类型的属性和方法。
function SuperType () { this.property = true; } SuperType.prototype.getSuperValue = function () { return this.property; }; // 子类 SubType function SubType () { this.subProperty = false; } SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function () { return this.subProperty; }; // 实例 var instance = new SubType(); console.log(instance); console.log(instance.getSuperValue()); // true console.log(instance instanceof SubType); // true console.log(instance instanceof SuperType); // true console.log(instance instanceof Object); // true console.log(SubType.prototype.isPrototypeOf(instance)); // true console.log(SuperType.prototype.isPrototypeOf(instance)); // true console.log(Object.prototype.isPrototypeOf(instance)); // true
缺点:
1. 来自原型对象的引用属性是所有实例共享的。
2. 创建子类实例时,无法向父类构造函数传参。
举例如下:
// 1. 来自原型对象的引用属性是所有实例共享的 // 父类 function SuperType () { this.colors = ['red', 'blue', 'green']; } // 子类 function SubType () { } SubType.prototype = new SuperType(); // 实例 var instance1 = new SubType(); instance1.colors.push('black'); console.log(instance1.colors); // ['red', 'blue', 'green', 'black'] var instance2 = new SubType(); console.log(instance2.colors); // ['red', 'blue', 'green', 'black'] // 因为修改colors是修改的SubType.prototype.colors,所以所有的实例都会更新
// 2. 创建子类实例时,无法向父类构造函数传参 // 调用父类是在 SubType.prototype = new SuperType() // 新建子类实例调用 new SubType() // 所以无法再new SubType() 的时候给父类 SuperType() 传参
2. 借用构造函数
基本思想:
在子类构造函数的内部通过call()以及apply()调用父类构造函数。
// 父类 SuperType function SuperType (name) { this.name = name; this.colors = ['red', 'blue', 'green']; this.getName = function () { return this.name; } } // 子类 function SubType (name) { // 继承了SuperType,同时还传递了参数 SuperType.call(this, name); // 实例属性 this.age = 20; } // 实例 var instance1 = new SubType('Tom'); instance1.colors.push('black'); console.log(instance1.name); // "Tom" console.log(instance1.getName()); // "Tom" console.log(instance1.age); // 20 console.log(instance1.colors); // ['red', 'blue', 'green', 'black'] var instance2 = new SubType('Peter'); console.log(instance2.name); // "Peter" console.log(instance2.getName()); // "Peter" console.log(instance2.age); // 20 console.log(instance2.colors); // ['red', 'blue', 'green']
可以看到,借用构造函数实现继承,解决了原型链继承的两个问题,既可以在新建子类实例的时候给父类构造函数传递参数,也不会造成子类实例共享父类引用变量。
但是你注意到了吗,这里我们把父类方法也写在了SuperType()构造函数里面,可以像前面一样写在SuperType.prototype上吗?
答案是不可以,必须写在SuperType()构造函数里面。因为这里是通过调用SuperType.call(this)来实现继承的,并没有通过new生成一个父类实例,所以如果写在prototype上,子类是无法拿到的。
缺点:
1. 如果方法都在构造函数中定义,那么就无法复用函数。每次构建实例时都会在实例中保留方法函数,造成了内存的浪费,同时也无法实现同步更新,因为每个实例都是单独的方法函数。如果方法写在prototype上,就只会有一份,更新时候会做到同步更新。
3. 组合继承
基本思想:
将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。
使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。
// 父类 function SuperType (name) { this.name = name; this.colors = ['red', 'blue', 'green']; } SuperType.prototype.sayName = function () { console.log(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 () { console.log(this.age); }; // 实例 var instance1 = new SubType('Tom', 20); instance1.colors.push('black'); console.log(instance1.colors); // ['red', 'blue', 'green', 'black'] instance1.sayName(); // "Tom" instance1.sayAge(); // 20 var instance2 = new SubType('Peter', 30); console.log(instance2.colors); // ['red', 'blue', 'green'] instance2.sayName(); // "Peter" instance2.sayAge(); // 30
缺点:
1. 调用了两次父类构造函数,一次通过SuperType.call(this)调用,一次通过new SuperType()调用。
4. 原型式继承
基本思想:
不使用严格意义上的构造函数,借助原型可以基于已有的对象创建新的对象,同时还不必因此创建自定义类型。
// 在object函数内部,先创建了一个临时的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。 // 从本质上讲,object()对传入其中的对象执行了一次浅复制。 function object (o) { function F() {} F.prototype = o; return new F(); } var person = { name: 'Tom', 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'); console.log(anotherPerson.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie'] console.log(yetAnotherPerson.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie'] console.log(person.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie']
ECMAScript5中新增了一个方法Object.create(prototype, descripter)接收两个参数:
- prototype(必选),用作新对象的原型对象
- descripter(可选),为新对象定义额外属性的对象
在传入一个参数的情况下,Object.create()与前面写的object()方法的行为相同。
var person = { name: 'Tom', friends: ['Shelby', 'Court', 'Van'] }; var anotherPerson = Object.create(person); anotherPerson.name = 'Greg'; anotherPerson.friends.push('Rob'); var yetAnotherPerson = Object.create(person, { name: { value: 'Linda', enumerable: true } }); yetAnotherPerson.friends.push('Barbie'); console.log(anotherPerson.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie'] console.log(yetAnotherPerson.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie'] console.log(person.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie']
缺点:
1. 和原型链继承一样,所有子类实例共享父类的引用类型。
5. 寄生式继承
基本原理:
寄生式继承是与原型式继承紧密相关的一种思路,创建一个仅用于封装继承过程的函数,该函数内部以某种形式来做增强对象,最后返回对象。
function object (o) { function F() {} F.prototype = o; return new F(); } function createAnother (o) { var clone = object(o); clone.sayHi = function () { console.log('Hi'); } return clone; } var person = { name: 'Tom', friends: ['Shelby', 'Court', 'Van'] }; var anotherPerson = createAnother(person); anotherPerson.sayHi(); // "Hi" anotherPerson.friends.push('Rob'); console.log(anotherPerson.friends); // ['Shelby', 'Court', 'Van', 'Rob'] var yerAnotherPerson = createAnother(person); console.log(yerAnotherPerson.friends); // ['Shelby', 'Court', 'Van', 'Rob']
缺点:
1. 和原型链式继承一样,所有子类实例共享父类引用类型。
2. 和借用构造函数继承一样,每次创建对象都会创建一次方法。
6. 寄生组合式继承
基本思想:
将寄生式继承和组合继承相结合,解决了组合式继承中会调用两次父类构造函数的缺点。
组合继承是JavaScript最常用的继承模式,它最大的问题就是无论在什么情况下,都会调用两次父类构造函数:一次是在创建子类原型的时候,另一次是在子类构造函数内部。
// 组合继承 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); //第二次调用 SuperType() this.age = age; } SubType.prototype = new SuperType(); //第一次调用 SuperType() SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function () { alert(this.age); };
组合继承在第一次调用SuperType构造函数时,SubType.prototype会得到两个属性:name和colors;它们都是 SuperType 的实例属性,只不过现在位于 SubType的原型中。当调用SubType构造函数时,又会调用一次SuperType构造函数,这一次又在新对象上创建了实例属性name和colors。于是,这两个属性就屏蔽了原型中的两个同名属性。
所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。
其背后的基本思路是:不必为了指定子类型的原型而调用父类的构造函数,我们需要的无非就是父类原型的一个副本而已。本质上,就是使用寄生式继承来继承父类的prototype,然后再将结果指定给子类的prototype。
寄生组合式继承的基本模型如下:
function inheritPrototype(SubType, SuperType) { var prototype = object(SuperType.prototype); // 创建对象 prototype.constructor = SubType; // 增强对象 SubType.prototype = prototype; // 指定对象 }
实现一个完整的寄生组合式继承:
function object(o) { function F() { } F.prototype = o; return new F(); } function inheritPrototype(SubType, SuperType) { 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 () { console.log(this.name); }; // 子类 function SubType(name, age) { // 继承父类实例属性 SuperType.call(this, name); // 子类实例属性 this.age = age; } // 继承父类方法 inheritPrototype(SubType, SuperType); // 子类方法 SubType.prototype.sayAge = function () { console.log(this.age); }; // 实例 var instance1 = new SubType('Tom', 20); instance1.colors.push('black'); instance1.sayAge(); // 20 instance1.sayName(); // "Tom" console.log(instance1.colors); // ["red", "blue", "green", "black"] var instance2 = new SubType('Peter', 30); instance2.sayAge(); // 30 instance2.sayName(); // "Peter" console.log(instance2.colors); // ["red", "blue", "green"]
寄生组合式继承的高效率体现在它只调用了一次SuperType构造函数,并且因此避免了再SubType.prototype上面创建不必要的、多余的属性。与此同时,原型链还能保持不变。因此,还能够正常使用instanceof和isPrototypeOf()。
开发人员普遍认为寄生组合式继承是引用类型最理想的继承方式。
ES6实现继承
// 父类 class SuperType { constructor(name) { this.name = name; this.colors = ["red", "blue", "green"]; } sayName() { console.log(this.name); }; } // 子类 class SubType extends SuperType { constructor(name, age) { // 继承父类实例属性和prototype上的方法 super(name); // 子类实例属性 this.age = age; } // 子类方法 sayAge() { console.log(this.age); } } // 实例 var instance1 = new SubType('Tom', 20); instance1.colors.push('black'); instance1.sayAge(); // 20 instance1.sayName(); // "Tom" console.log(instance1.colors); // ["red", "blue", "green", "black"] var instance2 = new SubType('Peter', 30); instance2.sayAge(); // 30 instance2.sayName(); // "Peter" console.log(instance2.colors); // ["red", "blue", "green"]
用ES6的语法来实现继承非常的简单,下面是把这段代码放到Babel里转码的结果图片:
可以看到,底层其实也是用寄生组合式继承来实现的。
总结
ES5实现继承有6种方式:
- 原型链继承
- 借用构造函数继承
- 组合继承
- 原型式继承
- 寄生式继承
- 寄生组合式继承
寄生组合式继承是大家公认的最好的实现引用类型继承的方法。
ES6新增class和extends语法,用来定义类和实现继承,底层也是采用了寄生组合式继承。
附图:
以上所述就是小编给大家介绍的《JavaScript实现继承》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- JS实现继承 JavaScript
- 前端基本功(七):javascript中的继承(原型、原型链、继承的实现方式)
- C++多继承多态的实现
- [回炉计划]- javascript七大继承实现
- Golang中匿名组合实现伪继承
- golang 使用组合的方式实现继承
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。