系列文章導航：

JavaScript學習筆記一——數據類型

JavaScript學習筆記二——函數

JavaScript學習筆記三——作用域

JavaScript學習筆記四——Eval函數

JavaScript學習筆記五——類和對象

JavaScript學習筆記六：prototype的提出

Javascript學習筆記七——原型鏈的原理

Javascript學習筆記八——用JSON做原型

Javascript學習筆記九——prototype封裝繼承

Javascript學習筆記十——網頁運行原理

Javascript學習筆記十一——包裝DOM對象

Javascript學習筆記十三——關于響應事件

Javascript學習筆記十二——Ajax入門

在上文中，我利用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);    }});

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

it知識庫：Javascript學習筆記九——prototype封裝繼承，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。