Question

我在javascript中有以下课程：

function User(aJid){
    this.jid = aJid;
    this.name = '';
    this.uni = '';
    this.edad = '';
    this.foto = '';
    this.avatar = '';
    this.initialize2 = function(){

        $('#edit_vcards').on('click', '#enviar_vcard', function(){
            //alert("enviando...");
            console.log(this);
        });
    };

正如您所看到的，我有一个方法“initialize2”，它将函数绑定到DOM中的某些元素。在那里我做了console.log(this)打印我们绑定方法的DOM元素，而不是执行方法initialize2的对象。如何从该功能访问该对象？它就像绑定的函数的范围是整个DOM而不是对象。无论如何要做我想做的事情？

Answer 1

function User(aJid){
    this.jid = aJid;
    this.name = '';
    this.uni = '';
    this.edad = '';
    this.foto = '';
    this.avatar = '';
    this.initialize2 = function(){
    var that = this;  //store a reference to maintain scope

        $('#edit_vcards').on('click', '#enviar_vcard', function(){
            //alert("enviando...");
            console.log(that);  //use that variable here
        });
    };

Answer 2

尝试将obj this传递给.on，然后在处理程序内部使用event.data来访问obj this。见下文，

this.initialize2 = function(){

    $('#edit_vcards').on('click', '#enviar_vcard', {obj_this: this }, function(){
        //alert("enviando...");
        console.log(event.data.obj_this); //should be the obj this
    });
};

Answer 3

将外部this传递给event.data：

$('#edit_vcards').on('click', { outerThis: this }, function (event) {
    console.log(event.data.outerThis);
});

Answer 4

如今使用ES6它可以更加优雅

$('#edit_vcards').click( () => {
            //alert("enviando...");
            console.log(this); // all your variables are availabled here
        });

或者甚至喜欢（如果你只需要一行）：

$('#edit_vcards').click( () => console.log(this) );

注意：此代码无法直接使用，例如应使用balel进行编译。

如何防止jquery覆盖“this”

4 个答案: