$.proxy() 的妙用

$.proxy() 最主要就是用來修改函式執行時的上下文物件的。

先看以下情景：

<div id="panel" style="display:none;">

<button class="close">消失</button>

</div>

<script>

$("#panel").fadeIn(function () {

　　$('.close'

).click(function () {

　　　　$(this).fadeOut(); // 其實這裡我想讓 #panel 隱藏來著

　　});

$('#panel').click(function() {

　　setTimeout(function() {

　　　　$(this).addClass('aNewClass'); // 這個 this 根本就不對嘛

　　}, 1000);

});

</script>

打斷一下...這裡用 var $this = $(this); 來處理也可以呀。

媽蛋，還讓不讓我講了啊喂。騷年郎，你是還沒接觸到 this 這門藝術的高深之處才會這樣覺得，將 this 不去標量化才是我們裝逼的價值。

不但少了個生成變數的效能輸出，還避免了變數名耦合，最極致的莫過於提高了複用性...

看一眼改版後的程式碼

$("#panel").fadeIn(function(){

$('.close').click($.proxy(HidePanel, this));

// 相比這個 $('.close').click(function(){HidePanel()}); 優美很多

});

function

HidePanel() {

$(this).fadeOut();

}

$('#panel').click(function() {

　　setTimeout($.proxy(function() {

　　　　$(this).addClass('aNewClass');

　　}, this), 1000);

});

上文說的是 $.proxy(fn, context) 用法，

而 $.proxy(context, name) 用法感覺更多的用在物件上，個人用的較少，因為感覺 new 一個物件函式要更爽（而 new 出來的 this 肯定不會亂了呀），不過還是列一下吧

var person = {

　　name: "zyh",

　　say: function(event) {alert(this.name)},

}

// $('#test').click(person.say) 顯然有問題

$('.test').click($.proxy(person,'say'));