$.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!
随机推荐
- MVVMLight-Mensenger 学习笔记
MVVMLight-Mensenger 最近一直在使用WPF,配合美工很容易能搭配出效果不错的UI来,开发效率也明显加快 自己也是最近才开始使用Mvvmlight,通过view和viewmodel分 ...
- SQLServer -- 竟然默认不区分大小写
SELECT * FROM USER_INFO WHERE USERNAME = :username; 这样的写法,:username的值竟然不区分大小写 原因:数据库的排序规则设置的是Chinese ...
- python 面试题 string int
str1 = 'hello' str2 = str1 str3 = str1 str4 = str1 str1 = '' int1 = 1 int2 = int1 int3 = int1 int4 = ...
- django使用redis做缓存
Django 使用 Redis 做缓存 django中应用redis:pip3 install django-redis - 配置 CACHES = { "default": { ...
- go语言调用cmd
package main import ( "fmt" "os/exec" ) func main() { //删除C:\Users\Administrator ...
- spring mvc3.1 @ResponseBody注解生成大量Accept-Charset
Spring3 MVC使用@ResponseBody后会产生非常大的响应头(Accept-Charset会达到4K+).原因在于默认情况下StringHttpMessageConverter.writ ...
- OKhttp3
针对上一博文订单调用用户使用默认数据交互方式,下面介绍下使用 Okhttp3网络数据交换方式. 1.订单启动类变化 package com.tycoon.orderService; import or ...
- 关于lucene的RAMDirectory和FSDirectory的性能问题的困惑
关于lucene的RAMDirectory和FSDirectory的性能问题的困惑 在lucene in Action书中说RAMDirectory的性能总是比FSDirectory优越(书中2.7. ...
- 关于 JavaScript 学习 —— 好的博客或者网站推荐
作者:Tw93链接:https://www.zhihu.com/question/19651401/answer/46211739来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
- JS探秘——那些你理解存在偏差的问题
Javascript的连续赋值运算 var a = {n:1}; a.x = a = {n:2}; alert(a.x); // --> undefined 看 jQuery 源码 时发现的这种 ...