如何从传递给实例上调用的“bind”方法的预定义函数中访问对象实例的上下文？

I have this snippet:

我有这个片段:

var test_img = $("<img />");
test_img.attr("src", img_url);
test_img.unbind("load");

console.log(test_img);

test_img.bind("load", function ()
    {
        console.log(this);
    });

The first console.log outputs:

第一个console.log输出:

[img]
    0: img  // expandable
    length: 1
    __proto__: Object[0]  // expandable

The second console.log outputs:

第二个console.log输出:

<img src=​"/​images/​Tree.jpg">​

Why are the two outputs different?

为什么两个输出不同?

Also, I need to define the function that gets passed to test_img.bind elsewhere. I.e.,

另外,我需要定义在其他地方传递给test_img.bind的函数。即,

function predefined_function()
{
    console.log(new_this);
}

var test_img = $("<img />");
test_img.attr("src", img_url);
test_img.unbind("load");

console.log(test_img);

test_img.bind("load", predefined_function);

How can I make it so that new_this is the same as this in the original snippet?

如何才能使new_this与原始代码段中的相同?

2 个解决方案

#1

As an answer to your first question, the difference is because the constructor of the first output is jQuery.fn.init, but the constructor of the second output is HTMLImageElement. You can access image from first output using test_img[0].
If you want to use some predefined function, just replace new_this with this.

作为第一个问题的答案,区别在于第一个输出的构造函数是jQuery.fn.init,但第二个输出的构造函数是HTMLImageElement。您可以使用test_img [0]从第一个输出访问图像。如果要使用某些预定义函数,只需将new_this替换为this。

#2

See this example:

看这个例子:

https://jsfiddle.net/y89zk2k8/1/

var textDiv = $("<div />").append("click me :)"),
    func = function() {
        var $me = $(this);
    console.log($me);
    };

textDiv.off("click");

console.log(textDiv);

textDiv.on("click", func);

$("body").append(textDiv);

1. To make new_this same as this: You need to change it to the Jquery Oject in the event response function.

   要使new_this与此相同:您需要在事件响应函数中将其更改为Jquery Oject。

2. Define the function that gets passed to the event elsewhere: Pass the function as param to the event response function.

   定义在其他地方传递给事件的函数:将函数作为参数传递给事件响应函数。

3. Use .on to replace .bind, because .bind may be removed from future versions at any time. There is no reason to keep using .bind and every reason to prefer .on instead.

   使用.on替换.bind,因为.bind可能会在以后的版本中被删除。没有理由继续使用.bind和所有理由而不是.on。