JavaScript中的私有/靜態(tài)屬性介紹

2024-05-06 15:45:39

字體：大中小

供稿：網(wǎng)友

javascript中沒(méi)有塊級(jí)作用域的概念，但是它卻有私有變量的存在，今天這篇文章是錯(cuò)新技術(shù)頻道小編為大家?guī)?lái)的JavaScript中的私有/靜態(tài)屬性介紹，希望對(duì)你學(xué)習(xí)這方面知識(shí)有所幫助！

?模擬塊級(jí)作用域
大家都知道在JavaScript中沒(méi)有塊級(jí)作用域的概念，我們可以通過(guò)使用閉包來(lái)模擬實(shí)現(xiàn)塊級(jí)作用域，看下面的示例：

(function () {
for (var i = 0; i < 10; i++) {
//Do Nothing
}
alert(i); //輸出10
})();

第6行可以訪問(wèn)到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行訪問(wèn)變了i時(shí)，出現(xiàn)錯(cuò)誤，實(shí)現(xiàn)了我們想要的塊級(jí)作用域。
?私有屬性
在JavaScript中沒(méi)有塊級(jí)作用域的概念，同樣也沒(méi)有私有屬性的概念，但是存在私有變量。如果我們想把一些數(shù)據(jù)封裝隱藏起來(lái)要怎么做呢？想必大家可能已經(jīng)想到了，可以通過(guò)使用閉包+私有變量的方式來(lái)實(shí)現(xiàn)對(duì)象的私有屬性。
<1>.實(shí)例私有屬性
實(shí)例私有屬性的特點(diǎn)就是每個(gè)對(duì)象都會(huì)包含獨(dú)立的屬性，對(duì)象和對(duì)象之間沒(méi)有共享。為了實(shí)現(xiàn)這個(gè)目標(biāo)，可以在構(gòu)造函數(shù)中增加一個(gè)私有變量，然后定義公共方法來(lái)訪問(wèn)這個(gè)私有變量，就如同其他OO語(yǔ)言的setter和getter一樣，下列示例就實(shí)現(xiàn)了實(shí)例的私有屬性：

//實(shí)例私有變量
function MyObject(name) {
//定義私有變量
//注意：此處沒(méi)有用this.name，如果使用this.name變成公共屬性了
var privateName = name;
//定義私有熟悉
var privateFunction = function () {
return "Private Function";
}
//公共方法訪問(wèn)私有熟悉
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)建的兩個(gè)對(duì)象moGyy和moCyy的getName返回不同的值，同時(shí)如果想調(diào)用私有方法同樣也需要公共接口。上面的示例中兩個(gè)公共函數(shù)之所以能訪問(wèn)私有變量，是因?yàn)閮蓚€(gè)公共函數(shù)都是閉包，而閉包的作用域鏈中包含了包含函數(shù)的變量對(duì)象，因此在進(jìn)行變量查找時(shí)，順著作用域鏈可以訪問(wèn)包含函數(shù)中的私有變量。在上面的示例中把公共方法添加到MyObject的原型中，目的是防止每次創(chuàng)建對(duì)象都創(chuàng)建功能一樣的兩個(gè)函數(shù)實(shí)例。
<2>.靜態(tài)私有屬性
在有些情況下我們可能希望數(shù)據(jù)全局共享，那么可能就會(huì)用到靜態(tài)屬性，我們還是希望這個(gè)屬性為私有的，那么怎樣實(shí)現(xiàn)靜態(tài)私有屬性呢？首先這個(gè)私有應(yīng)該在構(gòu)造函數(shù)的外部，為了把構(gòu)造函數(shù)外部的變量和構(gòu)造函數(shù)結(jié)合為一體，可以使用閉包把私有變量和構(gòu)造函數(shù)都包含在其作用域中，為了在閉包外面訪問(wèn)內(nèi)部的構(gòu)造函數(shù)，可以使用一個(gè)全局的變量來(lái)引用構(gòu)造函數(shù)，如下代碼示例：

