# One Day One Tip 之 **構造函數繼承的幾種實現方式** >CreateTime：2016-08-31 14:11:49 JavaScript 實現繼承的幾種方式，有通過原型繼承的， 有通過復制父類值繼承的。 [TOC] --- **有動物類【父類】和貓類【子類】** ~~~ function Animal(){ 　　this.species = "動物"; } function Cat(name,color){ 　　this.name = name; 　　this.color = color; } ~~~ ### 方式一、構造函數綁定 >把子類的this對象傳到Animal的方法里面，然后把父類的屬性綁定到 子類的 this 上 **`Animal.apply(this,arguments)`** ~~~ function Cat(name,color){ 　　Animal.apply(this, arguments); 　　 　　this.name = name; 　　this.color = color; } var cat1 = new Cat("大毛","黃色"); alert(cat1.species); // 動物 ~~~ ### 二、prototype模式【常見】 >如果"貓"的prototype對象，指向一個Animal的實例，那么所有"貓"的實例，就能繼承Animal了。 ~~~ Cat.prototype = new Animal(); Cat.prototype.constructor = Cat; var cat1 = new Cat("大毛","黃色"); alert(cat1.species); // 動物 ~~~ `Cat.prototype = new Animal();` 把 Cat 類的 prototype 指向 父類的實例。 `Cat.prototype.constructor = Cat;` 是因為每個 prototype 都有一個 constructor 屬性，它指向構造函數。 并且每一個類實例也有一個 constructor 屬性， 默認指向 prototype.constructor 。 如果沒有添加上這句代碼的話， `cat1.constructor === Animal //true` **雖然功能上使用沒有出現什么問題，但是如果有使用到 cat.constructor 去做一些判斷還是其他的操作， 會出現隱患。** **cat1 明明是 從 Cat 類實例化出來的， 但是 cat.constructor卻指向 Animal， 這個會造成繼承紊亂。因此需要手動糾正，也就是這句代碼的作用。** ### 三、直接繼承prototype >只繼承 父類的 prototype 上的屬性和方法 ~~~ Cat.prototype = Animal.prototype; Cat.prototype.constructor = Cat; var cat1 = new Cat("大毛","黃色"); alert(cat1.species); // 動物 ~~~ 與前一種方法相比，這樣做的優點是效率比較高（不用執行和建立Animal的實例了），比較省內存。缺點是 Cat.prototype和Animal.prototype現在指向了同一個對象，那么任何對Cat.prototype的修改，都會反映到Animal.prototype。 所以，上面這一段代碼其實是有問題的。請看第二行 ~~~ Cat.prototype.constructor = Cat; ~~~ 這一句實際上把Animal.prototype對象的constructor屬性也改掉了！ ~~~ alert(Animal.prototype.constructor); // Cat ~~~ ### 四、利用空對象作為中介 由于"直接繼承prototype"存在上述的缺點，所以就有第四種方法，利用一個空對象作為中介。 ~~~ var F = function(){}; F.prototype = Animal.prototype; Cat.prototype = new F(); Cat.prototype.constructor = Cat; ~~~ F是空對象，所以幾乎不占內存。這時，修改Cat的prototype對象，就不會影響到Animal的prototype對象。 ~~~ alert(Animal.prototype.constructor); // Animal ~~~ **封裝一個方法來實現繼承** ~~~ function extend(Child, Parent) { 　　var F = function(){}; 　　F.prototype = Parent.prototype; 　　Child.prototype = new F(); 　　Child.prototype.constructor = Child; 　　Child.uber = Parent.prototype; //備用性質，也可不加 } ~~~ 使用如下 ~~~ extend(Cat,Animal); var cat1 = new Cat("大毛","黃色"); alert(cat1.species); // 動物 ~~~ ### 五、 拷貝繼承 上面是采用prototype對象，實現繼承。我們也可以換一種思路，純粹采用"拷貝"方法實現繼承。簡單說，如果把父對象的所有屬性和方法，拷貝進子對象，不也能夠實現繼承嗎？這樣我們就有了第五種方法。 首先，還是把Animal的所有不變屬性，都放到它的prototype對象上。 ~~~ function Animal(){} Animal.prototype.species = "動物"; ~~~ 然后，再寫一個函數，實現屬性拷貝的目的。 ~~~ function extend2(Child, Parent) { 　　　　var p = Parent.prototype; 　　　　var c = Child.prototype; 　　　　for (var i in p) { 　　　　　　c[i] = p[i]; 　　　　　　} 　　　　c.uber = p; 　　} ~~~ 這個函數的作用，就是將父對象的prototype對象中的屬性，一一拷貝給Child對象的prototype對象。 使用的時候，這樣寫： ~~~ 　　extend2(Cat, Animal); 　　var cat1 = new Cat("大毛","黃色"); 　　alert(cat1.species); // 動物 ~~~ ## 轉載文章 1. [Javascript面向對象編程（二）：構造函數的繼承](http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html)