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其實就是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了。事實也是如此。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ù)構(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有了一定的了解呢,其實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(); 其實我們還可以采用其它方法, 比如 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其實是一個意思。只不過是調(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)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容