html
站在用戶的角度思考問題,與客戶深入溝通,找到龍南網(wǎng)站設計與龍南網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設計與互聯(lián)網(wǎng)技術結合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:成都做網(wǎng)站、成都網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、申請域名、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋龍南地區(qū)。
head
titleJavaScript 對象方法 類方法 原型方法的區(qū)別;私有屬性 公有屬性 公有靜態(tài)屬性的區(qū)別/title
script language="javascript" type="text/javascript"
//定義Person類
function Person(name){
//私有屬性MyTime、ID
var MyTime = " 2010-12-12";
var ID="773C0D35-298A-4660-B803-9EADC250ED61";
//公有屬性MyName
this.MyName = name;
//對象方法(實例化后才能調用) 位置:Person類的內(nèi)部 語法格式:this.方法名稱 = function([參數(shù)...]){ 語句行; }
this.ShowMyName = function() {
alert("My name is " + this.MyName + MyTime );
}
//this.Init();
}
//類方法(實際是靜態(tài)方法直接調用) 位置:Person類的外部 語法格式:類名稱.方法名稱 = function([參數(shù)...]){ 語句行; }
Person.EnglishandFrench = function() {
//訪問靜態(tài)屬性 語法格式:類名稱.公有靜態(tài)屬性;或者使用語法格式:this.公有靜態(tài)屬性;
alert(Person.NAME + " can speak " + this.ENGLISH +" and "+ Person.prototype.FRENCH);
}
//原型方法(實例化后調用或者直接調用) 位置:Person類的外部 語法格式:類名稱.prototype.方法名稱 = function([參數(shù)...]){ 語句行; }
Person.prototype.ChineseandFrech = function() {
//編寫一個原型方法相當擴充了一個對象方法,稍作變化可復制到類的內(nèi)部成為一個對象方法;
//訪問公有屬性 語法格式:this.公有屬性;
//訪問公有靜態(tài)屬性 語法格式:類名稱.公有靜態(tài)屬性;
alert(this.MyName + " can speak " + Person.CHINESE + " and " + this.FRENCH+", "+ Person.prototype.FRENCH +" do better.");
}
//只有原型方法執(zhí)行后內(nèi)部擴充到Person類的屬性才能生效
Person.prototype.Init = function() {
//定義公有屬性PersonNo
this.PersonNo = "";
//定義公有數(shù)組屬性 [] 等價于 new Array();它現(xiàn)在是幾維數(shù)組或是混合數(shù)組要根據(jù)賦值后才知道
this.ArrInfo = [];
//定義一個json對象屬性
this.jsonData = {};
}
//公有靜態(tài)屬性 位置:Person類的外部
Person.NAME="Jack";
Person.ENGLISH="in english";
Person.CHINESE="in chinese";
//原型屬性(當作公有靜態(tài)屬性使用 語法格式:類名稱.prototype.公有靜態(tài)屬性;不能使用語法格式:this.公有靜態(tài)屬性;)
//原型屬性(當作公有屬性使用 語法格式:類名稱.prototype.公有屬性; 或者使用語法格式:this.公有屬性;)
Person.prototype.FRENCH="in french";
var p = new Person("Rose");//實例化
p.ShowMyName();
Person.EnglishandFrench();
p.ChineseandFrech();
//ChineseandFrech()當作靜態(tài)方法直接調用,請注意 MyName是對象屬性 原型方法內(nèi)不能調用它
//當作靜態(tài)方法直接調用時內(nèi)部成員必須都是靜態(tài)屬性,下面這樣調用是錯誤的;
Person.prototype.ChineseandFrech();
//使用this.Init();這行代碼放在定義Person類內(nèi)部也一樣初始化
p.Init();
p.PersonNo = "A1B2C3";
alert(p.PersonNo);
p.ArrInfo[0]='123';
alert(p.ArrInfo[0]);
p.ArrInfo[1]=["111","222","333"];
alert(p.ArrInfo[1][2]);
p.jsonData = { flash_url : "../swfupload/swfupload.swf",
custom_settings : {
upload_target : "divFileProgressContainer"
},
debug: false };
alert(p.jsonData.flash_url+" "+p.jsonData.custom_settings.upload_target);
/script
/head
body
divE-mail:zhengzizhi@yahoo.com.cn/div
div盡量將方法定義為原型方法,原型方法避免了每次調用構造函數(shù)時對屬性或方法的構造,節(jié)省空間,創(chuàng)建對象快./div
/body
/html
作者:寸志
鏈接:
來源:知乎
著作權歸作者所有,轉載請聯(lián)系作者獲得授權。
在JavaScript中談私有屬性和私有方法就是扯淡,"private"還杵在保留字的位置上,不知道什么時候提上來實現(xiàn)真正的私有。那今天咱就來討論下如何以JS當前的特性來實現(xiàn)私有成員。
閉包
(比較枯燥,可以跳過本單元)JavaScript實現(xiàn)私有屬性必須依賴閉包特性(可以先通過該鏈接補習)。下面也稍微補習下,看下面的例子:
var uniqueId;
uniqueId = (function() {
var index;
index = 0;
return function(prefix) {
return prefix + "_" + index++;
};
})();
//c_0
console.log(uniqueId("c"));
//c_1
console.log(uniqueId("c"));
通常所說的或所看到的閉包就是這樣子——(function(){})(),但這不是它的全部或者是本質。在定義uniqueId這個函數(shù)的時候,我們使用了匿名函數(shù)表達式(請注意(function(){})是函數(shù)表達式)定義了一個函數(shù)且立即執(zhí)行,把function(prefix){/*some code*/}作為返回值賦值給了quniqueId,此時這個function(prefix){/*some code*/}已經(jīng)生成了函數(shù)實例,在函數(shù)實例生成的過程中:
【1】通俗的講將index這個外部函數(shù)定義的變量記住了(為什么要記???沒記住你讓我怎么給你計算prefix+"_"+index的值嘛?。?;
【2】再次我們沒法通過什么this.index或者someObj.index引用到index,改變其值了,(function(){})()這個一執(zhí)行完,局部變量index在外面怎么調得到嘛;
【3】怎么調得到,只能靠function(prefix){/*some code*/},因為我們還能通過它間接的取得或改變index值。這就是閉包了。
比較學術的解釋:
【1】JS是詞法作用域(就是程序看上去啥樣就啥樣)的,使用一個叫做[[scope]]的內(nèi)部屬性來標識每個執(zhí)行上下文的作用域(我可以讀寫哪些變量啊,調用哪些哪些函數(shù)?。幻總€函數(shù)執(zhí)行時都由該[scope]作用域加上活動對象來構成真實的執(zhí)行上下文;
【2】而這個執(zhí)行上下文[[scope]]屬性是在函數(shù)生成時就指定的了,不嚴格的講為生成該函數(shù)時的執(zhí)行上下文;
【3】于是function(prefix){/*some code*/}生成時其內(nèi)部的[[scope]]屬性引用了(function(){})()執(zhí)行上下文的scope鏈;該scope鏈即包含了該函數(shù)的[[scope]]和活動對象,且活動對象包含了index的定義引用;
【4】GC的回收規(guī)則,沒人用我我就是垃圾!因此uniqueId引用了function(prefix){/*some code*/}函數(shù)實例,而該函數(shù)實例的[[scope]]引用了(function(){})()執(zhí)行期的scope鏈,其包含活動對象,即有index的引用;ok,index還有人引用它,它不是垃圾,因此閉包形成了,我們可以通過uniqueId函數(shù)間接的讀取或者修改index。
總結:其實學術解釋和通俗解釋一個意思,不過閉包其實是相對的,并不是我們不能修改index,只是需要間接的方法(是不是有點私有屬性和私有方法的感覺)。
私有屬性和私有方法
相對來說,構造單例對象的私有屬性和方法都比較簡單。
var aira;
aira = (function () {
var __getName, __name;
//private variable
__name = "HTC mobile";
//private method
__getName = function () {
return __name;
};
aira = {
init: function () {
//change private variable inner
__name = "aira";
},
hello: function () {
//execute private method inner
console.log("hello,my name is " + (__getName()));
}
};
return aira;
})();
aira.init();
//hello,my name is aira
aira.hello();
使用雙下劃線"__"表示私有;aira手機有一個私有屬性__name和私有方法__getName;我們可以在init中修改__name,在hello中調用__getName,且在閉包外面無法直接調用和修改這兩個成員。我們做到了,這就是單例對象的私有屬性和私有方法。
但是更確切的說,其實aira能夠有私有屬性和方法僅僅是因為它有私有的一個閉包,即init和hello成員的[[scope]]都引用了閉包的活動對象。
然而,一個構造函數(shù)(類)的私有屬性和方法就么這么簡單了。
var Phone, aira;
//wrap by function
Phone = function (name) {
var phone;
phone = (function () {
var __getName, __name;
__name = name;
__getName = function () {
return __name;
};
phone = {
init: function (number) {
__name += "#" + number;
},
hello: function () {
console.log("hello,my name is " + (__getName()));
}
};
return phone;
})();
return phone;
};
aira1 = Phone("aira");
aira1.init(1);
//hello,my name is aira#1
aira1.hello();
aira2 = Phone("aira");
aira2.init(2);
//hello,my name is aira#2
aira2.hello();
我們先來簡單的將單例對象的構造包裹一個函數(shù),實現(xiàn)產(chǎn)生不同的對象。我們可以說Phone是一個類,因為它可以產(chǎn)生不同的對象,有類似的功能。同樣aira1和aira2都有自己閉包,于是都有自己的私有屬性和方法。
我想對自己說,別逗了你,這樣就行啦?!JS中類的概念就是構造函數(shù)。
var Phone, aira1, aira2;
Phone = function (name) {
var __getName, __name;
__name = name;
__getName = function () {
return __name;
};
this.init = function (number) {
__name += "#" + number;
};
this.hello = function () {
console.log("hello,my name is " + (__getName()));
};
};
aira1 = new Phone("aira");
aira1.init(1);
//hello,my name is aira#1
aira1.hello();
aira2 = new Phone("aira");
aira2.init(1);
//hello,my name is aira#2
aira2.hello();
Phone構造函數(shù)其實就是閉包的功能,每個Phone實例的init和hello都能引用其構造期間的形成的私有的__name和__getName。
真的,我已經(jīng)無力回天了,每個實例必須由閉包產(chǎn)生私有屬性和方法,因此只能在該閉包中定義公共方法暴露出來(比如說init和hello),這就意味著每次構造一個實例我們都必須生成init和hello的函數(shù)實例,這是多么的低效,因為JS有原型。
var Phone, aira;
Phone = function (name) {
var __getName, __name;
__name = name;
__getName = function () {
return __name;
};
};
Phone.prototype.init = function (number) {
__name += "#" + number;
};
Phone.prototype.hello = function () {
console.log("hello,my name is " + (__getName()));
};
aira = new Phone("aira");
上面的代碼是錯誤的(在init中的__name是全局的,hello中的__getName方法因為不存在,所以會報錯),這就是問題所在,能夠引用私有屬性和變量的公共方法必須在閉包中定義,然后暴露出來,然而原型方法并不能在閉包中定義。
曲線救國:
再來確定下什么是私有屬性和私有方法,即每個類實例都擁有且只能在類內(nèi)訪問的變量和函數(shù)。也就是說變量和方法只能由類的方法來調用。說到這里,我們或許可以嘗試下,不讓類外的方法調用類的私有方法。
var inner, outer;
outer = function () {
inner();
};
inner = function () {
console.log(arguments.callee.caller);
};
/*
function(){
inner();
}
*/
outer();
從arguments的callee中可獲得當前的執(zhí)行函數(shù)inner,而inner的動態(tài)屬性caller指向了調用inner的外層函數(shù)outer,由此看來我們可以使用arguments.callee.caller來確定函數(shù)的執(zhí)行環(huán)境,實現(xiàn)私有方法和屬性。
var Phone, aira1, aira2;
Function.prototype.__public = function (klass) {
this.klass = klass;
return this;
};
Function.prototype.__private = function () {
var that;
that = this;
return function () {
if (this.constructor === arguments.callee.caller.klass) {
return that.apply(this, arguments);
} else {
throw new Error("" + that + " is a private method!");
}
};
};
Phone = function (name) {
var __name;
__name = name;
this.__getName = (function () {
return __name;
}).__private();
this.__setName = (function (name) {
__name = name;
}).__private();
};
Phone.prototype.init = (function (number) {
this.__setName(this.__getName() + "#" + number);
}).__public(Phone);
Phone.prototype.hello = (function () {
console.log("hello,my name is " + (this.__getName()));
}).__public(Phone);
aira1 = new Phone("aira");
aira1.init(1);
//hello,my name is aira#1
aira1.hello();
aira2 = new Phone("aira");
aira2.init(1);
//hello,my name is aira#2
aira2.hello();
//hello,my name is aira#1
aira1.hello();
try {
aira1.__getName();
} catch (e) {
/*
Error Object
message:"function () {return __name;} is a private method!"
*/
console.log(e);
}
【1】請原諒我給Function原型上添加了兩個方法__public和__private以此來實現(xiàn)私有方法的調用環(huán)境檢測;
【2】其次,我無法給私有屬性添加檢測,所以私有屬性直接不可見,使用私有的get,set方法訪問;
【3】本身在aira1外部調用時我們還是能看到__getName和__setName方法,只是不能調用而已;
【4】唯一好的一點是原型方法(公共方法)終于可以從構造函數(shù)閉包中解放出來。
私有約定
var Phone, aira1, aira2;
Phone = function (name) {
//"__" private variable
this.__name = name;
};
Phone.prototype.init = function (number) {
this.__name += "#" + number;
};
Phone.prototype.hello = function () {
console.log("hello,my name is " + (this.__getName()));
};
//"__" private method
Phone.prototype.__getName = function () {
return this.__name;
};
aira1 = new Phone("aira");
aira1.init(1);
//hello,my name is aira#1
aira1.hello();
aira2 = new Phone("aira");
aira2.init(2);
//hello,my name is aira#2
aira2.hello();
以雙下劃線“__”表示私有,用最近看到的一代碼注釋來解釋:“神奇,勿動”。
這是私有方法么?
var Phone, aira1, aira2;
Phone = (function () {
var __getName, __name;
__getName = function () {
return __name;
};
Phone = function (name) {
__name = name;
};
Phone.prototype.init = function (number) {
__name += "#" + number;
};
Phone.prototype.hello = function () {
console.log("hello,my name is " + (__getName()));
};
return Phone;
})();
aira1 = new Phone("aira");
aira1.init(1);
//hello,my name is aira#1 right!
aira1.hello();
aira2 = new Phone("aira");
aira2.init(2);
//hello,my name is aira#2 right!
aira2.hello();
//hello,my name is aira#2 wrong!
aira1.hello();
試圖用閉包包住構造函數(shù),形成閉包,但是得到的結果是__name和__getName其實都是類的私有屬性,而不是實例的。aira1和aira2共用了__name和__getName。
這個私有 是對 外面訪問而言的。
例如 你可以調用 testObject1.test1()
但是 你不可以使用 testObject1.privateStaticVariable 來調用這個變量。外面是訪問不了這個變量的,只有類中的 test 1 2 3這3個函數(shù)能夠訪問和修改。
this.getData=function(){var data=Data;return data}
哦,是了,是我搞錯了。
因為你操作的是一個數(shù)組對象,所以,不能簡單的用=號來復制數(shù)組,這樣只會是對原數(shù)組的引用。
所以,你要用一種方法來復制數(shù)組。
用遍歷法雖然顯得比較笨,但也是效果最好的,不會造成其它問題的方法。
所以,修改如下:
this.getData=function(){
var data = [];
for(var i=0;iData.length;i++){
data[i] = Data[i];
}
return data;
}
剛剛打錯一個字母,已修改
在
Javascript
中,訪問私有成員的成員方法可以寫在類的原型中
有一個Person類,擁有name這一私有屬性。
//
Javascript
code:
var
Person
=
(function
()
{
var
name;
var
P
=
function
(theName)
{
name
=
theName;
this.getName
=
function
()
{
return
name;
};
};
P.
prototype
.setName
=
function
(newName)
{
name
=
newName;
};
return
P;
}());
在以上代碼中name變成了靜態(tài)私有變量而不是成員私有變量。
雖然可以創(chuàng)建靜態(tài)字典,但是代碼的可讀性會降低。
你腳本的位置放錯了,你執(zhí)行那段腳本時,html代碼還沒解析完,dom也沒生成好。所以報錯。
這樣寫,或者在onload后再調用。
body
form name="js" method="post"
/form
/body
script
function user(){
var form=document.getElementsByTagName("form")[0];
this.name=function(){
return form.getAttribute("name");
};
}
var user=new user();
alert(user.name());
/script