系列文章導(dǎo)航：

JavaScript學(xué)習(xí)筆記一——數(shù)據(jù)類型

JavaScript學(xué)習(xí)筆記二——函數(shù)

JavaScript學(xué)習(xí)筆記三——作用域

JavaScript學(xué)習(xí)筆記四——Eval函數(shù)

JavaScript學(xué)習(xí)筆記五——類和對(duì)象

JavaScript學(xué)習(xí)筆記六：prototype的提出

Javascript學(xué)習(xí)筆記七——原型鏈的原理

Javascript學(xué)習(xí)筆記八——用JSON做原型

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

Javascript學(xué)習(xí)筆記十——網(wǎng)頁(yè)運(yùn)行原理

Javascript學(xué)習(xí)筆記十一——包裝DOM對(duì)象

Javascript學(xué)習(xí)筆記十三——關(guān)于響應(yīng)事件

Javascript學(xué)習(xí)筆記十二——Ajax入門(mén)

在Javascript學(xué)習(xí)筆記5——類和對(duì)象中，我簡(jiǎn)單地提到了利用JSON去構(gòu)造一個(gè)對(duì)象。代碼如下：

    <script type="text/Javascript">
        var People = {
            name: "kym",
            age: 21,
            SayHello: function () {
                alert("Hello,My name is " + this.name + ".I am " + this.age);
            }
        }
        alert(People.name);
        People.SayHello();
    script>

但是我們是不能重用這個(gè)對(duì)象的，我們?nèi)绾伟堰@個(gè)對(duì)象作為原型的呢？

首先，在一個(gè)JSON對(duì)象有一個(gè)構(gòu)造方法是不可能的了，那么我們就做一個(gè)簡(jiǎn)單的“工廠”吧，寫(xiě)一個(gè)方法來(lái)專門(mén)負(fù)責(zé)創(chuàng)建。

    <script type="text/Javascript">
        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);
            }
        }
        People.Create("kym", 21);
        People.SayHello();
    script>

但是通過(guò)這個(gè)方法我們卻發(fā)現(xiàn)，我們沒(méi)有辦法用People作為原型，讓我們回顧一下：Javascript學(xué)習(xí)筆記7——原型鏈的原理 這篇文章，我們想一下這個(gè)過(guò)程：

var p=new People();==>p.__proto__=People.prototype。于是當(dāng)我們p.SayHello()的時(shí)候就會(huì)去People.prototype中去找，結(jié)果什么都找不到。

如果可以People.prototype.SayHello=function(){}就可以解決這個(gè)問(wèn)題。但是我們知道，只有function才可以有prototype。

那么我們想想之前的推導(dǎo)公式，怎么樣能讓p.SayHello()呢？如果可以p.__proto__=People就好了。那么我們想個(gè)辦法：

既然在new的時(shí)候，某個(gè)對(duì)象的__proto__只能等于某個(gè)函數(shù)的prototype，我們?cè)O(shè)置一個(gè)函數(shù)X，令p.__proto__=X.prototype，我們?cè)倭頧.prototype=People。這樣的關(guān)系是這樣：

    <script type="text/Javascript">
        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 X = function () { };
        X.prototype = People;
        var p = new X();
        p.Create("kym", 21);
        p.SayHello();
    script>

這樣就相當(dāng)于用X做了一個(gè)中間變量，使得我們可以訪問(wèn)JSON對(duì)象的內(nèi)部屬性。但是這樣是不是不太優(yōu)雅呢？我們每次創(chuàng)建一個(gè)對(duì)象時(shí)，都需要來(lái)寫(xiě)這樣一個(gè)輔助的函數(shù)。那好，我們就把這個(gè)過(guò)程封裝起來(lái)：

var Factory = {
    CreatePeople : function (className,name,age) {
        var temp = function () {
            className.Create(name, age);
        };
        temp.prototype = className;
        var result = new temp();
        return result;
    }
};
var people = Factory.CreatePeople(People,"kym",21);
people.SayHello();

但是這樣也有一個(gè)缺點(diǎn)，就是每次我增加一個(gè)類，就需要向Factory里注冊(cè)一個(gè)新方法，這樣是很麻煩的，我在很久以前的 玩轉(zhuǎn)方法:call和apply 中說(shuō)過(guò)關(guān)于call和apply的區(qū)別，因?yàn)檫@里的參數(shù)不固定，我們不可能一一列舉，因此我們?cè)谶@里可以用apply來(lái)改善這個(gè)方法：

    <script type="text/Javascript">
        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 Factory = {
            Create: function (className, params) {
                var temp = function () {
                    className.Create.apply(this, params);
                };
                temp.prototype = className;
                var result = new temp();
                return result;
            }
        };
        var people = Factory.Create(People,["kym",21]);
        people.SayHello();
    script>

這樣，一個(gè)完整的創(chuàng)建類就誕生了！那么我們每次創(chuàng)建“類”時(shí)就都可以用JSON來(lái)做了，然后用戶每次都統(tǒng)一來(lái)調(diào)用Factory.Create()就可以了！

it知識(shí)庫(kù)：Javascript學(xué)習(xí)筆記八——用JSON做原型，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。