Javascript學習筆記九——prototype封裝繼承
系列文章導航:
Javascript學習筆記九——prototype封裝繼承
在上文中,我利用prototype的原理做了一個封裝的New,然后我就想到,我是否可以用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); } });
當然,這全憑個人愛好了,個人認為第一種辦法相對更清晰一些,但是第二種辦法則更優雅。
全站熱搜