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

Question

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:

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

The second console.log outputs:

<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. Ie,

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?

Answer 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 .

Answer 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.

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.