|
|
那天用到prototype.js于是打開看看，才看幾行就滿頭霧水，原因是對(duì)js的面向?qū)ο蟛皇呛苁煜ぃ谑前俣?google了一把，最后終于算小有收獲，寫此紀(jì)念一下^_^。
prototype.js代碼片段
復(fù)制代碼 代碼如下:
var Class = {
create: function() {
return function() {
this.initialize.apply(this , arguments);
}
}
}
// Class使用方法如下
var A = Class.create();
A. prototype={
initialize:function(v){
this .value=v;
}
showValue:function(){
alert(this.value);
}
}
var a = new A(‘helloWord!');
a. showValue();//彈出對(duì)話框helloWord！
l initialize是什么?
l apply方法是干什么的？
l arguments變量呢？
l 為什么new A后就會(huì)執(zhí)行initialize方法？
尋找答案：
二、 Js的面向?qū)ο?/STRONG>
initialize是什么?
只不過(guò)是個(gè)變量，代表一個(gè)方法，用途是類的構(gòu)造函數(shù)。
其具體功能靠js的面向?qū)ο笾С郑敲磈s的面向?qū)ο笫鞘裁礃幼拥哪牵亢?a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java 的有什么相同與不同？
看代碼：
復(fù)制代碼 代碼如下:
var ClassName = function(v){
this.value=v;
this.getValue=function(){
return this.value;
}
this.setValue=function(v){
this.value=v;
}
}
那么JS中的函數(shù)和類有什么不同呢？
其實(shí)是一樣的，ClassName就是一個(gè)函數(shù)，當(dāng)出現(xiàn)在new后面的時(shí)候就作為一個(gè)構(gòu)造函數(shù)來(lái)構(gòu)造對(duì)象。
如
復(fù)制代碼 代碼如下:
var objectName1 = new ClassName(“a”);//得到一個(gè)對(duì)象
其中objectName1就是執(zhí)行ClassName構(gòu)造函數(shù)后得到的對(duì)象，而在ClassName函數(shù)中的this指的就是new之后構(gòu)造出來(lái)的對(duì)象，所以objectName1會(huì)后一個(gè)屬性和兩個(gè)方法。可以通過(guò)這樣來(lái)調(diào)用他們：
復(fù)制代碼 代碼如下:
objectName1.setValue(''hello'');
alert(objectName1.getValue());//對(duì)話框hello
alert(objectName1.value) ;//對(duì)話框hello
那么
復(fù)制代碼 代碼如下:
var objectName2 = ClassName(“b”);//得到一個(gè)對(duì)象
這樣objectName2得到的是什么呢？顯然是方法的返回值，這里ClassName只作為了一個(gè)普通的函數(shù)（雖然首字母大寫了）。但是在之前寫的ClassName中并沒有返回值，所以objectName2會(huì)是undifinded那么“b”賦給誰(shuí)了呢？在這并沒有產(chǎn)生一個(gè)對(duì)象，而只是單純的執(zhí)行這個(gè)方法，所以這個(gè)“b”賦值給了調(diào)用這個(gè)方法的對(duì)象window，證據(jù)如下：
var objectName2 = ClassName(“b”);//得到一個(gè)對(duì)象
alert(window.value)；//對(duì)話框b
所以JS中的所有function都是一樣的，但是用途可能是不同的（用作構(gòu)造對(duì)象抑或是執(zhí)行一個(gè)過(guò)程）。
下面該回到主題了initialize是干什么的？
復(fù)制代碼 代碼如下:
var Class = {
create: function() {
return function() {
this.initialize.apply(this , arguments);
}
}
}
var A = Class.create();
這段代碼是構(gòu)造個(gè)一個(gè)function復(fù)制給A，這個(gè)function是
復(fù)制代碼 代碼如下:
function() {
this.initialize.apply(this , arguments);
}
并且后面這個(gè)方法是用來(lái)做構(gòu)造函數(shù)的。當(dāng)使用這個(gè)構(gòu)造函數(shù)來(lái)構(gòu)造對(duì)象的時(shí)候，會(huì)讓構(gòu)造出來(lái)的這個(gè)對(duì)象的initialize變量執(zhí)行apply()方法，apply()的用途后面在說(shuō)，繼續(xù)說(shuō)initialize。這樣在初始化對(duì)象的時(shí)候會(huì)聯(lián)系到initialize（怎么聯(lián)系就要看apply的了）。
那么
復(fù)制代碼 代碼如下:
A.prototype={
initialize:function(v){
this .value=v;
}
showValue:function(){
alert(this.value);
}
}
是什么意思呢？
Prototype是“原型”的意思。A是一個(gè)function（），那么A. prototype，就是function中的一個(gè)變量，其實(shí)是個(gè)對(duì)象。這個(gè)對(duì)象擁有什么方法，那么function產(chǎn)生的對(duì)象就擁有什么方法，故
var a = new A(‘helloWord!');
a. showValue();//彈出對(duì)話框helloWord！
所以a對(duì)象也會(huì)有initialize方法，不只如此，每一個(gè)有A構(gòu)造出來(lái)的對(duì)象都會(huì)有一個(gè)initialize方法，而在前面說(shuō)過(guò)，構(gòu)造的時(shí)候會(huì)調(diào)用構(gòu)造函數(shù)，構(gòu)造函數(shù)里面會(huì)讓initialize去調(diào)用apply方法，于是在new A(‘helloWord!')的時(shí)候initialize回去調(diào)用apply方法。這也就是調(diào)用了一個(gè)初始化的方法。
三、 call()和apply()
下面開始研究apply()，在網(wǎng)上找了幾個(gè)資料，并結(jié)合自己的研究，了解了call()和apply()的功能。功能基本一樣，function().call(object,{},{}……)或者function().apply (object,[……])的功能就是對(duì)象object調(diào)用這里的funciton()，不同之處是call參數(shù)從第二個(gè)開始都是傳遞給funciton的，可以依次羅列用“，”隔開。而apply只有兩個(gè)參數(shù)，第二個(gè)是一個(gè)數(shù)組，其中存儲(chǔ)了所有傳遞給function的參數(shù)。
this.initialize.apply(this , arguments);
是什么意思？
這里的第一個(gè)this，是指用new調(diào)用構(gòu)造函數(shù)之后生成的對(duì)象，也就是前面的a，那么第二個(gè)this也當(dāng)然應(yīng)該是指同一個(gè)對(duì)象。那這句話就是this（也就是a）調(diào)用initialize方法，參數(shù)是arguments對(duì)象（參數(shù)的數(shù)組對(duì)象），所以在構(gòu)造函數(shù)執(zhí)行的時(shí)候，對(duì)象a就會(huì)去執(zhí)行initialize方法來(lái)初始化，這樣就和單詞“initialize”的意思對(duì)上了。
那么執(zhí)行initialize方法的參數(shù)怎么傳遞進(jìn)去的呢？
四、 Arguments對(duì)象
這段代碼能說(shuō)明一切了：
復(fù)制代碼 代碼如下:
function test(){
alert(typeof arguments);
for(var i=0; i<arguments.length; i++){
alert(arguments[i]);
}
}
test("1","2","3");
test("a","b");
執(zhí)行后alert(typeof arguments);會(huì)顯示object，說(shuō)明arguments是對(duì)象。然后會(huì)依次打出1、2、3。說(shuō)明arguments就是調(diào)用函數(shù)的實(shí)參數(shù)組。
復(fù)制代碼 代碼如下:
var Class = {
create: function() {
return function() {
this.initialize.apply(this , arguments);
}
}
}
arguments 就是create返回的構(gòu)造函數(shù)的實(shí)參數(shù)組，那么在
var a = new A(‘helloWord!');
的時(shí)候‘helloWord!'就是實(shí)參數(shù)組（雖然只有一個(gè)字符串），傳遞給方法apply，然后在調(diào)用initialize 的時(shí)候作為參數(shù)傳遞給初始化函數(shù)initialize。
JavaScript技術(shù)：JS面向?qū)ο蟆rototype、call()、apply()，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
