$.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!
随机推荐
- Redis Scan的使用方式以及Spring redis的坑
SpringRedisTemplate针对这个Scan进行了封装,示例使用(针对最新库spring-data-redis-1.8.1.RELEASE): Set<Object> execu ...
- C#调用python脚本
因项目需要,需要使用C#控制台程序执行python脚本,查询各种资料后可以成功调用了,记录一下,以备后面遗忘. 只尝试了两种调用方式,第一种只适用于python脚本中不包含第三方模块的情况,第二种针对 ...
- Netdata安装和使用(Linux 性能实时监测工具)
Netdata 是一款 Linux 性能实时监测工具..以web的可视化方式展示系统及应用程序的实时运行状态(包括cpu.内存.硬盘输入/输出.网络等linux性能的数据). Netdata文档地址: ...
- centos7 下 的lamp 的安装原创详细教程
时间 : 2017-08-03 目标: 基于CENTOS7 安装 LNMP,liunx的安装不做讲解,主要是 NGINX PHP7 MYSQL 的编译安装 第一节 nginx ...
- caffe小问题汇总(持续更新)
PS:所有问题均在caffe-windows下产生 1.为什么AlexNet中,InnerProduct_Layer(fc8)层的输出可以直接作为Accuracy_Layer层的输出? 答:首先,我们 ...
- [Spring MVC]学习笔记--基础Servlet
Servlet是一个用Java编写的应用程序,在服务器上运行,处理请求的信息并将其发送到客户端. Servlet的客户端提出请求并获得该请求的响应. 对于所有的客户端请求,只需要创建Servlet的实 ...
- mysql中对应oracle中的to_char()和to_number()函数
TO_CHAR(): CAST(123 AS CHAR(3)) TO_NUMBER(): cast( '123 ' as SIGNED INTEGER)
- C#快速整理代码格式
删除最后一个大括号,再添加.vs自动整理代码结构.
- 超哥mysql数据库部分blog整理:
总目录:mysql数据库阶段学习目录 https://www.cnblogs.com/clschao/articles/10065275.html Day1. 1.数据库初识 https://www. ...
- 巨蟒django之权限9:前端展示修改删除合并&&权限展示
1.权限组件控制流程(硬核重点) 2.权限组件控制流程 3.角色管理 4.删除合并 5.权限展示