Question

我有以下代码（http://jsbin.com/disofaji/1/）：

var test = {
  person: "nick",

  init: function() {
    $('#foo').click(function() {
      // how to access the person? 
      console.log(this.person);
    });
  },

};

test.init();

问题是，我得到了输出undefined，我想知道如何访问我的点击处理程序中的person。

注意：点击处理程序只是我的问题的一个示例，我也在其他上下文中。

Answer 1

有一个众所周知的“技巧”来保留对函数原始范围的引用：

init: function() {
  var self = this;
  $( '#foo' ).click( function() {
    console.log( self.person );
  } );
},

基本上，您需要将this变量“缓存”到另一个变量中（在本例中称为self）。然后，在您的点击处理程序中，您可以访问self变量，就好像它是您的点击处理程序之外的this变量。

另一种选择是简单地使用骨干的事件委托：

var test = {

  events: {
    "click #foo": "foo_click_handler"
  }

  person: "nick",

  foo_click_handler: function() {
      // callback is bound to the view scope, so "this" can be used normally.
      console.log( this.person );
  },

};

来自the docs：

在传递给jQuery之前，所有附加的回调都绑定到视图，因此在调用回调时，this继续引用视图对象。

Answer 2

这是因为在你的点击处理程序中，这实际上是指触发事件的控件。

我已经更新了您的代码，但它确实有效。以下是您需要做的事情

var test = {
  person: "nick",

  init: function() {
    var obj = this;
    $('#foo').click(function() {
      // how to access the person? 
      alert("inside");
      console.log(obj.person);
    });
  },

};


test.init();

Answer 3

而不是使用var self = this;即。保存对您的对象或其他事件库的引用，我会使用bind()（包含在JavaScript标准库中），这将使您的代码更简洁，更模块化。

它绑定的是它使用函数logperson并将它绑定到你传递它的任何对象上，在我们的例子this中。

这确实会使您无法使用匿名函数，但根据个人喜好，它总是更好。

var logperson = function() {
    console.log(this.person);
};

var test = {
    person: "nick",

    init: function() {

        $('#foo').click(logperson.bind(this));

    };
 };

对象文字中JS Scope中的未定义变量

3 个答案: