jQuery.proxy() 用法

IT技术 javascript jquery
2021-03-15 09:54:33

我正在阅读有关jQuery.proxy(). 它看起来很有希望,但我想知道在什么情况下最好使用。任何人都可以启发我吗?

3个回答

当您想要一个将this值绑定到特定对象的函数时。例如,在事件处理程序、AJAX 回调、超时、间隔、自定义对象等回调中。

这只是一个可能有用的情况的制造示例。假设有一个Person具有属性名称对象。它还链接到文本输入元素,每当输入值更改时,此人对象中的名称也会更新。

function Person(el) {
    this.name = '';

    $(el).change(function(event) {
        // Want to update this.name of the Person object,
        // but can't because this here refers to the element
        // that triggered the change event.
    });
}

我们经常使用的一种解决方案是将 this 上下文存储在一个变量中并在回调函数中使用它,例如:

function Person(el) {
    this.name = '';

    var self = this; // store reference to this

    $(el).change(function(event) {
        self.name = this.value; // captures self in a closure
    });
}

或者,我们也可以在jQuery.proxy这里使用,因此引用this指向 Person 的对象,而不是触发事件的元素。

function Person(el) {
    this.name = '';

    $(el).change(jQuery.proxy(function(event) {
        this.name = event.target.value;
    }, this));
}

请注意,此功能已标准化为 ECMAScript 5,其中现在包括bind 并且已经在某些浏览器上可用。

function Person(el) {
    this.name = '';

    $(el).change(function(event) {
        this.name = event.target.value;
    }.bind(this)); // we're binding the function to the object of person
}
+1 提到这已进入 ECMAscript。
2021-04-28 09:54:33
@AnsonMacKeracher 最好不要使用闭包,而是使用代理静态函数。这些答案并未表明代理可以与静态函数一起使用,因为self = this只有在创建内联函数时才能使用 hack
2021-05-09 09:54:33
更进一步,在 ECMAScript 6 (ES6) 中,箭头函数是要走的路 ( developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... ) ` function Person(el) { this.名称 = ''; $(el).change((event) => { this.name = event.target.value; }); }`
2021-05-14 09:54:33
是是更好的(更快,更有效)使用正关闭,或使用$ .proxy?
2021-05-16 09:54:33

这只是设置闭包上下文的一种速记方法,例如:

$(".myClass").click(function() {
  setTimeout(function() {
    alert(this); //window
  }, 1000);
});

然而,我们经常希望this保持与我们$.proxy()使用的方法相同,它用于,如下所示:

$("button").click(function() {
  setTimeout($.proxy(function() {
    alert(this); //button
  }, this), 1000);
});​

它通常用于延迟调用,或者任何你不想做声明闭包的普通方法的地方。将上下文指向对象的字符串方法......好吧,我还没有在日常代码中遇到实际用途,但我确信有应用程序,这取决于您的对象/事件结构是什么。

例如,如果您想创建回调。代替:

var that = this;

$('button').click(function() {
    that.someMethod();
});

你可以做:

$('button').click($.proxy(this.someMethod, this));

或者,如果您创建了一个接受回调的插件,并且您必须为回调设置特定的上下文。