$.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. Redis Scan的使用方式以及Spring redis的坑

    SpringRedisTemplate针对这个Scan进行了封装,示例使用(针对最新库spring-data-redis-1.8.1.RELEASE): Set<Object> execu ...

  2. C#调用python脚本

    因项目需要,需要使用C#控制台程序执行python脚本,查询各种资料后可以成功调用了,记录一下,以备后面遗忘. 只尝试了两种调用方式,第一种只适用于python脚本中不包含第三方模块的情况,第二种针对 ...

  3. Netdata安装和使用(Linux 性能实时监测工具)

    Netdata 是一款 Linux 性能实时监测工具..以web的可视化方式展示系统及应用程序的实时运行状态(包括cpu.内存.硬盘输入/输出.网络等linux性能的数据). Netdata文档地址: ...

  4. centos7 下 的lamp 的安装原创详细教程

    时间 : 2017-08-03           目标: 基于CENTOS7 安装 LNMP,liunx的安装不做讲解,主要是 NGINX PHP7 MYSQL 的编译安装 第一节    nginx ...

  5. caffe小问题汇总(持续更新)

    PS:所有问题均在caffe-windows下产生 1.为什么AlexNet中,InnerProduct_Layer(fc8)层的输出可以直接作为Accuracy_Layer层的输出? 答:首先,我们 ...

  6. [Spring MVC]学习笔记--基础Servlet

    Servlet是一个用Java编写的应用程序,在服务器上运行,处理请求的信息并将其发送到客户端. Servlet的客户端提出请求并获得该请求的响应. 对于所有的客户端请求,只需要创建Servlet的实 ...

  7. mysql中对应oracle中的to_char()和to_number()函数

    TO_CHAR(): CAST(123   AS   CHAR(3)) TO_NUMBER(): cast( '123 '   as   SIGNED   INTEGER)

  8. C#快速整理代码格式

    删除最后一个大括号,再添加.vs自动整理代码结构.

  9. 超哥mysql数据库部分blog整理:

    总目录:mysql数据库阶段学习目录 https://www.cnblogs.com/clschao/articles/10065275.html Day1. 1.数据库初识 https://www. ...

  10. 巨蟒django之权限9:前端展示修改删除合并&&权限展示

    1.权限组件控制流程(硬核重点) 2.权限组件控制流程 3.角色管理 4.删除合并 5.权限展示