实例解析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的一个图片hover的插件
Apr 24 Javascript
javascript 事件绑定问题
Jan 01 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
node中的cookie的具体使用
Sep 13 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
js+css3实现简单时钟特效
Sep 13 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
php中apc缓存使用示例
2013/12/25 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
PHP时间类完整代码实例
2021/02/26 PHP
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
Prototype框架详解
2015/11/25 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
python实现QQ批量登录功能
2019/06/19 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
电子商务个人自荐信
2013/12/12 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
九年级数学教学反思
2016/02/17 职场文书
MySQL 数据库范式化设计理论
2022/04/22 MySQL