javascript「普通」函數中的this，以及call,apply用法

1. 從this開始提及

首先看下面這段代碼, 定義一個函數，彈下this, 

<script type="text/javascript">
function toolmao(){
     alert(this);
}

toolmao();
</script>

使用chrome測試以上代碼，能夠看到彈出的是 [object global] 。

那麼這個 [object global]， 究竟是什麼呢？看看下面的代碼

<script type="text/javascript">
function toolmao(){
     alert(this===window);
}
toolmao();
</script>

看到彈出 true 了吧， 也就是說在這種正常狀況下, this 其實就是 window

因此，咱們定義了一個全局的變量的時候，能夠

var test="gainover";

也能夠

window["test"]="gainover";

下面這個例子，進一步說明， 正常狀況下, 函數裏的 this 就是 window

<script type="text/javascript">

var test="gainover";

function toolmao(){
     alert(this.test);     //彈出 "gainover";
     alert(window.test);   //彈出 "gainover";
}
toolmao();
</script>

2. 如今咱們知道了，函數裏的 this 是什麼。

若是咱們調用函數的時候，想讓函數裏的 this 表明別的對象，而不是window。有什麼辦法呢？

這裏就要用到 call 或者 apply 了（對於初學者，是蠻噁心的東西）

要知道call 和 apply 的用法，咱們先來看看函數的調用方法。

------------------------------

一般咱們調用函數，都是直接採用如下形式調用

[調用]    函數名();

其實咱們還能夠採用其它方法, 好比 call 這個單詞，就是調用的意思，咱們這裏要用到它。

仍是以 toolmao 函數爲例:

中文:    函數名.調用();

英文:    toolmao.call();

代碼以下：

<script type="text/javascript">

var test="gainover";

function toolmao(){
     alert(this.test);     //彈出 "gainover";
}

toolmao(); //   [調用]   toolmao();

toolmao.call(); // 函數.調用() 
</script>

如今咱們只是作了函數的調用，尚未改變 this ，那麼怎麼改變 this 呢？

這個時候call就要發揮威力了。

原本 toolmao 函數裏的 this 表示的是 window , 咱們執行下面這句。

toolmao.call(某個對象);

這個時候，toolmao 裏的 this 就變成了 「某個對象」。

咱們一塊兒來看看代碼

<script type="text/javascript">

var test="gainover";

var myobj={
     test : "tieba"
};

function toolmao(){
     alert(this.test);   
}

toolmao.call(); // 彈出 window.test   ，即 "gainover"

toolmao.call(myobj); 
// 這個時候，toolmao函數裏的this指向 myobj
// 因此彈出的是 myobj.test 即 "tieba"
</script>

3. 上面的代碼，應該還好理解吧？

路人甲發話了，你舉的這個例子，雖然沒問題，可是若是toolmao 函數，有參數怎麼辦。

代碼以下：

<script type="text/javascript">
var test="gainover";
var myobj={
     test : "tieba"
};

function toolmao(name, age){
     alert(this.test + ":" + name + age);   
}

//普通調用

toolmao("周星星",30); //彈出 "gainover:周星星30"

//那麼call怎麼作呢？其實很簡單，同樣的咯

toolmao.call(myobj,"周星星",30); //彈出"tieba:周星星30"
</script>

上面代碼，咱們能夠看出，相比普通調用, call 只是多了一個用來指定 this 的參數

call 幹什麼用的？就是幹這個用的，可能好多人看完這些，都還體會不到 call 到底有什麼用處。

這些我會單獨再另開帖子說明。如今你只須要知道call其實就是調用函數，不過改變了一下函數裏的this。

4. 說了這麼多，apply 還沒出現.

其實若是你看懂了上面的 call 的用法， apply 就比較簡單了。

apply 和 call 的做用是同樣的，只是參數 不同。

對比下面的代碼。假設 toolmao 函數有N個參數

//call 是 1 + N 個參數，以下

toolmao.call(myobj,"周星星", 30, 參數3, 參數4, ..... ,參數N);

//apply 永遠都是2個參數, 第一個參數是 this 指向的東西，第2個是一個數組，數組裏存放的是全部參數

toolmao.apply(myobj, ["周星星", 30, 參數3, 參數4, ..... ,參數N]);

<script type="text/javascript">
var test="gainover";
var myobj={
     test : "tieba"
};

function toolmao(name, age){
     alert(this.test + ":" + name + age);   
}

//普通調用

toolmao("周星星",30); //彈出 "gainover:周星星30"

//那麼call怎麼作呢？其實很簡單，同樣的咯

toolmao.call(myobj,"周星星",30); //彈出"tieba:周星星30"

toolmao.apply(myobj,["周星星",30]); //彈出"tieba:周星星30", 同call 
</script>