$.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!

随机推荐

  1. MVVMLight-Mensenger 学习笔记

    MVVMLight-Mensenger  最近一直在使用WPF,配合美工很容易能搭配出效果不错的UI来,开发效率也明显加快 自己也是最近才开始使用Mvvmlight,通过view和viewmodel分 ...

  2. SQLServer -- 竟然默认不区分大小写

    SELECT * FROM USER_INFO WHERE USERNAME = :username; 这样的写法,:username的值竟然不区分大小写 原因:数据库的排序规则设置的是Chinese ...

  3. python 面试题 string int

    str1 = 'hello' str2 = str1 str3 = str1 str4 = str1 str1 = '' int1 = 1 int2 = int1 int3 = int1 int4 = ...

  4. django使用redis做缓存

    Django 使用 Redis 做缓存 django中应用redis:pip3 install django-redis - 配置 CACHES = { "default": { ...

  5. go语言调用cmd

    package main import ( "fmt" "os/exec" ) func main() { //删除C:\Users\Administrator ...

  6. spring mvc3.1 @ResponseBody注解生成大量Accept-Charset

    Spring3 MVC使用@ResponseBody后会产生非常大的响应头(Accept-Charset会达到4K+).原因在于默认情况下StringHttpMessageConverter.writ ...

  7. OKhttp3

    针对上一博文订单调用用户使用默认数据交互方式,下面介绍下使用 Okhttp3网络数据交换方式. 1.订单启动类变化 package com.tycoon.orderService; import or ...

  8. 关于lucene的RAMDirectory和FSDirectory的性能问题的困惑

    关于lucene的RAMDirectory和FSDirectory的性能问题的困惑 在lucene in Action书中说RAMDirectory的性能总是比FSDirectory优越(书中2.7. ...

  9. 关于 JavaScript 学习 —— 好的博客或者网站推荐

    作者:Tw93链接:https://www.zhihu.com/question/19651401/answer/46211739来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  10. JS探秘——那些你理解存在偏差的问题

    Javascript的连续赋值运算 var a = {n:1}; a.x = a = {n:2}; alert(a.x); // --> undefined 看 jQuery 源码 时发现的这种 ...