jQuery.proxy()的用法

一：参考范文一

第一次接触jQuery.proxy()时感觉这个方法不实用，不明白它到底是个什么意思。今天来将jQuery官网上的解释进行一下翻译，顺便添加自己的理解和一些示例。proxy也可称为代理。

jQuery.proxy( function, context )　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Returns: Function

通过这第一句话我们知道，jQuery.proxy传递的第一个参数是函数类型，第二个参数是上下文context，返回值也是一个函数。

JQuery API Document 上的描述是：

接受一个函数并且返回一个新的函数，这个函数总是包含着特定的上下文。

function:上下文将会被改变的函数

context：将函数的上下文设置到的一个新对象。注意：这里的上下文不是DOM对象，而是JS对象，并且要求context的类型是PlainObject（PlainObject是指包含一个或多个键值对的javascript对象，是jQuery对JS对象的一种定义，可以通过$.isPlainObject判断）。

看着这段说明似乎有点懵，例证一下

        var parent = {
            text: "parent"
            , show: function () {
                alert(this.text);
            }
        }
        var child = {
            text: "child"
            , show: function () {
                alert(this.text);
            }
        }
        var show = $.proxy(parent.show, child);
        show();

在这个例子中，我写了两个对象parent和child，同时调用了代理函数$.proxy，返回了show函数。调用了一下show函数，发现alert出来的是“child”。

这时候你会惊奇的发现，用法很像javascript中的call方法。

parent.show.call(child);
//alert结果是"child"

那么我们得出第一条结论：jQuery.proxy会将第一个参数function托管个context对象，并且返回一个新函数，这个新函数的执行上下文是传入的context参数

继续看

首先看以一下proxy的其它几种参数列表

jQuery.proxy( context, name )

name:String类型，就是函数的名字

将上述例子改写可以实现相同的效果

var show = $.proxy(child, 'show');
    show();

这里是将show函数的执行上下文设置为child.

jQuery.proxy( function, context [, additionalArguments ] )

jQuery.proxy( context, name [, additionalArguments ] )

additionalArguments:给函数传入的参数

这种方式有些像带参数的call函数

        var parent = {
            text: "parent"
            , show: function (pre) {
                pre ? (pre += this.text) : pre = this.text;
                alert(pre);
            }
        }
        var child = {
            text: "child"
            , show: function (pre) {
                pre ? (pre += this.text) : pre = this.text;
                alert(pre);
            }
        }
        var show = $.proxy(child, 'show', 'I am ');
        show();

这种方法通常的使用场景是将事件处理函数附加到另一个新对象上去的时候，尽管返回的函数的执行上下文是新对象，但是可以通过原对象就可以解除新对象的函数绑定。

但是需要注意的是，jQuery事件绑定子系统会为每一个事件处理函数分配一个唯一的ID(在jQuery中是guid对象)用来跟踪它，这主要用来在特殊事件的解绑时使用。

即使事件绑定在不同的上下文对象上，通过jQuery.proxy返回的函数对jQuery来说也是唯一的。为了防止解绑事件初恋函数出错，最好使用唯一的命名空间来添加事件绑定函数和解除事件绑定函数（比如“click.Modal.data-api”，它会在事件绑定或解绑时，生成“data-api.Modal”的命名空间），而不需要在解绑时指定代理函数。

到jQuery1.6的时候，额外添加的函数会被传递到上下文对象改变的函数中。

到jQuery1.9的时候，当上下文对象context为null或者undefined的时候，被代理的函数也被称为这个代理的上下文对象context，这个时候jQuery.proxy的调用并没有改变传入函数的上下文对象了。

二，参考范文二

$.proxy 方法接受一个已有的函数，并返回一个带特定上下文的新的函数。

该方法通常用于向上下文指向不同对象的元素添加事件。

提示：如果您绑定从 $.proxy 返回的函数，jQuery 仍然可以通过传递的原先的函数取消绑定正确的函数。

---

语法 1

$(selector).proxy(function,context)

/**function  根据上下文context语境要执行的函数。
** context 函数的上下文语境(`this`)会被设置成这个 object 对象。即  function中的this指的就会是这个context
**/

语法 2

$(selector).proxy(context,name)

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

 

在某些情况下，我们调用Javascript函数时候，this指针并不一定是我们所期望的那个。例如：

 1 //正常的this使用
 2 $('#myElement').click(function() {
 3
 4     // 这个this是我们所期望的，当前元素的this.
 5
 6     $(this).addClass('aNewClass');
 7
 8 });
 9
