蓝本链承继
function Parent () { this.name = kevin; } Parent.prototype.getName = function () { console.log(this.name); } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); console.log(child1.getName()) // kevin难题:
1.提及类别的特性被大部份示例共享资源,举个范例:
function Parent () { this.names = [kevin, daisy]; } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); child1.names.push(yayu); console.log(child1.names); // [“kevin”, “daisy”, “yayu”] var child2 = new Child(); console.log(child2.names); // [“kevin”, “daisy”, “yayu”]2.在建立 Child 的示例时,无法向Parent传参
2.转作缺省(经典之作承继)
function Parent () { this.names = [kevin, daisy]; } function Child () { Parent.call(this); } var child1 = new Child(); child1.names.push(yayu); console.log(child1.names); // [“kevin”, “daisy”, “yayu”] var child2 = new Child(); console.log(child2.names); // [“kevin”, “daisy”]缺点:
1.避免了提及类别的特性被大部份示例共享资源
2.可以在 Child 中向 Parent 传参
举个范例:
function Parent (name) { this.name = name; } function Child (name) { Parent.call(this, name); } var child1 = new Child(kevin); console.log(child1.name); // kevin var child2 = new Child(daisy); console.log(child2.name); // daisy缺点:
方法都在缺省中定义,每次建立示例都会建立一遍方法。
3.组合承继
蓝本链继承和经典之作承继双剑合璧。
function Parent (name) { this.name = name; this.colors = [red, blue, green]; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } Child.prototype = new Parent(); Child.prototype.constructor = Child; var child1 = new Child(kevin, 18); child1.colors.push(black); console.log(child1.name); // kevin console.log(child1.age); // 18 console.log(child1.colors); // [“red”, “blue”, “green”, “black”] var child2 = new Child(daisy, 20); console.log(child2.name); // daisy console.log(child2.age); // 20 console.log(child2.colors); // [“red”, “blue”, “green”]缺点:融合蓝本链承继和缺省的缺点,是 JavaScript 中最常用的承继模式。
4.蓝本式承继
function createObj(o) { function F(){} F.prototype = o; return new F(); }就是 ES5 Object.create 的模拟实现,将传入的对象作为建立的对象的蓝本。
缺点:
包含提及类别的特性值始终都会共享资源相应的值,这点跟蓝本链承继一样。
var person = { name: kevin, friends: [daisy, kelly] } var person1 = createObj(person); var person2 = createObj(person); person1.name = person1; console.log(person2.name); // kevin person1.firends.push(taylor); console.log(person2.friends); // [“daisy”, “kelly”, “taylor”]注意:修改person1.name的值,person2.name的值并未发生改变,并不是因为person1和person2有独立的 name 值,而是因为person1.name = person1,给person1添加了 name 值,并非修改了蓝本上的 name 值。
5. 寄生式承继
建立一个仅用于封装承继过程的函数,该函数在内部以某种形式来做增强对象,最后返回对象。
function createObj (o) { var clone = Object.create(o); clone.sayName = function () { console.log(hi); } return clone; }缺点:跟转作缺省模式一样,每次建立对象都会建立一遍方法。
6. 寄生组合式承继
为了方便大家阅读,在这里重复一下组合承继的代码:
function Parent (name) { this.name = name; this.colors = [red, blue, green]; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } Child.prototype = new Parent(); var child1 = new Child(kevin, 18); console.log(child1)组合承继最大的缺点是会调用两次父缺省。
一次是设置子类别示例的蓝本的时候:
Child.prototype = new Parent();一次在建立子类别示例的时候:
var child1 = new Child(kevin, 18);回想下 new 的模拟实现,其实在这句中,我们会执行:
Parent.call(this, name);在这里,我们又会调用了一次 Parent 缺省。
所以,在这个范例中,如果我们打印 child1 对象,我们会发现 Child.prototype 和 child1 都有一个特性为colors,特性值为[red, blue, green]。
那么我们该如何精益求精,避免这一次重复调用呢?
如果我们不使用 Child.prototype = new Parent() ,而是间接的让 Child.prototype 访问到 Parent.prototype 呢?
看看如何实现:
function Parent (name) { this.name = name; this.colors = [red, blue, green]; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } // 关键的三步 var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); var child1 = new Child(kevin, 18); console.log(child1);最后我们封装一下这个承继方法:
function object(o) { function F() {} F.prototype = o; return new F(); } function prototype(child, parent) { var prototype = object(parent.prototype); prototype.constructor = child; child.prototype = prototype; } // 当我们使用的时候: prototype(Child, Parent);