DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript中的私有/靜態屬性介紹
JavaScript中的私有/靜態屬性介紹
編輯:關於JavaScript     
•模擬塊級作用域
大家都知道在JavaScript中沒有塊級作用域的概念,我們可以通過使用閉包來模擬實現塊級作用域,看下面的示例:
復制代碼 代碼如下:
(function () {
for (var i = 0; i < 10; i++) {
//Do Nothing
}
alert(i); //輸出10
})();

第6行可以訪問到for循環塊中的變量i,如果我們稍微修改以上代碼,把for循環塊放置在閉包中,情況就不一樣了:
復制代碼 代碼如下:
(function () {
(function () {
for (var i = 0; i < 10; i++) {
//Do Nothing
}
})();
alert(i); //Error: 'i' is undefined
})();

在第8行訪問變了i時,出現錯誤,實現了我們想要的塊級作用域。
•私有屬性
在JavaScript中沒有塊級作用域的概念,同樣也沒有私有屬性的概念,但是存在私有變量。如果我們想把一些數據封裝隱藏起來要怎麼做呢?想必大家可能已經想到了,可以通過使用閉包+私有變量的方式來實現對象的私有屬性。
<1>.實例私有屬性
實例私有屬性的特點就是每個對象都會包含獨立的屬性,對象和對象之間沒有共享。為了實現這個目標,可以在構造函數中增加一個私有變量,然後定義公共方法來訪問這個私有變量,就如同其他OO語言的setter和getter一樣,下列示例就實現了實例的私有屬性:
復制代碼 代碼如下:
//實例私有變量
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

在上面的示例中創建的兩個對象moGyy和moCyy的getName返回不同的值,同時如果想調用私有方法同樣也需要公共接口。上面的示例中兩個公共函數之所以能訪問私有變量,是因為兩個公共函數都是閉包,而閉包的作用域鏈中包含了包含函數的變量對象,因此在進行變量查找時,順著作用域鏈可以訪問包含函數中的私有變量。在上面的示例中把公共方法添加到MyObject的原型中,目的是防止每次創建對象都創建功能一樣的兩個函數實例。
<2>.靜態私有屬性
在有些情況下我們可能希望數據全局共享,那麼可能就會用到靜態屬性,我們還是希望這個屬性為私有的,那麼怎樣實現靜態私有屬性呢?首先這個私有應該在構造函數的外部,為了把構造函數外部的變量和構造函數結合為一體,可以使用閉包把私有變量和構造函數都包含在其作用域中,為了在閉包外面訪問內部的構造函數,可以使用一個全局的變量來引用構造函數,如下代碼示例:
復制代碼 代碼如下:
//靜態私有變量和實例私有變量
(function () {
//定義私有變量
var staticPrivateValue = "";
//構造函數,把構織函數賦值給一個全局的變量
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"); //設置私有屬性的值
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調用getPrivateValue函數返回的值就是mo設置的值"gyycyy",為什麼會這樣呢?首先我們定義了一個匿名函數並立即調用函數,函數包含了私有變量staticPrivateValue,那麼為MyObject定義的兩個原型方法其實通過閉包的作用域鏈可以訪問在包含函數的私有變量,也就是getPrivateValue和setPrivateValue兩個函數的作用域鏈中都包含了匿名函數的變量對象,我們知道作用域鏈中包含的變量對象其實就是一個指針,所以創建的兩個對象通過公共方法房屋私有變量時,其實訪問的都是匿名函數的變量對象中的staticPrivateValue,因此實現變量實例間共享的目的。從傳統OO語言的角度來看我們實現的靜態屬性其實並不是真正意義上的靜態,只是實現了靜態屬性實例共享的特點。
<3>.模塊模式和增強模塊模式
還有一種全局共享數據的方式就是singleton, 可以使用模塊模式來實現Object類型的單例模式,也可以使用增強模塊模式實現自定義類型的單例模式,如下示例:
復制代碼 代碼如下:
//自定義構造函數
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());

模塊模式使用匿名函數來封裝內部實現,就上面的示例匿名函數中包含了私有變量privateValue,返回的對象中的公共函數通過閉包的作用域鏈訪問包含函數中的私有變量,由於定義的匿名函數被立即調用,因此變量mo引用的是返回的對象。上面的單例模式返回的是一個Object對象,可以使用增強模塊模式實現自定義類型的單例模式:
復制代碼 代碼如下:
//增強模塊模式
//自定義構造函數
function MyObject(name) {
this.name = name;
};
//自定義構造函數
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());

以上代碼示例實現了MyObject的單例模式。
最後需要提一點的是使用閉包有利也有弊,由於閉包作用域鏈引用包含函數的變量對象,因此會占用額外的內存,而且進行變量查找是也需要通過作用域鏈,因此會消耗查找時間,閉包越深情況更嚴重。另外在IE(早些版本)中由於垃圾回收機制使用引用計數,因此可能會出現循環引用的情況,導致內存洩露,如下示例:
復制代碼 代碼如下:
function assignHandler(){
var element = document.getElementById("someElement");
element.onclick = function(){
alert(element.id);
};
}

在上面的代碼中創建了一個閉包作為element的事件,該閉包引用了包含函數assingHandler的變量對象,而恰恰是對變量對象的引用使得element引用計數至少為1,因此element不會被回收,導致內存洩露。修改的方法大家可以想想。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved