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

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);

});
赞 (0)

相关推荐

  • jQuery的$.proxy()应用示例介绍

    jQuery的$.proxy()应用示例介绍

    今天在看<<锋利的jQuery>>时看到了proxy()的使用,感觉很模糊,就到处找资料. jQuery的源码也没看明白. 不过总算明白了proxy的用法了; 复制代码 代码如下: <input type="button" value="测试" id="guoBtn" name="我是按钮的name"/> 复制代码 代码如下: var obj = { name: "我是obj的na

  • JQuery之proxy实现绑定代理方法

    在javascript中,this指代的对象时常会变化,这会造成程序,混乱,一般做法就是先将this保存在一个变量中,就不怕她变了,我们先看一个小例子 var A = function(){ this.star = functiont(){}; this.beg = function(){ var that = this; $node.click(function(){ //this.start();//这里的this指代的是$node对象 that.start(); }); }; } JQue

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

    jQuery.proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context )语境. jQuery.proxy( function, context ) function将要改变上下文语境的函数. context函数的上下文语境(`this`)会被设置成这个 object 对象. jQuery.proxy( context, name ) context函数的上下文语境会被设置成这个 object 对象. name将要改变上下文语境的函数名(这个函数必须

  • jQuery中extend函数简单用法示例

    jQuery中extend函数简单用法示例

    本文实例讲述了jQuery中extend函数简单用法.分享给大家供大家参考,具体如下: var result=$.extend({},item,item1); extend给对象添加新的属性:js插件经常使用来配置参数 {}:item和item1合并后的结果 item:默认属性 item1:新增属性,如果item1和item属性重合则会覆盖item1中的属性 <span id="Test"></span> var item={"name":&

  • Jquery中map函数的用法

    Jquery中map函数的用法

    很久没用map()这个函数了,由于最近看一篇react的文章,其中有谈到map()这个函数,于是就重新查了一些资料,发现map()函数可以用在不同的地方,下面小编总结具有内容分享给大家,也方便今后查找. 其实,本人一直很少用map()这个函数,因为最近看一篇React的文章,其实有谈及map()函数,于是自己也重新查了一些资料,发现map()函数也可以用在不同的地方: map()函数把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的Jquery对象 语法:.map(callback(i

  • jQuery中$.each()函数的用法引申实例

    语法: $.each( collection, callback(indexInArray, valueOfElement) ) 值得一提的是,forEach 可以很方便的遍历数组和 NodeList ,jQuery 中的 jQuery 对象本身已经部署了这类遍历方法,而在原生 JavaScript 中则可以使用 forEach 方法,但是 IE 并不支持,因此我们可以手动把 forEach 方法部署到数组和 NodeList 中: if ( !Array.prototype.forEach )

  • 实例解析jQuery中如何取消后续执行内容

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> //点击a标签,不进行页面跳转 window.onload = function () { var obj = document.getElementById("myhref"); obj.o

  • 解析PHP中ob_start()函数的用法

    ob_start()函数用于打开缓冲区,比如header()函数之前如果就有输出,包括回车/空格/换行/都会有"Header had all ready send by"的错误,这时可以先用ob_start()打开缓冲区PHP代码的数据块和echo()输出都会进入缓冲区而不会立刻输出.当然打开缓冲区的作用很多,只要发挥你的想象.可以总结以下四点: 1.用于header()之前ob_start(); //打开缓冲区 echo /"Hellon/"; //输出 head

  • Sql Server中Substring函数的用法实例解析

    Sql Server中Substring函数的用法实例解析

    SQL 中的 substring 函数是用来抓出一个栏位资料中的其中一部分.这个函数的名称在不同的资料库中不完全一样: MySQL: SUBSTR( ), SUBSTRING( ) Oracle: SUBSTR( ) SQL Server: SUBSTRING( ) SQL 中的 substring 函数是用来截取一个栏位资料中的其中一部分. 例如,我们需要将字符串'abdcsef'中的'abd'给提取出来,则可用substring 来实现: select substring('abdcsef'

  • jquery中map函数遍历数组用法实例

    本文实例讲述了jquery中map函数遍历数组用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • jQuery中closest()函数用法实例

    本文实例讲述了jQuery中closest()函数用法.分享给大家供大家参考.具体分析如下: 此函数从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素. closest()函数会首先检查当前元素是否匹配,如果匹配则直接返回元素本身.如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素.如果什么都没找到则返回一个空的jQuery对象. 语法结构一: 复制代码 代码如下: $(selector).closest(expr, context) 参数列表: 参数 描述 expr 用以

  • JQuery中DOM事件合成用法实例分析

    本文实例讲述了JQuery中DOM事件合成用法.分享给大家供大家参考.具体分析如下: jQuery有两个合成事件--hover()方法和toggle()方法,类似前面讲过的ready()方法,hover()方法和toggle()方法都属于jQuery自定义的方法. hover()方法 hover()方法的语法结构为: hover(enter,leave); hover()方法用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第1个函数(enter);当光标移出这个元素时,会触发指定的第2个

随机推荐