JavaScript中的私有成員
JavaScript是世界上是被誤解得最厲害的編程語言。有些人認為它不具備“信息隱藏”的能力,因為JavaScript的對象沒有私有變量和方法。這是誤解。JavaScript對象可以擁有私有成員,下面我們來看看怎么做。(SharkUI.com注:JavaScript并不是真正擁有私有、公有等等OOP的特性,這篇譯文中提到的這些私有、公有、特權(quán)等特性,是利用JavaScript的其他特性(參看本文的“閉包”一節(jié))“模擬”出來的。感興趣的話可以搜索相關(guān)的文章來看,當然也可以不管這些,就當它是真正的OOP來用。Have fun!)
對象
JavaScript是建立在對象之上的。數(shù)組(Array)是對象,函數(shù)(Function)是對象,對象(Objects)當然也是對象。那什么是對象呢?對象是一組“名稱:值”對(name-value pair)的集合。名稱是字符串,值卻可以是字符串、數(shù)值、布爾或?qū)ο螅ò〝?shù)組和函數(shù))。對象通常是用哈希表來實現(xiàn)的,以便可以快速地取值。
如果值是一個函數(shù),我們就可以把它當作一個“方法”。當對象的一個方法被執(zhí)行,變量this就被設(shè)為對象本身。如此,方法就可以通過this變量來訪問對象的實例。
對象可以通過“構(gòu)造器(constructor)”來創(chuàng)建。構(gòu)造器是一個擁有初始化對象的函數(shù)。構(gòu)造器提供了類似其他語言中的“類(class)”所提供的特性和功能,包括靜態(tài)變量和方法。
公有
對象的所有成員都是公有成員。任何函數(shù)都可以訪問、修改或者刪除這些成員,當然也可以添加新的成員。給對象添加成員的兩種主要方法:
通過構(gòu)造器
這種方法一般用來初始化對象實例的公有變量。構(gòu)造器的this變量被用來給對象添加成員:
function Container(param) {
this.member = param;
}
構(gòu)造一個新的對象:
var myContainer = new Container('abc');
然后,公有變量 myContainer.member 就擁有了值 'abc'。
通過原型(prototype)
這種方法通常用來添加公有方法。在對象本身搜尋一個成員但沒有找到時,就使用構(gòu)造器的原型(prototype)成員。這種原型機制實現(xiàn)了面向?qū)ο笏^的 “繼承(inheritance)”,同時也節(jié)省了內(nèi)存。給創(chuàng)建自同一個構(gòu)造器的所有的對象加上一個方法,只需要給構(gòu)造器的prototype增加一個函數(shù):
Container.prototype.stamp = function (string) {
return this.member + string;
}
然后我們就可以調(diào)用這個方法:
myContainer.stamp('def')
返回'abcdef'。
私有
私有(Private)成員是由構(gòu)造器創(chuàng)建的。通常構(gòu)造器中用var聲明的變量和函數(shù)參數(shù)成為私有成員。
function Container(param) {
this.member = param;
var secret = 3;
var self = this;
}
這個構(gòu)造器創(chuàng)建了三個私有的實例變量:param,secret和self。
function Container(param) {
function dec() {
if (secret > 0) {
secret -= 1;
return true;
} else {
return false;
}
}
this.member = param;
var secret = 3;
var self = this;
}
私有方法dec會檢查實例變量secret,如果它大于0,自減1并返回true;如果它小于0,返回false。這樣就實現(xiàn)了由這個架造器所創(chuàng)建對象的dec函數(shù)只能用三次的功能。
按慣例,我們創(chuàng)建了一個私有變量self。私有方法可以通過它來訪問到對象本身。但這只是一種權(quán)宜之計,因為《ECMAScript Language Specification》中有一個錯誤,使得內(nèi)部函數(shù)的this變量被設(shè)置成一個錯誤值。
公有方法(SharkUI.com注:即上文說的通過prototype創(chuàng)建的方法)是無法調(diào)用私有方法的,所以為了能使用私有方法,我們需要引入特權(quán)方法(privileged method)。
特權(quán)
一個特權(quán)方法可以訪問私有變量和方法,而它本身可以被公有方法和外界訪問。你可以刪除或替換一個特權(quán)方法,但不能修改它,也不能強制它放棄自己的密秘(SharkUI.com注:原文如此,可能是指它的特權(quán),關(guān)于這點請高手指教)。
特權(quán)方法是在構(gòu)造器內(nèi)部通過this來創(chuàng)建的。
function Container(param) {
function dec() {
if (secret > 0) {
secret -= 1;
return true;
} else {
return false;
}
}
this.member = param;
var secret = 3;
var self = this;
this.service = function () {
if (dec()) {
return self.member;
} else {
return null;
}
};
}
service是一個特權(quán)方法。前三次調(diào)用myContainer.service()將返回'abc',之后將返回null。service通過調(diào)用私有方法dec來訪問私有變量secret。對于其他對象和方法來說,可以訪問到service,但不能直接訪問到私有的成員。
閉包
這種公有、私有和特權(quán)成員模式的存在是由于JavaScript的內(nèi)在機制:閉包。這意味著一個內(nèi)部函數(shù)永遠可以訪問它外部函數(shù)的變量和參數(shù),即使外部函數(shù)已經(jīng)返回。這是JavaScript語言非常強大的一個特性。目前還沒有關(guān)于JavaScript編程的書籍展示了如何來利用它,它們甚至都沒有提到這一點。
私有和特權(quán)成員只能在對象初始化的時候創(chuàng)建,而公有成員可以被隨時添加進來。
模式
公有
function Constructor(...) {
this.membername = value;
}
Constructor.prototype.membername = value;
私有
function Constructor(...) {
var self = this;
var membername = value;
function membername(...) {...}
}
注:這句代碼:
function membername(...) {...}
事實上是以下代碼的簡略寫法
var membername = function membername(...) {...};
特權(quán)
function Constructor(...) {
this.membername = function (...) {...};
}
后記
Douglas Crockford的這篇文章為我們寫出更優(yōu)美的JavaSciprt程序奠定了基礎(chǔ),為我們創(chuàng)建出更合理的面向?qū)ο髴煤涂蚣軒砹丝赡?。在這篇譯文快要完成的時候,驚詫的發(fā)現(xiàn)作者網(wǎng)站上出現(xiàn)了一個本文中文版的鏈接。好事!有越來越多的中國人開始關(guān)注這些“邊邊角角”的技術(shù)。雖然做了重復工作,但一樣希望各位能從這篇文章中有所收益。也希望有更多的人能投入到原創(chuàng)和翻譯前端技術(shù)文章中來,在多數(shù)人浮躁的時候,我們需要更多基礎(chǔ)性的工作。一周一篇不多,一年一篇不少,只要開始了就行!
相關(guān)文章
簡易版本JSON.stringify的實現(xiàn)及其六大特性詳解
最近做項目發(fā)現(xiàn)JSON.stringify()使用場景真的挺多,我們都知道JSON.stringify()的作用是將JavaScript對象轉(zhuǎn)換為JSON字符串,下面這篇文章主要給大家介紹了JSON.stringify的實現(xiàn)及其六大特性的相關(guān)資料,需要的朋友可以參考下2021-10-10
jquery 實現(xiàn)輸入郵箱時自動補全下拉提示功能
大家在做Web項目,都會有注冊登錄模塊,如果是郵箱注冊,想要在輸入@后觸發(fā)下拉框顯示各個郵箱的功能。下面介紹一款jQuery實現(xiàn)輸入郵箱的時候,可自動補全郵箱地址,也可稱為是“輸入提示”的功能,比如輸入aaa時,自動變成aaa@163.com,有效提升網(wǎng)頁的人性化體驗2015-10-10
通過繼承IHttpHandle實現(xiàn)JS插件的組織與管理
最近,項目中的用到的Js插件越來越多,有的是用原生javascript寫的,有的是調(diào)用的jquery插件,頁面上Js和Css文件的引用也越來越混亂,而且Js文件之間還有引用先后的依賴關(guān)系2010-07-07
springMVC + easyui + $.ajaxFileUpload實現(xiàn)文件上傳注意事項
在使用easyUI做前端樣式展示時,遇到了文件上傳的問題,而且是在彈出層中提交表單,想做到不刷新頁面,所以選擇了使用ajaxFileUpload插件。下面通過本文給大家分享springMVC + easyui + $.ajaxFileUpload實現(xiàn)文件上傳注意事項,需要的朋友參考下吧2017-04-04
JS控件ASP.NET的treeview控件全選或者取消(示例代碼)
本篇文章主要是對JS控件ASP.NET的treeview控件全選或者取消的示例代碼進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12

