Javascript jQuery.proxy() 用法

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3349380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 04:16:16  来源:igfitidea点击:

jQuery.proxy() usage

javascriptjquery

提问by Reigel

I was reading the api about jQuery.proxy(). It looks promising but I was wondering in what situation is this best use. Can anyone enlighten me?

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

回答by Anurag

When you want a function that has the thisvalue bound to a specific object. For example, in callbacks such as event handlers, AJAX callbacks, timeouts, intervals, custom objects, etc.

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

This is just a manufactured example of a situation where it might be useful. Assuming there is a Personobject which has a property name. It is also linked to a text input element, and whenever the input value changes, the name in this person object gets updated too.

这只是一个可能有用的情况的制造示例。假设有一个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.
    });
}

One solution that we often use is to store the this context in a variable and use that inside the callback function such as:

我们经常使用的一种解决方案是将 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
    });
}

Alternatively, we could have used jQuery.proxyhere so the reference to thisrefers to the object of Person instead of the element that triggered the event.

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

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

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

Note that this feature has been standardized into ECMAScript 5 which now includes the bindmethod borrowed from prototypejsand is already available on some browsers.

请注意,此功能已标准化到 ECMAScript 5 中,它现在包括bindprototypejs借用的方法,并且已经在某些浏览器上可用。

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
}

回答by Nick Craver

It's just a shorthand method of setting the context for a closure, for example:

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

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

However often we want thisto remain the same as the method we were in, which $.proxy()is used for, like this:

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

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

It's usually used for delayed calls, or anywhere you don't want to do a longhand method of declaring a closure. The string method of pointing the context to an object...well I haven't come across a practical use in every day code yet, but I'm sure there are applications, just depends what your object/event structure is.

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

回答by Felix Kling

For example if you want to create callbacks. Instead of:

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

var that = this;

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

you can do:

你可以做:

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

Or if you create a plugin that accepts callbacks and you have to set a specific context for the callback.

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