iT邦幫忙

3

利用jQuery的$.proxy讓callback函式裡的this轉向

JavaScript裡的this是很玄的東西,往往this來this去,到最後讓人不知道this指的究竟是誰。

像function裡的this,就會因為呼叫的方式不同,而指向不同的地方。

關於這一點,發明JSON的Douglas Crockford在《JavaScript優良部分》中有深入的介紹function的四種呼叫方式如何影響this,如果想要了解this,可以去讀這個部分。
假設有一個情況,有一個按鈕 $(“button#turnOn”) ,我們希望它click之後,會去打開電視。

電視的可以這樣做:

var tv = {};
tv.channel = 23;
tv.turnOn = fucntion(e){
   console.log(this.channel);
}

接下來,我們就可以綁定**$(“button#turnOn”).click(tv.turnOn);**

當按下後,我們希望這時瀏覽器的主控台會顯示23頻道。

不過這台電視好像故障了,它會回報this.channel是undefined

沒錯,如果你仔細追查下去,會發現這時this.channel裡的this,指的已經不是tv,而是click這個method的this,也就是 $(“button#turnOn”) ,而 $(“button#turnOn”) 並沒有定義channel這個值,自然發生故障。

電視打不開該怎麼辦,別急,jQuery的工具箱裡總是找得到東西的。

我們需要的是一個可以讓this可以固定下來,找得到自己主人的工具,而這個工具就是--

jQuery.proxy(function,context)

jQuery.proxy()接收兩個參數,一個是函式,一個是它要作用的context,換句話說,它要認的this是誰。
所以我們可以把

$(“button#turnOn”).click(tv.turnOn);

改寫成:

$(“button#turnOn”).click($.proxy(tv.turnOn,tv));

這樣子this.channel就可以找到它的主人了。


尚未有邦友留言

立即登入留言