JS原型繼承與原型鏈（二）

建構函式的繼承

function
animal()

function
cat(name,color)

一、建構函式繫結

function
cat(name,color)
var cat1 = new cat("大毛","黃色");
alert(cat1.species); 
//動物

二、 prototype模式

第二種方法更常見，使用prototype屬性。

如果"貓"的prototype物件，指向乙個animal的例項，那麼所有"貓"的例項，就能繼承animal了。

cat.prototype = new
animal();
//避免原型鏈紊亂
cat.prototype.constructor =cat;
var cat1 = new cat("大毛","黃色");
alert(cat1.species); 
//動物

三、直接繼承prototype

第三種方法是對第二種方法的改進。由於animal物件中，不變的屬性都可以直接寫入animal.prototype。所以，我們也可以讓cat()跳過 animal()，直接繼承animal.prototype。

現在，我們先將animal物件改寫：

function
animal()
animal.prototype.species = "動物";

然後，將cat的prototype物件，然後指向animal的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屬性也改掉了！

四、利用空物件作為中介

由於"直接繼承prototype"存在上述的缺點，所以就有第四種方法，利用乙個空物件作為中介。其實有點相當於第二種方法。

var f = function
(){};
f.prototype =animal.prototype;
cat.prototype = new
f();
cat.prototype.constructor = cat;

f是空物件，所以幾乎不佔記憶體。這時，修改cat的prototype物件，就不會影響到animal的prototype物件。

function
extend(child, parent) ;
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); 
//動物

這個extend函式，就是yui庫如何實現繼承的方法。

`child.uber = parent.prototype;` 意思是為子物件設乙個uber屬性，這個屬性直接指向父物件的prototype屬性。（uber是乙個德語詞，意思是"向上"、"上一層"。）這等於在子物件上開啟一條通道，可以直接呼叫父物件的方法。這一行放在這裡，只是為了實現繼承的完備性，純屬備用性質。

五、拷貝繼承

上面是採用prototype物件，實現繼承。我們也可以換一種思路，純粹採用"拷貝"方法實現繼承。簡單說，如果把父物件的所有屬性和方法，拷貝進子物件，不也能夠實現繼承嗎？這樣我們就有了第五種方法。

首先，還是把animal的所有不變屬性，都放到它的prototype物件上。

function
animal(){}
animal.prototype.species = "動物";

然後，再寫乙個函式，實現屬性拷貝的目的。

function
extend2(child, parent) 
c.uber =p;
}

使用的時候這麼寫：

extend2(cat, animal);
var cat1 = new cat("大毛","黃色");
alert(cat1.species); 
//動物

但是請注意，上述的屬性拷貝為淺拷貝，會存在問題！

JS原型繼承與原型鏈（二）

原型原型鏈與繼承

js原型物件原型鏈繼承

JS原型與繼承（三）原型鏈

JS原型繼承與原型鏈（二）

原型 原型鏈與繼承

js原型物件 原型鏈 繼承

JS原型與繼承（三） 原型鏈

相關推薦

原型原型鏈與繼承

js原型物件原型鏈繼承

JS原型與繼承（三）原型鏈