实例解析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 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
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
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
jQuery 1.0.2
2006/10/11 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
node内置调试方法总结
2018/02/22 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
python实现装饰器、描述符
2018/02/28 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
电大本科自我鉴定
2014/02/05 职场文书
公司授权委托书
2014/04/04 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
机关工会工作总结2015
2015/05/26 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python