jQuery | $.proxy() 方法

简介

$.proxy() 方法用于将指定函数的作用域绑定到指定的上下文对象。在 JavaScript 中，函数是一等公民，可以被作为普通对象传递。然而，在某些情况下，我们需要在函数被调用时指定函数作用域，这时候就需要使用 $.proxy() 方法。

语法

$.proxy(function, context)

参数

• function：需要绑定上下文的函数，也可以是函数名称。
• context：指定的上下文对象，即函数中 this 关键字所指的对象。

示例

示例一

<button id="btn">点击 me！</button>

$(function() {
  $('#btn').on('click', $.proxy(function() {
    console.log(this);
  }, { name: 'Tom' }));
});

在上面的代码中，我们使用 $.proxy() 方法将匿名函数的作用域从全局对象 window 绑定到对象 { name: 'Tom' } 上。当点击按钮时，控制台会输出 { name: 'Tom' }。

示例二

var obj = {
  x: 1,
  y: function() {
    console.log(this.x);
  }
};

var func = obj.y;
func(); // undefined
$.proxy(obj.y, obj)(); // 1

在上面的代码中，我们首先通过对象字面量定义了对象 obj，其中包含了属性 x 和方法 y。接着我们将 obj.y 赋值给 func，并直接调用 func()，控制台输出 undefined。这是因为函数调用时没有指定作用域，而此时的默认作用域为全局对象 window，所以控制台直接输出了 undefined。而当我们使用 $.proxy(obj.y, obj)() 调用 y 方法时，我们将 y 方法的作用域绑定到对象 obj 上，控制台会输出 1。

注意事项

• 如果需要传递参数到函数中，可以在 $.proxy() 的第三个参数及以后位置传入参数。例如：$.proxy(func, context, arg1, arg2, ...)。

总结

通过 $.proxy() 方法，我们可以方便地修改函数调用时的作用域，避免了函数代码中使用 bind() 方法或者 self 之类的“hack”方法。同时，$.proxy() 也是 jQuery 这个优秀库所提供的小工具之一，能够帮助我们提高代码书写和维护的效率，建议在实际开发中多加使用。