//靜態(tài)私有變量和實(shí)例私有變量
(function () {
//定義私有變量
var staticPrivateValue = "";
//構(gòu)造函數(shù)，把構(gòu)織函數(shù)賦值給一個(gè)全局的變量
MyObject = function (name) {
//定義實(shí)例變量
this.name = name;
};
//定義兩個(gè)公共方法用于訪問(wèn)私有變量，再一次把公共方法添加到原型中
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

從上面的代碼來(lái)看mo1調(diào)用getPrivateValue函數(shù)返回的值就是mo設(shè)置的值"gyycyy"，為什么會(huì)這樣呢？首先我們定義了一個(gè)匿名函數(shù)并立即調(diào)用函數(shù)，函數(shù)包含了私有變量staticPrivateValue，那么為MyObject定義的兩個(gè)原型方法其實(shí)通過(guò)閉包的作用域鏈可以訪問(wèn)在包含函數(shù)的私有變量，也就是getPrivateValue和setPrivateValue兩個(gè)函數(shù)的作用域鏈中都包含了匿名函數(shù)的變量對(duì)象，我們知道作用域鏈中包含的變量對(duì)象其實(shí)就是一個(gè)指針，所以創(chuàng)建的兩個(gè)對(duì)象通過(guò)公共方法房屋私有變量時(shí)，其實(shí)訪問(wèn)的都是匿名函數(shù)的變量對(duì)象中的staticPrivateValue，因此實(shí)現(xiàn)變量實(shí)例間共享的目的。從傳統(tǒng)OO語(yǔ)言的角度來(lái)看我們實(shí)現(xiàn)的靜態(tài)屬性其實(shí)并不是真正意義上的靜態(tài)，只是實(shí)現(xiàn)了靜態(tài)屬性實(shí)例共享的特點(diǎn)。
<3>.模塊模式和增強(qiáng)模塊模式
還有一種全局共享數(shù)據(jù)的方式就是singleton，可以使用模塊模式來(lái)實(shí)現(xiàn)Object類(lèi)型的單例模式，也可以使用增強(qiáng)模塊模式實(shí)現(xiàn)自定義類(lèi)型的單例模式，如下示例：

//自定義構(gòu)造函數(shù)
var mo = new function () {
//私有變量
var privateValue = "";
//普通模塊模式
return {
publicValue: "public",
//訪問(wèn)私有變量
getPrivateValue: function () {
return privateValue;
},
setPrivateValue: function (value) {
privateValue = value;
}
}
}();
mo.setPrivateValue("private value");
alert(mo.getPrivateValue());
alert(mo.publicFunction());

模塊模式使用匿名函數(shù)來(lái)封裝內(nèi)部實(shí)現(xiàn)，就上面的示例匿名函數(shù)中包含了私有變量privateValue，返回的對(duì)象中的公共函數(shù)通過(guò)閉包的作用域鏈訪問(wèn)包含函數(shù)中的私有變量，由于定義的匿名函數(shù)被立即調(diào)用，因此變量mo引用的是返回的對(duì)象。上面的單例模式返回的是一個(gè)Object對(duì)象，可以使用增強(qiáng)模塊模式實(shí)現(xiàn)自定義類(lèi)型的單例模式：

//增強(qiáng)模塊模式
//自定義構(gòu)造函數(shù)
function MyObject(name) {
this.name = name;
};
//自定義構(gòu)造函數(shù)
var mo = new function () {
//私有變量
var privateValue = "";
//增強(qiáng)模塊模式
var o = new MyObject("gyycyy");
o.publicValue = "public";
//訪問(wèn)私有變量
o.getPrivateValue = function () {
return privateValue;
}
o.setPrivateValue = function (value) {
privateValue = value;
}
return o;
}();
mo.setPrivateValue("private value");
alert(mo.getPrivateValue());
alert(mo.publicFunction());

以上代碼示例實(shí)現(xiàn)了MyObject的單例模式。
最后需要提一點(diǎn)的是使用閉包有利也有弊，由于閉包作用域鏈引用包含函數(shù)的變量對(duì)象，因此會(huì)占用額外的內(nèi)存，而且進(jìn)行變量查找是也需要通過(guò)作用域鏈，因此會(huì)消耗查找時(shí)間，閉包越深情況更嚴(yán)重。另外在IE(早些版本)中由于垃圾回收機(jī)制使用引用計(jì)數(shù)，因此可能會(huì)出現(xiàn)循環(huán)引用的情況，導(dǎo)致內(nèi)存泄露，如下示例：

function assignHandler(){
var element = document.getElementById("someElement");
element.onclick = function(){
alert(element.id);
};
}

在上面的代碼中創(chuàng)建了一個(gè)閉包作為element的事件，該閉包引用了包含函數(shù)assingHandler的變量對(duì)象，而恰恰是對(duì)變量對(duì)象的引用使得element引用計(jì)數(shù)至少為1，因此element不會(huì)被回收，導(dǎo)致內(nèi)存泄露。修改的方法大家可以想想。

以上就是JavaScript中的私有/靜態(tài)屬性介紹，如果大家愛(ài)還想了解更多專(zhuān)業(yè)知識(shí)，可以來(lái)錯(cuò)新技術(shù)頻道多加學(xué)習(xí)，相信這里的內(nèi)容一定能滿(mǎn)足你的需要。

上一篇：JavaScript基礎(chǔ)知識(shí)之?dāng)?shù)據(jù)類(lèi)型

下一篇：13 個(gè)JavaScript 性能提升技巧