$.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'));

 

喊口號：熱愛前端，活用 this！