JavaScript中的私有/靜態(tài)屬性介紹
更新時間：2012年07月26日 22:24:48 作者：
大家都知道在JavaScript中沒有塊級作用域的概念，我們可以通過使用閉包來模擬實現(xiàn)塊級作用域，看下面的示例
•模擬塊級作用域
大家都知道在JavaScript中沒有塊級作用域的概念，我們可以通過使用閉包來模擬實現(xiàn)塊級作用域，看下面的示例：
(function () {
for (var i = 0; i < 10; i++) {
//Do Nothing
}
alert(i); //輸出10
})();
第6行可以訪問到for循環(huán)塊中的變量i，如果我們稍微修改以上代碼，把for循環(huán)塊放置在閉包中，情況就不一樣了：
(function () {
(function () {
for (var i = 0; i < 10; i++) {
//Do Nothing
}
})();
alert(i); //Error: 'i' is undefined
})();
在第8行訪問變了i時，出現(xiàn)錯誤，實現(xiàn)了我們想要的塊級作用域。
•私有屬性
在JavaScript中沒有塊級作用域的概念，同樣也沒有私有屬性的概念，但是存在私有變量。如果我們想把一些數(shù)據(jù)封裝隱藏起來要怎么做呢？想必大家可能已經(jīng)想到了，可以通過使用閉包+私有變量的方式來實現(xiàn)對象的私有屬性。
<1>.實例私有屬性
實例私有屬性的特點就是每個對象都會包含獨立的屬性，對象和對象之間沒有共享。為了實現(xiàn)這個目標(biāo)，可以在構(gòu)造函數(shù)中增加一個私有變量，然后定義公共方法來訪問這個私有變量，就如同其他OO語言的setter和getter一樣，下列示例就實現(xiàn)了實例的私有屬性：
//實例私有變量
function MyObject(name) {
//定義私有變量
//注意：此處沒有用this.name，如果使用this.name變成公共屬性了
var privateName = name;
//定義私有熟悉
var privateFunction = function () {
return "Private Function";
}
//公共方法訪問私有熟悉
MyObject.prototype.getName = function () {
return privateName;
}
MyObject.prototype.getFunction = function () {
return privateFunction();
}
}
var moGyy = new MyObject("gyy");
alert(moGyy.getName()); //輸出gyy
alert(moGyy.getFunction()); //輸出Private Function
var moCyy = new MyObject("cyy");
alert(moCyy.getName()); //輸出cyy
alert(moCyy.getFunction()); //輸出Private Function
在上面的示例中創(chuàng)建的兩個對象moGyy和moCyy的getName返回不同的值，同時如果想調(diào)用私有方法同樣也需要公共接口。上面的示例中兩個公共函數(shù)之所以能訪問私有變量，是因為兩個公共函數(shù)都是閉包，而閉包的作用域鏈中包含了包含函數(shù)的變量對象，因此在進行變量查找時，順著作用域鏈可以訪問包含函數(shù)中的私有變量。在上面的示例中把公共方法添加到MyObject的原型中，目的是防止每次創(chuàng)建對象都創(chuàng)建功能一樣的兩個函數(shù)實例。
<2>.靜態(tài)私有屬性
在有些情況下我們可能希望數(shù)據(jù)全局共享，那么可能就會用到靜態(tài)屬性，我們還是希望這個屬性為私有的，那么怎樣實現(xiàn)靜態(tài)私有屬性呢？首先這個私有應(yīng)該在構(gòu)造函數(shù)的外部，為了把構(gòu)造函數(shù)外部的變量和構(gòu)造函數(shù)結(jié)合為一體，可以使用閉包把私有變量和構(gòu)造函數(shù)都包含在其作用域中，為了在閉包外面訪問內(nèi)部的構(gòu)造函數(shù)，可以使用一個全局的變量來引用構(gòu)造函數(shù)，如下代碼示例：
//靜態(tài)私有變量和實例私有變量
(function () {
//定義私有變量
var staticPrivateValue = "";
//構(gòu)造函數(shù)，把構(gòu)織函數(shù)賦值給一個全局的變量
MyObject = function (name) {
//定義實例變量
this.name = name;
};
//定義兩個公共方法用于訪問私有變量，再一次把公共方法添加到原型中
MyObject.prototype.getPrivateValue = function () {
return staticPrivateValue;
}
MyObject.prototype.setPrivateValue = function (value) {
staticPrivateValue = value;
}
})();
var mo = new MyObject("jeff-gyy");
mo.setPrivateValue("gyycyy"); //設(shè)置私有屬性的值
alert(mo.getPrivateValue()); //輸出gyycyy
alert(mo.name); //輸出jeff-gyy
var mo1 = new MyObject("jeff-cyy");
alert(mo1.getPrivateValue()); //輸出gyycyy
alert(mo1.name); //輸出jeff-cyy
從上面的代碼來看mo1調(diào)用getPrivateValue函數(shù)返回的值就是mo設(shè)置的值"gyycyy"，為什么會這樣呢？首先我們定義了一個匿名函數(shù)并立即調(diào)用函數(shù)，函數(shù)包含了私有變量staticPrivateValue，那么為MyObject定義的兩個原型方法其實通過閉包的作用域鏈可以訪問在包含函數(shù)的私有變量，也就是getPrivateValue和setPrivateValue兩個函數(shù)的作用域鏈中都包含了匿名函數(shù)的變量對象，我們知道作用域鏈中包含的變量對象其實就是一個指針，所以創(chuàng)建的兩個對象通過公共方法房屋私有變量時，其實訪問的都是匿名函數(shù)的變量對象中的staticPrivateValue，因此實現(xiàn)變量實例間共享的目的。從傳統(tǒng)OO語言的角度來看我們實現(xiàn)的靜態(tài)屬性其實并不是真正意義上的靜態(tài)，只是實現(xiàn)了靜態(tài)屬性實例共享的特點。
<3>.模塊模式和增強模塊模式
還有一種全局共享數(shù)據(jù)的方式就是singleton， 可以使用模塊模式來實現(xiàn)Object類型的單例模式，也可以使用增強模塊模式實現(xiàn)自定義類型的單例模式，如下示例：
//自定義構(gòu)造函數(shù)
var mo = new function () {
//私有變量
var privateValue = "";
//普通模塊模式
return {
publicValue: "public",
//訪問私有變量
getPrivateValue: function () {
return privateValue;
},
setPrivateValue: function (value) {
privateValue = value;
}
}
}();
mo.setPrivateValue("private value");
alert(mo.getPrivateValue());
alert(mo.publicFunction());
模塊模式使用匿名函數(shù)來封裝內(nèi)部實現(xiàn)，就上面的示例匿名函數(shù)中包含了私有變量privateValue，返回的對象中的公共函數(shù)通過閉包的作用域鏈訪問包含函數(shù)中的私有變量，由于定義的匿名函數(shù)被立即調(diào)用，因此變量mo引用的是返回的對象。上面的單例模式返回的是一個Object對象，可以使用增強模塊模式實現(xiàn)自定義類型的單例模式：
//增強模塊模式
//自定義構(gòu)造函數(shù)
function MyObject(name) {
this.name = name;
};
//自定義構(gòu)造函數(shù)
var mo = new function () {
//私有變量
var privateValue = "";
//增強模塊模式
var o = new MyObject("gyycyy");
o.publicValue = "public";
//訪問私有變量
o.getPrivateValue = function () {
return privateValue;
}
o.setPrivateValue = function (value) {
privateValue = value;
}
return o;
}();
mo.setPrivateValue("private value");
alert(mo.getPrivateValue());
alert(mo.publicFunction());
以上代碼示例實現(xiàn)了MyObject的單例模式。
最后需要提一點的是使用閉包有利也有弊，由于閉包作用域鏈引用包含函數(shù)的變量對象，因此會占用額外的內(nèi)存，而且進行變量查找是也需要通過作用域鏈，因此會消耗查找時間，閉包越深情況更嚴重。另外在IE(早些版本)中由于垃圾回收機制使用引用計數(shù)，因此可能會出現(xiàn)循環(huán)引用的情況，導(dǎo)致內(nèi)存泄露，如下示例：
function assignHandler(){
var element = document.getElementById("someElement");
element.onclick = function(){
alert(element.id);
};
}
在上面的代碼中創(chuàng)建了一個閉包作為element的事件，該閉包引用了包含函數(shù)assingHandler的變量對象，而恰恰是對變量對象的引用使得element引用計數(shù)至少為1，因此element不會被回收，導(dǎo)致內(nèi)存泄露。修改的方法大家可以想想。
大家都知道在JavaScript中沒有塊級作用域的概念，我們可以通過使用閉包來模擬實現(xiàn)塊級作用域，看下面的示例：
復(fù)制代碼 代碼如下:
(function () {
for (var i = 0; i < 10; i++) {
//Do Nothing
}
alert(i); //輸出10
})();
第6行可以訪問到for循環(huán)塊中的變量i，如果我們稍微修改以上代碼，把for循環(huán)塊放置在閉包中，情況就不一樣了：
復(fù)制代碼 代碼如下:
(function () {
(function () {
for (var i = 0; i < 10; i++) {
//Do Nothing
}
})();
alert(i); //Error: 'i' is undefined
})();
在第8行訪問變了i時，出現(xiàn)錯誤，實現(xiàn)了我們想要的塊級作用域。
•私有屬性
在JavaScript中沒有塊級作用域的概念，同樣也沒有私有屬性的概念，但是存在私有變量。如果我們想把一些數(shù)據(jù)封裝隱藏起來要怎么做呢？想必大家可能已經(jīng)想到了，可以通過使用閉包+私有變量的方式來實現(xiàn)對象的私有屬性。
<1>.實例私有屬性
實例私有屬性的特點就是每個對象都會包含獨立的屬性，對象和對象之間沒有共享。為了實現(xiàn)這個目標(biāo)，可以在構(gòu)造函數(shù)中增加一個私有變量，然后定義公共方法來訪問這個私有變量，就如同其他OO語言的setter和getter一樣，下列示例就實現(xiàn)了實例的私有屬性：
復(fù)制代碼 代碼如下:
//實例私有變量
function MyObject(name) {
//定義私有變量
//注意：此處沒有用this.name，如果使用this.name變成公共屬性了
var privateName = name;
//定義私有熟悉
var privateFunction = function () {
return "Private Function";
}
//公共方法訪問私有熟悉
MyObject.prototype.getName = function () {
return privateName;
}
MyObject.prototype.getFunction = function () {
return privateFunction();
}
}
var moGyy = new MyObject("gyy");
alert(moGyy.getName()); //輸出gyy
alert(moGyy.getFunction()); //輸出Private Function
var moCyy = new MyObject("cyy");
alert(moCyy.getName()); //輸出cyy
alert(moCyy.getFunction()); //輸出Private Function
在上面的示例中創(chuàng)建的兩個對象moGyy和moCyy的getName返回不同的值，同時如果想調(diào)用私有方法同樣也需要公共接口。上面的示例中兩個公共函數(shù)之所以能訪問私有變量，是因為兩個公共函數(shù)都是閉包，而閉包的作用域鏈中包含了包含函數(shù)的變量對象，因此在進行變量查找時，順著作用域鏈可以訪問包含函數(shù)中的私有變量。在上面的示例中把公共方法添加到MyObject的原型中，目的是防止每次創(chuàng)建對象都創(chuàng)建功能一樣的兩個函數(shù)實例。
<2>.靜態(tài)私有屬性
在有些情況下我們可能希望數(shù)據(jù)全局共享，那么可能就會用到靜態(tài)屬性，我們還是希望這個屬性為私有的，那么怎樣實現(xiàn)靜態(tài)私有屬性呢？首先這個私有應(yīng)該在構(gòu)造函數(shù)的外部，為了把構(gòu)造函數(shù)外部的變量和構(gòu)造函數(shù)結(jié)合為一體，可以使用閉包把私有變量和構(gòu)造函數(shù)都包含在其作用域中，為了在閉包外面訪問內(nèi)部的構(gòu)造函數(shù)，可以使用一個全局的變量來引用構(gòu)造函數(shù)，如下代碼示例：
復(fù)制代碼 代碼如下:
//靜態(tài)私有變量和實例私有變量
(function () {
//定義私有變量
var staticPrivateValue = "";
//構(gòu)造函數(shù)，把構(gòu)織函數(shù)賦值給一個全局的變量
MyObject = function (name) {
//定義實例變量
this.name = name;
};
//定義兩個公共方法用于訪問私有變量，再一次把公共方法添加到原型中
MyObject.prototype.getPrivateValue = function () {
return staticPrivateValue;
}
MyObject.prototype.setPrivateValue = function (value) {
staticPrivateValue = value;
}
})();
var mo = new MyObject("jeff-gyy");
mo.setPrivateValue("gyycyy"); //設(shè)置私有屬性的值
alert(mo.getPrivateValue()); //輸出gyycyy
alert(mo.name); //輸出jeff-gyy
var mo1 = new MyObject("jeff-cyy");
alert(mo1.getPrivateValue()); //輸出gyycyy
alert(mo1.name); //輸出jeff-cyy
從上面的代碼來看mo1調(diào)用getPrivateValue函數(shù)返回的值就是mo設(shè)置的值"gyycyy"，為什么會這樣呢？首先我們定義了一個匿名函數(shù)并立即調(diào)用函數(shù)，函數(shù)包含了私有變量staticPrivateValue，那么為MyObject定義的兩個原型方法其實通過閉包的作用域鏈可以訪問在包含函數(shù)的私有變量，也就是getPrivateValue和setPrivateValue兩個函數(shù)的作用域鏈中都包含了匿名函數(shù)的變量對象，我們知道作用域鏈中包含的變量對象其實就是一個指針，所以創(chuàng)建的兩個對象通過公共方法房屋私有變量時，其實訪問的都是匿名函數(shù)的變量對象中的staticPrivateValue，因此實現(xiàn)變量實例間共享的目的。從傳統(tǒng)OO語言的角度來看我們實現(xiàn)的靜態(tài)屬性其實并不是真正意義上的靜態(tài)，只是實現(xiàn)了靜態(tài)屬性實例共享的特點。
<3>.模塊模式和增強模塊模式
還有一種全局共享數(shù)據(jù)的方式就是singleton， 可以使用模塊模式來實現(xiàn)Object類型的單例模式，也可以使用增強模塊模式實現(xiàn)自定義類型的單例模式，如下示例：
復(fù)制代碼 代碼如下:
//自定義構(gòu)造函數(shù)
var mo = new function () {
//私有變量
var privateValue = "";
//普通模塊模式
return {
publicValue: "public",
//訪問私有變量
getPrivateValue: function () {
return privateValue;
},
setPrivateValue: function (value) {
privateValue = value;
}
}
}();
mo.setPrivateValue("private value");
alert(mo.getPrivateValue());
alert(mo.publicFunction());
模塊模式使用匿名函數(shù)來封裝內(nèi)部實現(xiàn)，就上面的示例匿名函數(shù)中包含了私有變量privateValue，返回的對象中的公共函數(shù)通過閉包的作用域鏈訪問包含函數(shù)中的私有變量，由于定義的匿名函數(shù)被立即調(diào)用，因此變量mo引用的是返回的對象。上面的單例模式返回的是一個Object對象，可以使用增強模塊模式實現(xiàn)自定義類型的單例模式：
復(fù)制代碼 代碼如下:
//增強模塊模式
//自定義構(gòu)造函數(shù)
function MyObject(name) {
this.name = name;
};
//自定義構(gòu)造函數(shù)
var mo = new function () {
//私有變量
var privateValue = "";
//增強模塊模式
var o = new MyObject("gyycyy");
o.publicValue = "public";
//訪問私有變量
o.getPrivateValue = function () {
return privateValue;
}
o.setPrivateValue = function (value) {
privateValue = value;
}
return o;
}();
mo.setPrivateValue("private value");
alert(mo.getPrivateValue());
alert(mo.publicFunction());
以上代碼示例實現(xiàn)了MyObject的單例模式。
最后需要提一點的是使用閉包有利也有弊，由于閉包作用域鏈引用包含函數(shù)的變量對象，因此會占用額外的內(nèi)存，而且進行變量查找是也需要通過作用域鏈，因此會消耗查找時間，閉包越深情況更嚴重。另外在IE(早些版本)中由于垃圾回收機制使用引用計數(shù)，因此可能會出現(xiàn)循環(huán)引用的情況，導(dǎo)致內(nèi)存泄露，如下示例：
復(fù)制代碼 代碼如下:
function assignHandler(){
var element = document.getElementById("someElement");
element.onclick = function(){
alert(element.id);
};
}
在上面的代碼中創(chuàng)建了一個閉包作為element的事件，該閉包引用了包含函數(shù)assingHandler的變量對象，而恰恰是對變量對象的引用使得element引用計數(shù)至少為1，因此element不會被回收，導(dǎo)致內(nèi)存泄露。修改的方法大家可以想想。
相關(guān)文章
underscore之Collections_動力節(jié)點Java學(xué)院整理
underscore為集合類對象提供了一致的接口。集合類是指Array和Object，暫不支持Map和Set。下面通過本文給大家分享underscore之Collections的相關(guān)知識，需要的的朋友參考下吧2017-07-07
JS雙向鏈表實現(xiàn)與使用方法示例(增加一個previous屬性實現(xiàn))
這篇文章主要介紹了JS雙向鏈表實現(xiàn)與使用方法,在之前鏈表的基礎(chǔ)上增加一個previous屬性實現(xiàn)的雙向鏈表功能,需要的朋友可以參考下2019-01-01
JavaScript的removeChild()函數(shù)用法詳解
removechild 函數(shù)可以刪除父元素的指定子元素，通過本文給大家介紹javascript的removeChild()函數(shù)用法，對js removechild函數(shù)相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要為大家詳細介紹了layui添加動態(tài)菜單與選項卡，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
基于javascript代碼實現(xiàn)通過點擊圖片顯示原圖片
這篇文章主要介紹了基于javascript代碼實現(xiàn)通過點擊圖片顯示原圖片的相關(guān)資料,需要的朋友可以參考下2015-11-11
JavaScript獲取DOM元素的11種方法總結(jié)
這篇文章主要介紹了JavaScript獲取DOM元素的11種方法總結(jié),本文用分4大類11個方法總結(jié)如何獲取DOM元素,需要的朋友可以參考下2015-04-04
本文主要分享了js實現(xiàn)簡單的網(wǎng)頁換膚效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了JS+CSS實現(xiàn)的豎向簡潔折疊菜單效果代碼,涉及JavaScript鏈?zhǔn)讲僮髋c元素遍歷等相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
JavaScript實現(xiàn)的冒泡排序法及統(tǒng)計相鄰數(shù)交換次數(shù)示例
這篇文章主要介紹了JavaScript實現(xiàn)的冒泡排序法及統(tǒng)計相鄰數(shù)交換次數(shù),結(jié)合實例形式分析了javascript冒泡排序的實現(xiàn)技巧及針對交換次數(shù)的統(tǒng)計方法,便于更直觀的了解冒泡排序算法,需要的朋友可以參考下2017-04-04
JS實現(xiàn)禁止高頻率連續(xù)點擊的方法【基于ES6語法】
這篇文章主要介紹了JS實現(xiàn)禁止高頻率連續(xù)點擊的方法,通過事件監(jiān)聽結(jié)合定時器實現(xiàn)針對高頻率點擊的限制操作,該功能基于ES6語法實現(xiàn),需要的朋友可以參考下2017-04-04