Javascript學習筆記9 prototype封裝繼承

好，那就讓我們一步步打造，首先讓我們來看下繼承原本的寫法： 複製代碼 代碼如下:<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>

我們看到，在實際上，繼承的根本就在於這一步Programmer.prototype=new Person()。也就是說把Person加到原型鏈上。這一點在Javascript學習筆記7——原型鏈的原理 已經有過比較詳盡的解釋。
那也就是說，我們實現的關鍵就在於原型鏈的打造。
在上文中，我們用JSON來打造了一個原型，其原型鏈是p.__proto__=Person。那麼我們希望在這個上封裝繼承，那麼原型鏈應該是p.__proto__.__proto__=SuperClass，也就是說Person.__proto__=SuperClass。但是按照我們上面代碼的繼承方法，原型鏈關係是Person.__proto__=SuperClass.prototype。
這個和我們在上文中一樣，我們的辦法就是藉助一個輔助函數，將原來的函數內的屬性賦給X，然後令X.prototype=SuperClass即可，也就是說我們將子原型進行一個封裝。
好，就按照這個思路，我們來實現利用原型鏈的繼承關係的封裝。 複製代碼 代碼如下:<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>

這樣就完成了我們對繼承關係的封裝。當然，我們也可以不單獨寫一個變數： 複製代碼 代碼如下: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);
}
});

當然，這全憑個人愛好了，個人認為第一種辦法相對更清晰一些，但是第二種辦法則更優雅。