实例解析jQuery中proxy()函数的用法


Posted in Javascript onMay 24, 2016

jQuery.proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context )语境。

jQuery.proxy( function, context )

function将要改变上下文语境的函数。

context函数的上下文语境(`this`)会被设置成这个 object 对象。

jQuery.proxy( context, name )

context函数的上下文语境会被设置成这个 object 对象。

name将要改变上下文语境的函数名(这个函数必须是前一个参数 ‘context' 对象的属性)

这个方法通常在向一个元素上附加事件处理函数时,上下文语境实际是指向另一个对象的情况下使用。

另外,jQuery 能够确保即使你绑定的函数是经过 jQuery.proxy() 处理过的函数,你依然可以用原先的函数来正确地取消绑定。

参数:
function:Function类型需要更改上下文对象的函数。
context:任意类型指定为函数设置的上下文对象。
name:String类型需要更改上下文对象的函数名称(它应该是context的一个属性)。
additionalArguments 可选/任意类型指定调用该函数时需要传入的参数,参数可以有任意多个。

注意事项:
参数additionalArguments是从 jQuery 1.6 开始支持的。
该方法非常适用于在附加事件处理函数时,将事件处理函数的上下文指向另一个对象。此外,jQuery确保:即使你使用jQuery.proxy()返回的"代理"函数来绑定事件,如果你在解除绑定时传入原函数,jQuery仍然可以正确解除绑定。
从jQuery 1.9 开始,如果context为null或undefined,则"代理"函数的上下文不会发生更改。这将允许jQuery.proxy()只传入函数的参数,而不更改函数的上下文。

实例

我们先看个例子:

//正常的this使用
$('#Haorooms').click(function() {

  // 这个this是我们所期望的,当前元素的this.

  $(this).addClass('aNewClass');

});
//并非所期望的this
$('#Haorooms').click(function() {

  setTimeout(function() {

     // 这个this指向的是settimeout函数内部,而非之前的html元素

    $(this).addClass('aNewClass');

  }, 1000);

});

这时候怎么办呢,通常的一种做法是这样的:

$('#Haorooms').click(function() {
  var that = this;  //设置一个变量,指向这个需要的this

  setTimeout(function() {

     // 这个this指向的是settimeout函数内部,而非之前的html元素

    $(that).addClass('aNewClass');

  }, 1000);

});

但是,在使用了jquery框架的情况下, 有一种更好的方式,就是使用$.proxy函数。

有两种语法:

jQuery.proxy( function, context )
/**function将要改变上下文语境的函数。
** context函数的上下文语境(`this`)会被设置成这个 object 对象。
**/

jQuery.proxy( context, name )
/**context函数的上下文语境会被设置成这个 object 对象。
**name将要改变上下文语境的函数名(这个函数必须是前一个参数 ‘context' **对象的属性)
**/

上面的例子使用这种方式就可以修改成:

$('#Haorooms').click(function() {

  setTimeout($.proxy(function() {

    $(this).addClass('aNewClass'); 

  }, this), 1000);

});
Javascript 相关文章推荐
JavaScript 继承使用分析
May 12 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
js实现3D照片墙效果
Oct 28 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
jQuery前端开发35个小技巧
May 24 #Javascript
JS+Canvas绘制时钟效果
Aug 20 #Javascript
基于JQuery实现图片上传预览与删除操作
May 24 #Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 #Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 #Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 #Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 #Javascript
You might like
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php之readdir函数用法实例
2014/11/13 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
vue3.0 上手体验
2020/09/21 Javascript
python使用urllib2提交http post请求的方法
2015/05/26 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
zookeeper python接口实例详解
2018/01/18 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
Python计算IV值的示例讲解
2020/02/28 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
保险专业求职信
2014/07/07 职场文书
出纳工作检讨书
2014/10/18 职场文书
体育教师个人工作总结
2015/02/09 职场文书
车队安全员岗位职责
2015/02/15 职场文书
婚庆主持词大全
2015/06/30 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书