(一)關(guān)于this首先關(guān)于this我想說一句話,這句話記住了this的用法你也就差不多都能明白了:this指的是當(dāng)前函數(shù)的對象改橘。這句話可能比較繞滋尉,我會舉出很多例子和這句話呼應(yīng)的!(看下文)1.首先看下面這段代碼, 定義一個函數(shù)飞主,彈下this,
function doSomething(){
alert(this);
}
doSomething();
我是在firefox里面調(diào)試的狮惜,所以返回的結(jié)果是[Object Window]。那么這個 [Object Window]碌识, 到底是什么呢碾篡?看看下面的代碼Js代碼 !
function doSomething(){
alert(this===window);
}
doSomething();
看到彈出了true, 也就是說在這種正常情況下,this其實(shí)就是window所以,我們定義了一個全局的變量的時候筏餐,可以var test="Tony";也可以window["test"]="Tony";下面這個例子开泽,進(jìn)一步說明,正常情況下,函數(shù)里的this就是window
Js代碼
var test="Tony";
function doSomething(){
alert(this.test); //彈出 "Tony";
alert(window.test); //彈出 "Tony";
}
doSomething();
第一次呼應(yīng):通過以上幾個例子魁瞪,我想可以說這幾個例子中得this指的就是他當(dāng)前函數(shù)doSomething()的Window對象穆律。那顧名思義this.test自然就等于window.test了。事實(shí)也是如此导俘。2.我再舉一個閉包的例子峦耘,但是在這里我不會解釋什么是閉包,只是講this的用法旅薄,明天我會學(xué)習(xí)閉包贡歧,今天就先當(dāng)他是一個未知數(shù),來學(xué)習(xí)this的一個工具赋秀。 看這個例子:
Js代碼
var name ="The Window"; //創(chuàng)建了一個全局變量name
var object = { //又創(chuàng)建了一個對象(創(chuàng)建對象的方法有很多種)
name:"My Object", //創(chuàng)建了一個name屬性(屬性就是引用非函數(shù))
doSomething:function(){ //創(chuàng)建了一個doSomething方法(方法就是引用了函數(shù))
return function(){ //這個doSomething方法返回一個匿名函數(shù)
return this.name; //這個匿名函數(shù)又返回this.name
};
}
};
alert(object.doSomething()());
//由于這個doSomething方法返回的一個函數(shù),所以這樣就可以調(diào)用這個函數(shù)了
這段代碼的主要解釋我都注在了后面律想,主要想說的就是:這段代碼返回的結(jié)果是"The Window",而不是我所預(yù)期的"My Object",前面不是說了嗎猎莲? this指的是當(dāng)前函數(shù)的對象, 可是在這里為什么就不是呢?其實(shí)就是因?yàn)殚]包的特性技即,由于這個匿名函數(shù)構(gòu)成了一個閉包著洼,所以他所保存的就是整個變量對象也就是Window對象。這里先不說為什么,明天學(xué)閉包的時候我還會用這個例子的身笤,這里就先接受下來豹悬。 那么如何做才能讓結(jié)果返回"My Object"呢?還是那句話this指的是當(dāng)前函數(shù)的對象液荸,那么問題就簡單了瞻佛,也就是讓this放在doSomething方法里,而不是那個匿名函數(shù)里不就可以了嗎娇钱?修改代碼如下:
Js代碼
var name ="The Window";
var object = {
name:"My Object",
doSomething:function(){
var abc = this ;
return function(){
return abc.name;
};
}
};
alert(object.doSomething()());
第二次呼應(yīng):現(xiàn)在再看代碼紅色部分做的修改伤柄,this是不是指的是當(dāng)前doSomething()函數(shù)的object對象了?那再輸出結(jié)果自然就是"My Object"了文搂。 通過這兩次呼應(yīng)适刀,是不是感覺已經(jīng)對this有了一定的了解呢,其實(shí)this用到的地方還很多煤蹭,以后還會慢慢講到笔喉,比如在jQuery中this依然指的是當(dāng)前函數(shù)的對象。(二)關(guān)于call 1.如果我們調(diào)用函數(shù)的時候硝皂,想讓函數(shù)里的 this 代表別的對象常挚,而不是當(dāng)前函數(shù)的對象。有什么辦法呢吧彪?那就只好使用call和apply了(對于我這種初學(xué)者待侵,這兩個東西太惡心了) 通常我們調(diào)用函數(shù),都是直接采用以下形式調(diào)用 [調(diào)用] 函數(shù)名(); //doSomething(); 其實(shí)我們還可以采用其它方法, 比如 call 這個單詞姨裸,就是調(diào)用的意思秧倾,我們這里要用到它。還是以doSomething函數(shù)為例: 中文:函數(shù)名.調(diào)用(); 英文:doSomething.call(); 代碼如下:
Js代碼
var test="Tony";
function doSomething(){
alert(this.test); //彈出 "Tony";
}
doSomething(); // [調(diào)用] doSomething();
doSomething.call(); // 函數(shù).調(diào)用()
現(xiàn)在我們只是做了函數(shù)的調(diào)用傀缩,還沒有改變this那么怎么改變 this 呢那先?這個時候call就要發(fā)揮威力了。本來doSomething函數(shù)里的this表示的是 window ,我們執(zhí)行下面這句赡艰。 doSomething.call(某個對象);這個時候doSomething里的this就變成了"某個對象",看下面的例子:
Js代碼
var test="Tony";
var myobj={
test : "Tom"
};
function doSomething(){
alert(this.test);
}
toolmao.call(); // 彈出 window.test 售淡,即 "Tony"
toolmao.call(myobj); // 這個時候,doSomething函數(shù)里的this指向 myobj慷垮,
//所以彈出的是 myobj.test 即 "Tom"
2.那如果里面有參數(shù)呢揖闸?看代碼
Js代碼
var test="Tony";
var myobj={
test : "Tom"
};
function doSomething(name, age){
alert(this.test + ":" + name + age);
}
doSomething("Tony",23);//普通調(diào)用 結(jié)果Tony:Tony23
doSomething.call(myobj,"Tony",23);//call調(diào)用結(jié)果Tom:Tony23
上面代碼,我們可以看出料身,相比普通調(diào)用, call 只是多了一個用來指定this的參數(shù),call 干什么用的汤纸?就是干這個用的!!現(xiàn)在有體會了吧?(三)關(guān)于apply都知道call的用法了芹血,apply其實(shí)是一個意思贮泞。只不過是調(diào)用參數(shù)的形式不一樣罷了楞慈。call是一個一個調(diào)用參數(shù),而apply是調(diào)用一個數(shù)組啃擦。還是用上面相同的例子:
Js代碼
var test="Tony";
var myobj={
test : "Tom"
};
function doSomething(name, age){
alert(this.test + ":" + name + age);
}
doSomething("Tony",23);//普通調(diào)用 結(jié)果Tony:Tony23
doSomething.call(myobj,"Tony",23);//call調(diào)用結(jié)果Tom:Tony23
doSomething.apply(object,["Tony",23]);//apply調(diào)用 結(jié)果與call相同
上面這寫代碼寫紅色部分就是apply的用法囊蓝。