快捷導航

Javascript學習筆記8 用JSON做原型

更新時間：2010年01月11日 00:34:41 作者：

在Javascript學習筆記5 類和對象中，我簡單地提到了利用JSON去構(gòu)造一個對象。

代碼如下：

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

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

首先，在一個JSON對象有一個構(gòu)造方法是不可能的了，那么我們就做一個簡單的“工廠”吧，寫一個方法來專門負責創(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> 

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

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

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

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

既然在new的時候，某個對象的__proto__只能等于某個函數(shù)的prototype，我們設(shè)置一個函數(shù)X，令p.__proto__=X.prototype，我們再令X.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> 

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

復制代碼代碼如下:

 
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里注冊一個新方法，這樣是很麻煩的，我在很久以前的玩轉(zhuǎn)方法:call和apply 中說過關(guān)于call和apply的區(qū)別，因為這里的參數(shù)不固定，我們不可能一一列舉，因此我們在這里可以用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> 