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

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

您将存储在中的函数传递this.show给on. 当它被调用时，它不会在Objso thisis not的上下文中被调用Obj。

您需要创建一个不依赖于在Obj.

最简单的方法是使用bind：

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

但这对浏览器的支持有限。

您还可以使用闭包：

var myObj = this;
var show = function () {
    myObj.show()
}
$('.click').on('click', show);

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();