JS 中this稠通、call衬衬、apply的用法

(一)關(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的用法囊蓝。

轉(zhuǎn):http://liuhd2010.iteye.com/blog/1894237

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市令蛉,隨后出現(xiàn)的幾起案子聚霜,更是在濱河造成了極大的恐慌,老刑警劉巖言询,帶你破解...
    沈念sama閱讀 217,542評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件俯萎,死亡現(xiàn)場離奇詭異,居然都是意外死亡运杭,警方通過查閱死者的電腦和手機(jī)夫啊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來辆憔,“玉大人撇眯,你說我怎么就攤上這事∈郑” “怎么了熊榛?”我有些...
    開封第一講書人閱讀 163,912評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長腕巡。 經(jīng)常有香客問我玄坦,道長,這世上最難降的妖魔是什么绘沉? 我笑而不...
    開封第一講書人閱讀 58,449評論 1 293
  • 正文 為了忘掉前任煎楣,我火速辦了婚禮,結(jié)果婚禮上车伞,老公的妹妹穿的比我還像新娘择懂。我一直安慰自己,他們只是感情好另玖,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評論 6 392
  • 文/花漫 我一把揭開白布困曙。 她就那樣靜靜地躺著,像睡著了一般谦去。 火紅的嫁衣襯著肌膚如雪慷丽。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,370評論 1 302
  • 那天鳄哭,我揣著相機(jī)與錄音盈魁,去河邊找鬼。 笑死窃诉,一個胖子當(dāng)著我的面吹牛杨耙,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播飘痛,決...
    沈念sama閱讀 40,193評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼珊膜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了宣脉?” 一聲冷哼從身側(cè)響起车柠,我...
    開封第一講書人閱讀 39,074評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎塑猖,沒想到半個月后竹祷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,505評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡羊苟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評論 3 335
  • 正文 我和宋清朗相戀三年塑陵,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蜡励。...
    茶點(diǎn)故事閱讀 39,841評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡令花,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出凉倚,到底是詐尸還是另有隱情兼都,我是刑警寧澤,帶...
    沈念sama閱讀 35,569評論 5 345
  • 正文 年R本政府宣布稽寒,位于F島的核電站扮碧,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏杏糙。R本人自食惡果不足惜慎王,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望搔啊。 院中可真熱鬧柬祠,春花似錦、人聲如沸负芋。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽旧蛾。三九已至莽龟,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間锨天,已是汗流浹背毯盈。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留病袄,地道東北人搂赋。 一個月前我還...
    沈念sama閱讀 47,962評論 2 370
  • 正文 我出身青樓赘阀,卻偏偏與公主長得像,于是被迫代替她去往敵國和親脑奠。 傳聞我的和親對象是個殘疾皇子基公,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 注:本文案例環(huán)境為非嚴(yán)格模式轰豆,嚴(yán)格模式下禁止關(guān)鍵字this指向全局對象 一、方法是怎么執(zhí)行的齿诞? 首先說一下js中方...
    就那ck閱讀 1,151評論 5 17
  • 函數(shù)和對象 1酸休、函數(shù) 1.1 函數(shù)概述 函數(shù)對于任何一門語言來說都是核心的概念。通過函數(shù)可以封裝任意多條語句祷杈,而且...
    道無虛閱讀 4,564評論 0 5
  • 參考《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》 this 跟別的語言大相徑庭的是,JavaScript的this總...
    16manman閱讀 572評論 0 0
  • 小螞蟻是定居在齊朵朵家樓下花圃的一只小螞蟻特占。由于齊朵朵家在一樓糙置,窗臺外正對著小區(qū)花圃,因此小螞蟻就那么偶然中帶著必...
    撒歡的二狗子閱讀 253評論 2 4
  • 浦東機(jī)場是目,今天來了一個不一樣的女人谤饭。女人個子不高,身材挺好懊纳,穿著時尚 揉抵。走路像風(fēng)一樣,氣場很大嗤疯,在旁人眼里一看就不...
    樂瑞閱讀 501評論 0 0