Question

我有以下代码javascript

var Obj = {
    init: function () {
        this.over = $('<div />').addClass('over');
        $('body').append(this.over);
        $('.click').on('click', this.show);
    },
    show: function () {
        console.log(this.over);
    }
}

Obj.init();

如果是这样，当用户点击.click链接时，它会触发show功能并注销在init功能中创建的dom元素。 但问题是它注销未定义。为什么？如何解决？

Answer 1

试试这个：

var Obj = {
init: function () {
    this.over = $('<div />').addClass('over');
    $('body').append(this.over);
    $('.click').on('click', this.show);
},

show: function () {
    // here the 'this' is the button , not the obj object ..
    console.log($('.over'));
}
}

Obj.init();

另一种选择：

var Obj = {
init: function () {
    this.over = $('<div />').addClass('over');
    $('body').append(this.over);
    var that = this;
    $('.click').on('click', function(e){
       that.show.call(that, e); // calling the show function with call, causing 'this' to be obj
    });
},

 // 'this' is the obj
show: function (e) {
    console.log(this.over);
}
}

Obj.init();

Answer 2

此处的问题是this（Obj）的范围。

使用以下代码解决您的问题。

var Obj = {
init: function () {
    this.over = $('<div />').addClass('over');
    $('body').append(this.over);
    $('.click').on('click', $.proxy(this.show, this));
},

show: function () {
    console.log(this.over);
}
};

Obj.init();

详细了解jQuery.proxy

Answer 3

因为jQuery将点击的DOM元素注入'this'而不是'Obj'对象。一个解决方案是关闭：

var Obj = {
  init: function () {
    this.over = $('<div />').addClass('over');
    $('body').append(this.over);
    $('.click').on('click', this.show());
  },

  show: function () {
    var self = this;
    return function () {
        console.log("over:", self.over);
    }
  }
}
Obj.init();

Answer 4

您将<{1}}中存储的函数传递给this.show。当它被调用时，它不会在on的上下文中调用，因此Obj不是this。

您需要创建一个新函数，该函数不依赖于在Obj的上下文中调用。

最简单的方法是使用Obj：

bind

但这有limited browser support。

您也可以使用闭包：

$('.click').on('click', this.show.bind(this));

Answer 5

使用jquery将函数绑定到事件时，调用此函数的上下文是已单击的dom对象。

var Obj = {
init: function () {
    this.over = $('<div />').addClass('over');
    $('body').append(this.over);
    var that = this;
    $('.click').on('click', function(){ 
        // console.log( this ) will log the dom object
        that.show.call( that ) 
     } );
},

show: function () {
    console.log(this.over);
}
}

Obj.init();

无法访问对象文字内的另一个函数中的变量

5 个答案: