javascript - 简单的 Javascript 对象和“this”

Question

快速提问。为什么以下给出this.testFunction is not a function错误？

Test = {
    data: true,

    testFunction: function() {
        this.data = true;
    },

    initialize: function() {
        this.data = false;
        this.testFunction();
        console.log(this.data);
    }
};

$(document).ready(Test.initialize);

Answer 1

你不是在打电话Test.initialize，你是在传递它的价值。这将它与它的上下文分开，所以当它被调用时，thisis not Test。

解决这个问题的常用方法是使用匿名函数表达式：

$(document).ready(function () { Test.initialize() });

您还可以使用（具有更有限的浏览器支持）bind：

$(document).ready(Test.initialize.bind(Test));

Answer 2

Javascript 的设计者对 this 关键字背后的规则有些调皮。this采用 MemberExpression 左侧的值，即：

var a = {
  b: function () {
    // this = a
  }
};

a.b();

当您执行以下操作时，这会产生问题：

var universe = {
  answer: 42,
  getTheAnswer: function () {
    return this.answer;
  }
}

var foobar = universe.getTheAnswer;

foobar();

在这种情况下this，函数getTheAnswer不会绑定到universe对象而是绑定到全局对象，这是邪恶的。你可以做些什么来解决这个问题是使用bind功能（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind），即：

var foobar = universe.getTheAnswer.bind(universe);

foobar(); // => 42

因此，在您的情况下，您可以简单地执行以下操作：

$(document).ready(Test.initialize.bind(Test));

希望它有所帮助！

Answer 3

在这种情况下， this 设置为不具有函数 testFunction() 的全局对象。有关 this 关键字的详细说明，请参阅此答案：“this”关键字如何工作？