jQuery | $.proxy() 方法

在 jQuery 中，$.proxy() 方法用于改变函数执行上下文（即 this 指向）。

语法

$.proxy(function, context)

其中：

• function：必填，代表需要改变执行上下文的函数；
• context：必填，代表需要把函数执行上下文改变到的对象。

示例

var obj = {
  name: 'John',
  sayHello: function() {
    console.log('Hello, ' + this.name + '!');
  }
};

// 调用 obj.sayHello() 方法会正确输出 'Hello, John!'
obj.sayHello();

var proxy = $.proxy(obj.sayHello, obj);

// 调用代理函数 proxy() 会输出 'Hello, John!'
proxy();

在上面的示例中，我们创建了一个对象 obj，它包含一个方法 sayHello()，内部打印出与 name 属性相关联的问候语。然后，我们使用 $.proxy() 方法，将 obj.sayHello 方法中的 this 绑定到 obj 上。之后，在 proxy() 方法中调用 sayHello() 会正确输出。

常见问题

1. 为什么要使用 $.proxy() 方法？

当我们遇到需要改变函数执行上下文的场景时，可以使用 $.proxy() 方法来完成这个需求。常见的场景比如：

• 给事件处理函数绑定执行上下文；
• 在回调函数中访问外部对象；

使用 $.proxy() 时，会返回一个新的函数，其执行上下文已被绑定到 context 对象上。

2. 比起 JavaScript 原生的 bind() 方法，$.proxy() 有何优势？

jQuery 的 $.proxy() 和 JavaScript 原生的 bind() 方法非常类似。使用它们进行绑定，都可以改变函数执行上下文。

不同点在于，$.proxy() 可以在较早版本的 IE 浏览器中使用，而 bind() 是从 ES5 开始引入的，IE9 以下的浏览器不兼容。

此外，$.proxy() 的使用语法更简洁，只需传递函数和上下文对象即可。

总结

• $.proxy() 方法用于改变函数执行上下文；
• 方法的第一个参数为需要改变执行上下文的函数，第二个参数为需要把函数执行上下文改变到的对象；
• $.proxy() 返回一个新的函数，其执行上下文已被绑定到 context 对象上。
• $.proxy() 在较早版本的 IE 浏览器中使用，比起 JavaScript 原生的 bind() 方法具有兼容性优势。