10
11 //并非所期望的this
12 $('#myElement').click(function() {
13
14     setTimeout(function() {
15
16           // 这个this指向的是settimeout函数内部，而非之前的html元素
17
18         $(this).addClass('aNewClass');
19
20     }, 1000);
21
22 });

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

 1 $('#myElement').click(function() {
 2     var that = this;   //设置一个变量，指向这个需要的this
 3
 4     setTimeout(function() {
 5
 6           // 这个this指向的是settimeout函数内部，而非之前的html元素
 7
 8         $(that).addClass('aNewClass');
 9
10     }, 1000);
11
12 });

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

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

有两种语法：

jQuery.proxy( function, context )
/**function  根据上下文context语境要执行的函数。
** context 函数的上下文语境(`this`)会被设置成这个 object 对象。即  function中的this指的就会是这个context
**/

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

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

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

    setTimeout($.proxy(function() {

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

    }, this), 1000);

});

三，参考范文三

代码如下:

 <input type="button" value="测试" id="guoBtn" name="我是按钮的name"/>
 var obj = {
 name: "我是obj的name",
 sayName: function () {
 alert(this.name);
 }
 }
 $("#guoBtn").click(obj.sayName); //我是按钮的name
 // 如果我想访问obj的name怎么办呢?
 $("#guoBtn").click($.proxy(obj.sayName,obj));//"我是obj的name"
 $("#guoBtn").click($.proxy(obj, "sayName")); //"我是obj的name" 

四，参考范文四

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>菜鸟教程(runoob.com)</title>
 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
   var objPerson = {
     name: "John Doe",
     age: 32,
     test: function(){
       $("p").after("Name: " + this.name + "<br> Age: " + this.age);
     }
   };
   $("button").click($.proxy(objPerson,"test"));
 });
 </script>
 </head>
 <body>

 <button>执行 test 函数</button>
 <p></p>

 </body>
 </html>

执行 test 函数

Name: John Doe
Age: 32

五：自己的理解

1，首先它有两种表现形式，第一种就是jQuery.proxy( function, context )

在这种形式中function是一个特定的函数，而context是一个对象

2，第二种表现形式就是jQuery.proxy( context, name )

context是特定的对象，而name方法

3，这个函数主要来解决什么问题呢？

主要来解决当一个函数中有this关键字的时候，一般情况下代表这个函数，或者例如

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

代表id是Haorooms的html标签的内容，

但是现在出现一个需求就是，现在在上面的函数中又出现另一个函数，而现在想用this关键字代表里面的函数，也就是另外一个函数，就需要用这个方法了。

4，先来一个简单的案例

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>菜鸟教程(runoob.com)</title>
 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
   var objPerson = {
     name: "John Doe",
     age: 32,
     test: function(){
       $("p").after("Name: " + this.name + "<br> Age: " + this.age);
     }
   };
   $("button").click($.proxy(objPerson,"test"));
 });
 </script>
 </head>
 <body>

 <button>执行 test 函数</button>
 <p></p>

 </body>
 </html>

输出的结果是：

Name: John Doe
Age: 32

现在context就是objPerson

var objPerson = {
name: "John Doe",
age: 32,
test: function(){
$("p").after("Name: " + this.name + "<br> Age: " + this.age);
}
};

而name就是方法名：test

代表药执行的方法

而方法中的this就是objPerson

而不是 $("button")这个标签了。

5，来看下面的案例

 var parent = {
             text: "parent"
             , show: function () {
                 alert(this.text);
             }
         }
         var child = {
             text: "child"
             , show: function () {
                 alert(this.text);
             }
         }
         var show = $.proxy(parent.show, child);
         show();

         var show = $.proxy(child, 'show');
     show();

上面有两种方法其实都是一样的。parent.show代表函数：

也就是

show: function () {
alert(this.text);
}

而child代表对象就是

var child = {
text: "child"
, show: function () {
alert(this.text);
}
}

那么this也就是

var child = {
text: "child"
, show: function () {
alert(this.text);
}
}

所以输出来的this.text就是它了

同理：var show = $.proxy(child, 'show');就跟好理解了：

child对象代表

var child = {
text: "child"
, show: function () {
alert(this.text);
}
}

show就是方法的名字了

直接输出来的就是

child了

6，案例的升级分析

我们来分析一下

二，参考范文二

这个案例：这个我们要求的东西已经清楚了，那么我们来分析一下这行代码：

   $('#Haorooms').click(function() {
   setTimeout($.proxy(function() {
     $(this).addClass('aNewClass');
   }, this), 1000);
 });

它的换一种跟容易的写法就是

 $('#Haorooms').click(function() {
   setTimeout($.proxy(child.show, child), 1000);
 }); 

 var child = {
             show: function() {
             $(this).addClass('aNewClass');
   }}

   经过这样操作this的关键字就代表了var child = {
             show: function() {
             $(this).addClass('aNewClass');
   }}
   它，而不是$('#Haorooms')的html标签了。

这里这个this就代表setTimeOut的函数了，而不是$('#Haorooms')所代表的html的标签内的意思了