实例解析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 相关文章推荐
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
PHP 翻页 实例代码
2009/08/07 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
学校司机岗位职责
2013/11/14 职场文书
五四青年节活动总结
2015/02/10 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
Python制作动态字符画的源码
2021/08/04 Python
详解nginx location指令
2022/01/18 Servers