javascript - 如何防止jquery覆盖“this”

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进行额外编译，例如。