理解JavaScript繼承（二）

5.寄生式繼承

function object(o) {function F() {} F.prototype = o; return new F(); }function createAnother(original){var clone = object(original);//通過調用函數創建一個新對象clone.sayHi=function(){//以某種方式增強這個對象alert("hi");};return clone;//返回這個對象 }var person={name:"Nicholas",friends:["Shelby","Court,"Van"] };var anotherPerson=createAnother(person); anotherPerson.sayHi();//"hi"

這個實例基于person返回了一個新對象anotherPerson。新對象不僅具有person的所有屬性和方法，而且還有自己的sayHi()方法。

缺點：和構造函數一樣，不能做到函數復用而降低效率。

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.sayAge = function(){alert(this.age); };

在第一次調用SuperType()構造函數時，SubType.prototype會得到兩個屬性：name和colors；他們都是SuperType的實例屬性，只不過現在位于SubType的原型中。當調用SubType構造函數時，又會調用一次SuperType構造函數，這一次又在新對象上創建了實例屬性name和colors，于是，這兩個屬性就屏蔽了原型中的兩個同名屬性。

上面一共有兩組name和colors屬性：一組在實例上，一組在SubType原型中。這就是調用兩次SuperType的結果。

為了解決這種情況，于是就出現了下面的——寄生組合式繼承方法。

所謂寄生組合式繼承，即通過借用構造函數來繼承屬性，通過原型鏈的混成形式來繼承方法。其背后的基本思路是：不必為了指定子類型的原型而調用超類型的構造函數，我們所需要的無非就是超類型原型的一個副本而已。（之所以是超類型的副本，而不是直接是超類型，如果直接是超類型的話。當子類型為原型添加方法時，也會影響到超類型的）

寄生組合式繼承

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(){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("Nicholas", 29); instance1.colors.push("black"); alert(instance1.colors); //"red,blue,green,black" instance1.sayName(); //"Nicholas"; instance1.sayAge(); //29var instance2 = new SubType("Greg", 27); alert(instance2.colors); //"red,blue,green" instance2.sayName(); //"Greg"; instance2.sayAge(); //27

上面實例只在SuperType.call(this, name);這調用了一次構造函數，并且因此避免了在prototype上面創建不必要的，多余的屬性。

注：YUI的extend()就是采用這種寄生組合式繼承

轉載于:https://www.cnblogs.com/YeChing/p/6351240.html

總結

以上是生活随笔為你收集整理的理解JavaScript继承（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。