JavaScript 模擬類機(jī)制及私有變量的方法及思路
更新時(shí)間：2013年07月10日 11:27:40 作者：
這篇文章介紹了JavaScript模擬類機(jī)制及私有變量的方法及思路，有需要的朋友可以參考一下
在使用一些 Javascript 框架時(shí)，或許會(huì)看到類似的代碼
var MyClass = new Class({
initialize: function(param, ...) {
this.param = param;
...
},
func1: function(...) {
...
}
});
var myObj = new MyClass(param);
myObj.func1(...);
這是一種典型的面向?qū)ο蟮念悪C(jī)制應(yīng)用，與原生的 Javascript 類機(jī)制相比，顯得更為清晰和自然。并且，在此基礎(chǔ)上，實(shí)現(xiàn)類的繼承也較為方便。那么，這是如何實(shí)現(xiàn)的呢？
眾所周知，在 Javascript 中，將一個(gè)函數(shù)作為構(gòu)造器，可以創(chuàng)建出一個(gè)對(duì)象，上面的代碼可以簡(jiǎn)單的寫成：
function MyClass(param) {
this.param = param;
this.func1 = function(..) {
...
};
}
var myObj = new MyClass(param);
myObj.func1();
其實(shí)還是蠻簡(jiǎn)單的，也不難理解。不過如果要構(gòu)建一套大型的 Javascript 類庫，可能就會(huì)比較混亂，從一堆代碼中，要找出哪些是類，哪些是函數(shù)，哪些是類方法，哪些是類屬性，是一件痛苦的事。
當(dāng)然，這里并不是要比較它們的優(yōu)劣，只是好奇 new Class 的實(shí)現(xiàn)方式而已。
在上面的代碼中，使用 new MyClass() 這樣的語句，意味著 MyClass 必須是一個(gè)函數(shù)，同時(shí)也就意味著 new Class 需要返回一個(gè)函數(shù)對(duì)象，從字面的意思上可以看出，函數(shù) initialize 是當(dāng)做構(gòu)造函數(shù)來使用的，所以，new Class 返回的函數(shù)中，必須使用 initialize 來對(duì)對(duì)象進(jìn)行初始化。基于這樣的分析，可以得出以下代碼：
function Class(argu) {
return function() {
var init = argu['initialize'] || function() {}; //如果沒有構(gòu)造函數(shù) initialize，使用一個(gè)空函數(shù)作為默認(rèn)構(gòu)造函數(shù)
for(var p in argu) {
this[p] = argu[p];
}
init.apply(this, arguments); //使用當(dāng)前函數(shù)的 this 來代替函數(shù) initialize 原有的 this
}
}
上面的代碼并不夠嚴(yán)謹(jǐn)，但用來說明問題已經(jīng)足夠了。需要注意 init.apply(this, arguments) 這一句，這里有幾個(gè)變量的指代，一個(gè)是 this，原本 initialize 中默認(rèn)的 this，現(xiàn)在已被替代為返回的這個(gè)匿名函數(shù)的 this，而這個(gè)匿名函數(shù)，是通過 new Class 新建的自定義類的構(gòu)造器。另外一個(gè)是 arguments，它指代的是匿名函數(shù)的參數(shù)，也就是上面的 new MyClass(param) 中的 param。
this 的轉(zhuǎn)換有些讓人頭暈，那么有沒有更為簡(jiǎn)單的方法呢？請(qǐng)看下面的代碼：
function Class(argu) {
var obj = argu['initialize'] || function() {};
for(var p in argu) {
obj.prototype[p] = argu[p]; //注意，這里用的是 prototype
}
return obj; // 其實(shí)還是返回一個(gè)函數(shù)
}
呵呵，感覺直白了許多。
這就完成了一個(gè)簡(jiǎn)單的類機(jī)制的構(gòu)建。通過這種機(jī)制，可以創(chuàng)建類的構(gòu)造函數(shù)、方法及屬性，但這些顯然都是公有的，那么，如何實(shí)現(xiàn)私有變量及方法呢？
我們知道，Javascript 類的私有變量可以通過閉包的機(jī)制來完成。但使用 new Class({...}) 的方式轉(zhuǎn)換后，顯然很難形成有效的閉包。如何繞過這個(gè)問題呢？
Javascript 提供了兩個(gè)方法：eval() 及函數(shù)對(duì)象的 toString() 方法，前者較為常見，而后者，可用于獲取函數(shù)的具體代碼。通過這兩個(gè)方法，可以簡(jiǎn)單的模擬類的私有變量：
function Class(argu) {
var _ = argu['private'] || {};
eval('var obj = ' + (argu['initialize'] || function() {}).toString());
for(var p in argu) {
if(p == 'initialize' || p == 'private')
continue;
if(typeof argu[p] == 'function')
eval('obj.prototype[p] = ' + argu[p].toString());
else
obj.prototype[p] = argu[p];
}
return obj;
}
通過函數(shù)對(duì)象的 toString() 方法提取出函數(shù)的代碼，并使用 eval 方法執(zhí)行這些代碼，這樣就可以構(gòu)造出一個(gè)有效的閉包范圍，從而實(shí)現(xiàn)私有機(jī)制。我們可以如下應(yīng)用：
var Person = new Class({
private: {
height: 160,
weight: 50
},
initialize: function(name, height, weight) {
this.name = name;
_.height = height || _.height;
_.weight = weight || _.weight;
},
show: function() {
alert('Name:' + this.name + '/nheight:' + _.height + '/nweight:' + _.weight);
}
});
var my = new Person("Zh");
my.show();
看起來不不錯(cuò)，不過在實(shí)際應(yīng)用中，其實(shí)并沒有太大的用途。主要是效率上，相比通常的實(shí)現(xiàn)方式，大概需要多花四倍的時(shí)間。在大型類庫的構(gòu)建上，這是不可容忍的，而小型的應(yīng)用中，實(shí)現(xiàn)下面的代碼更為簡(jiǎn)單直接：
function MyClass(param) {
var privateVar = ...;
this.param = param;
this.func = function() {
alert(privateVar);
};
}
復(fù)制代碼 代碼如下:
var MyClass = new Class({
initialize: function(param, ...) {
this.param = param;
...
},
func1: function(...) {
...
}
});
var myObj = new MyClass(param);
myObj.func1(...);
這是一種典型的面向?qū)ο蟮念悪C(jī)制應(yīng)用，與原生的 Javascript 類機(jī)制相比，顯得更為清晰和自然。并且，在此基礎(chǔ)上，實(shí)現(xiàn)類的繼承也較為方便。那么，這是如何實(shí)現(xiàn)的呢？
眾所周知，在 Javascript 中，將一個(gè)函數(shù)作為構(gòu)造器，可以創(chuàng)建出一個(gè)對(duì)象，上面的代碼可以簡(jiǎn)單的寫成：
復(fù)制代碼 代碼如下:
function MyClass(param) {
this.param = param;
this.func1 = function(..) {
...
};
}
var myObj = new MyClass(param);
myObj.func1();
其實(shí)還是蠻簡(jiǎn)單的，也不難理解。不過如果要構(gòu)建一套大型的 Javascript 類庫，可能就會(huì)比較混亂，從一堆代碼中，要找出哪些是類，哪些是函數(shù)，哪些是類方法，哪些是類屬性，是一件痛苦的事。
當(dāng)然，這里并不是要比較它們的優(yōu)劣，只是好奇 new Class 的實(shí)現(xiàn)方式而已。
在上面的代碼中，使用 new MyClass() 這樣的語句，意味著 MyClass 必須是一個(gè)函數(shù)，同時(shí)也就意味著 new Class 需要返回一個(gè)函數(shù)對(duì)象，從字面的意思上可以看出，函數(shù) initialize 是當(dāng)做構(gòu)造函數(shù)來使用的，所以，new Class 返回的函數(shù)中，必須使用 initialize 來對(duì)對(duì)象進(jìn)行初始化。基于這樣的分析，可以得出以下代碼：
復(fù)制代碼 代碼如下:
function Class(argu) {
return function() {
var init = argu['initialize'] || function() {}; //如果沒有構(gòu)造函數(shù) initialize，使用一個(gè)空函數(shù)作為默認(rèn)構(gòu)造函數(shù)
for(var p in argu) {
this[p] = argu[p];
}
init.apply(this, arguments); //使用當(dāng)前函數(shù)的 this 來代替函數(shù) initialize 原有的 this
}
}
上面的代碼并不夠嚴(yán)謹(jǐn)，但用來說明問題已經(jīng)足夠了。需要注意 init.apply(this, arguments) 這一句，這里有幾個(gè)變量的指代，一個(gè)是 this，原本 initialize 中默認(rèn)的 this，現(xiàn)在已被替代為返回的這個(gè)匿名函數(shù)的 this，而這個(gè)匿名函數(shù)，是通過 new Class 新建的自定義類的構(gòu)造器。另外一個(gè)是 arguments，它指代的是匿名函數(shù)的參數(shù)，也就是上面的 new MyClass(param) 中的 param。
this 的轉(zhuǎn)換有些讓人頭暈，那么有沒有更為簡(jiǎn)單的方法呢？請(qǐng)看下面的代碼：
復(fù)制代碼 代碼如下:
function Class(argu) {
var obj = argu['initialize'] || function() {};
for(var p in argu) {
obj.prototype[p] = argu[p]; //注意，這里用的是 prototype
}
return obj; // 其實(shí)還是返回一個(gè)函數(shù)
}
呵呵，感覺直白了許多。
這就完成了一個(gè)簡(jiǎn)單的類機(jī)制的構(gòu)建。通過這種機(jī)制，可以創(chuàng)建類的構(gòu)造函數(shù)、方法及屬性，但這些顯然都是公有的，那么，如何實(shí)現(xiàn)私有變量及方法呢？
我們知道，Javascript 類的私有變量可以通過閉包的機(jī)制來完成。但使用 new Class({...}) 的方式轉(zhuǎn)換后，顯然很難形成有效的閉包。如何繞過這個(gè)問題呢？
Javascript 提供了兩個(gè)方法：eval() 及函數(shù)對(duì)象的 toString() 方法，前者較為常見，而后者，可用于獲取函數(shù)的具體代碼。通過這兩個(gè)方法，可以簡(jiǎn)單的模擬類的私有變量：
復(fù)制代碼 代碼如下:
function Class(argu) {
var _ = argu['private'] || {};
eval('var obj = ' + (argu['initialize'] || function() {}).toString());
for(var p in argu) {
if(p == 'initialize' || p == 'private')
continue;
if(typeof argu[p] == 'function')
eval('obj.prototype[p] = ' + argu[p].toString());
else
obj.prototype[p] = argu[p];
}
return obj;
}
通過函數(shù)對(duì)象的 toString() 方法提取出函數(shù)的代碼，并使用 eval 方法執(zhí)行這些代碼，這樣就可以構(gòu)造出一個(gè)有效的閉包范圍，從而實(shí)現(xiàn)私有機(jī)制。我們可以如下應(yīng)用：
復(fù)制代碼 代碼如下:
var Person = new Class({
private: {
height: 160,
weight: 50
},
initialize: function(name, height, weight) {
this.name = name;
_.height = height || _.height;
_.weight = weight || _.weight;
},
show: function() {
alert('Name:' + this.name + '/nheight:' + _.height + '/nweight:' + _.weight);
}
});
var my = new Person("Zh");
my.show();
看起來不不錯(cuò)，不過在實(shí)際應(yīng)用中，其實(shí)并沒有太大的用途。主要是效率上，相比通常的實(shí)現(xiàn)方式，大概需要多花四倍的時(shí)間。在大型類庫的構(gòu)建上，這是不可容忍的，而小型的應(yīng)用中，實(shí)現(xiàn)下面的代碼更為簡(jiǎn)單直接：
復(fù)制代碼 代碼如下:
function MyClass(param) {
var privateVar = ...;
this.param = param;
this.func = function() {
alert(privateVar);
};
}
相關(guān)文章
JS特效實(shí)現(xiàn)圖片自動(dòng)播放并可控的效果
這篇文章主要介紹了JS代碼實(shí)現(xiàn)圖片自動(dòng)播放并可控的效果,需要的朋友可以參考下2015-07-07
js構(gòu)造函數(shù)、索引數(shù)組和屬性的實(shí)現(xiàn)方式和使用
本文主要介紹和小結(jié)js的構(gòu)造函數(shù),關(guān)聯(lián)數(shù)組的實(shí)現(xiàn)方式和使用,及不可變對(duì)象和它的實(shí)現(xiàn)方式及他們使用過程中要注意的點(diǎn),需要的朋友可以參考下2014-11-11
JS實(shí)現(xiàn)漂亮的時(shí)間選擇框效果
這篇文章主要介紹了JS實(shí)現(xiàn)漂亮的時(shí)間選擇框效果,結(jié)合實(shí)例形式分析了javascript時(shí)間選擇框插件的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2016-08-08
頁面加載完畢后滾動(dòng)條自動(dòng)滾動(dòng)一定位置
希望頁面加載完畢后向左自動(dòng)滾動(dòng)一定位置，下面有個(gè)不錯(cuò)的方法可以輕松幫大家實(shí)現(xiàn)下2014-02-02
微信小程序?qū)崿F(xiàn)元素漸入漸出動(dòng)畫效果封裝方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)元素漸入漸出動(dòng)畫效果封裝方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了微信小程序wepy框架學(xué)習(xí)和使用心得詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
Layui給數(shù)據(jù)表格動(dòng)態(tài)添加一行并跳轉(zhuǎn)到添加行所在頁的方法
今天小編就為大家分享一篇Layui給數(shù)據(jù)表格動(dòng)態(tài)添加一行并跳轉(zhuǎn)到添加行所在頁的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
javascript實(shí)現(xiàn)將文件保存到本地方法匯總
本文給大家匯總介紹了3中使用javascript實(shí)現(xiàn)將文件保存到本地的方法，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-07-07
學(xué)著js的繼承，自己也寫了個(gè)。感覺不是很好?，F(xiàn)在很多代碼都封裝成類。2010-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序模板template使用的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01