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就可以找到它的主人了。