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的调用并没有改变传入函数的上下文对象了。

巴特西

jQuery proxy详解

jQuery.proxy( context, name )

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

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

additionalArguments:给函数传入的参数

最新文章

热门文章