|
復(fù)制代碼 代碼如下:
<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è)谏衔闹幸粯樱覀兊霓k法就是借助一個(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)雅。
JavaScript技術(shù):Javascript學(xué)習(xí)筆記9 prototype封裝繼承,轉(zhuǎn)載需保留來(lái)源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。