淺談JavaScript的apply和call語句

標籤：

我們試圖在回呼函數中，用this表示oDiv對象，這樣感覺爽。

1    animate(oDiv,{"left":600},2000,function(){ 2        this.style.backgroundColor = "red"; 3    });

但是不行，回呼函數中this不是oDiv。

 

所以我們現在要想一個辦法，讓callback運行，並且callback裡面的this是oDiv。

1    callback.call(elem);

或者：

1    callback.apply(elem);

執行callback函數，並且讓callback函數中的this關鍵字為elem。

 

例子：

1            var obj2 = { 2                 "name" : "樹懶", 3                 "age" : 16, 4                 "sex" : "男" 5            } 6      7            function xianshixinxi(){ 8                 alert(this.name); 9            } 10     11           //下面這個call語句的含義有兩層： 12           //1. xianshixinxi函數將被調用 13           //2. 同時這個函數內部的this就是obj了 14           xianshixinxi.call(obj2);

 

 

說白了apply、call功能是一樣的，功能都是：讓函數調用，並且給函數設定this是誰。

call就是英語呼叫的意思，apply是應用的意思。

 

現在說說區別：

 

1            var obj = { 2                 "name" : "考拉", 3                 "age" : 18, 4                 "jiehun" : false 5            } 6      7      8            function xianshixinxi(a,b,c){ 9                 console.log(this.name); 10                console.log(a + b + c); 11           } 12     13           xianshixinxi.call(obj,2,3,4); 14           xianshixinxi.apply(obj,[2,3,4]);

 

call和apply功能一樣，就是讓一個函數裡面的this設定為一個對象。

拿上例來說，xianshixinxi函數裡面的this就是obj對象。但是我們發現，xianshixinxi這個函數，有參數。那麼我們現在又想設定this是誰，又想把參數往裡傳，此時就有區別了：

1    fn.call(obj,參數1,參數2,參數3……);

 

1    fn.apply(obj,[參數1,參數2,參數3……]);

call需要你用逗號羅列所有參數，但是apply是把所有參數寫在數組裡面。即使只有一個參數，也必須寫在數組裡面。

 

比如：

1            function showInfo(n){ 2                 for(var i = 1 ; i <= n ; i++){ 3                     console.log(this.name); 4                 } 5            } 6            showInfo.call(obj,10); 7            showInfo.apply(obj,[10]);

一定不要記混，apply要的是數組，你想啊，ly、ly、ly長得像list，就是數組。

 

總結一下，這兩個東西功能一致，就是把一個函數裡面的this設定為某個對象。區別就是後面的參數的文法。

 

淺談JavaScript的apply和call語句