快捷導(dǎo)航

Javascript學(xué)習(xí)筆記9 prototype封裝繼承

更新時(shí)間：2010年01月11日 00:35:47 作者：

在上文中，我利用prototype的原理做了一個(gè)封裝的New，然后我就想到，我是否可以用prototype的原理進(jìn)一步封裝面向?qū)ο蟮囊恍┗咎卣髂?？比如繼承。

好，那就讓我們一步步打造，首先讓我們來(lái)看下繼承原本的寫(xiě)法：

 
<script> 
var Person = function(name, age) { 
this.name = name; 
this.age = age; 
} 
Person.prototype.SayHello = function () { 
alert(this.name + "," + this.age); 
}; 
var Programmer = function (name, age, salary) { 
Person.call(this, name, age); 
this.salary = salary; 
}; 
Programmer.prototype = new Person(); 
var pro = new Programmer("kym", 21, 500); 
pro.SayHello(); 
</script> 

我們看到，在實(shí)際上，繼承的根本就在于這一步Programmer.prototype=new Person()。也就是說(shuō)把Person加到原型鏈上。這一點(diǎn)在Javascript學(xué)習(xí)筆記7——原型鏈的原理已經(jīng)有過(guò)比較詳盡的解釋。
那也就是說(shuō)，我們實(shí)現(xiàn)的關(guān)鍵就在于原型鏈的打造。
在上文中，我們用JSON來(lái)打造了一個(gè)原型，其原型鏈?zhǔn)莗.__proto__=Person。那么我們希望在這個(gè)上封裝繼承，那么原型鏈應(yīng)該是p.__proto__.__proto__=SuperClass，也就是說(shuō)Person.__proto__=SuperClass。但是按照我們上面代碼的繼承方法，原型鏈關(guān)系是Person.__proto__=SuperClass.prototype。
這個(gè)和我們?cè)谏衔闹幸粯?，我們的辦法就是借助一個(gè)輔助函數(shù)，將原來(lái)的函數(shù)內(nèi)的屬性賦給X，然后令X.prototype=SuperClass即可，也就是說(shuō)我們將子原型進(jìn)行一個(gè)封裝。
好，就按照這個(gè)思路，我們來(lái)實(shí)現(xiàn)利用原型鏈的繼承關(guān)系的封裝。

復(fù)制代碼代碼如下:

 
<script> 
var Factory = { 
Create: function (className, params) { 
var temp = function () { 
className.Create.apply(this, params); 
}; 
temp.prototype = className; 
var result = new temp(); 
return result; 
}, 
CreateBaseClass: function (baseClass, subClass) { 
var temp = function () { 
for (var member in subClass) { 
this[member] = subClass[member]; 
} 
}; 
temp.prototype = baseClass; 
return new temp(); 
} 
}; 
var People = { 
Create: function (name, age) { 
this.name = name; 
this.age = age; 
}, 
SayHello: function () { 
alert("Hello,My name is " + this.name + ".I am " + this.age); 
} 
}; 
var Temp = { 
Create: function (name, age, salary) { 
People.Create.call(this, name, age); 
this.salary = salary; 
}, 
Introduce: function () { 
alert(this.name + "$" + this.age + "$" + this.salary); 
} 
}; 
var Programmer = Factory.CreateBaseClass(People, Temp); 
var pro = Factory.Create(Programmer, ["kym", 21, 500]); 
pro.SayHello(); 
</script> 

這樣就完成了我們對(duì)繼承關(guān)系的封裝。當(dāng)然，我們也可以不單獨(dú)寫(xiě)一個(gè)變量：

復(fù)制代碼代碼如下:

 
var Programmer = Factory.CreateBaseClass(People, 
{ 
Create: function (name, age, salary) { 
People.Create.call(this, name, age); 
this.salary = salary; 
}, 
Introduce: function () { 
alert(this.name + "$" + this.age + "$" + this.salary); 
} 
}); 

當(dāng)然，這全憑個(gè)人愛(ài)好了，個(gè)人認(rèn)為第一種辦法相對(duì)更清晰一些，但是第二種辦法則更優(yōu)雅。

您可能感興趣的文章: