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

在Javascript學習筆記5——類和對象中，我簡單地提到了利用JSON去構造一個對象。代碼如下：

    <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>

但是我們是不能重用這個對象的，我們如何把這個對象作為原型的呢？

首先，在一個JSON對象有一個構造方法是不可能的了，那麼我們就做一個簡單的“工廠”吧，寫一個方法來專門負責建立。

    <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>

但是通過這個方法我們卻發現，我們沒有辦法用People作為原型，讓我們回顧一下：Javascript學習筆記7——原型鏈的原理 這篇文章，我們想一下這個過程：

var p=new People();==>p.__proto__=People.prototype。於是當我們p.SayHello()的時候就會去People.prototype中去找，結果什麼都找不到。

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

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

既然在new的時候，某個對象的__proto__只能等於某個函數的prototype，我們設定一個函數X，令p.__proto__=X.prototype，我們再令X.prototype=People。這樣的關係是這樣：

    <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>

這樣就相當於用X做了一個中間變數，使得我們可以訪問JSON對象的內部屬性。但是這樣是不是不太優雅呢？我們每次建立一個對象時，都需要來寫這樣一個輔助的函數。那好，我們就把這個過程封裝起來：

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();

但是這樣也有一個缺點，就是每次我增加一個類，就需要向Factory裡註冊一個新方法，這樣是很麻煩的，我在很久以前的 玩轉方法:call和apply 中說過關於call和apply的區別，因為這裡的參數不固定，我們不可能一一列舉，因此我們在這裡可以用apply來改善這個方法：

    <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>

這樣，一個完整的建立類就誕生了！那麼我們每次建立“類”時就都可以用JSON來做了，然後使用者每次都統一來調用Factory.Create()就可以了！