javascript - 试图在javascript中理解`this`

我有一个具有许多功能的物体：

var someScopeScopedObject = {
  myFunction1: function () {
    console.log('foo');
  },

  myFunction2: function () {
    this.myFunction1();
  }

 init: function (callback) {
    callback();
  }
}

因此，如果我呼叫someScopeScopedObject.myFunction2则效果很好

但是，如果我执行someScopeScopedObject.init(someScopeScopedObject.myFunction2)，则会收到this.myFunction1 is undefined错误

当我以这种方式调用函数时，为什么this无效？

最佳答案

当您将myFunction2作为某物的参数传递时，它将丢失对它所属对象的引用。 this现在是指函数本身，而不是someScopeScopedObject，因此是您的问题:)

这也是为什么某些库采用对象上下文作为方法的原因。茉莉花的spyOn(someScopeScopedObject, "myFunction2")，以保持作用域正确。

一个变通方法示例（例如茉莉花使用的变通方法）可能如下所示：

var someScopeScopedObject = {
  myFunction1: function () {
    console.log('foo');
  },

  myFunction2: function () {
    this.myFunction1();
  },

  init: function (context, callbackName) {
    context[callbackName]();
  }
}

这将允许您执行以下操作：

someScopeScopedObject.init(someScopeScopedObject, "myFunction2");

这不是最漂亮的。或者，您可以将对象绑定到函数（因此作用域保持不变）。假设您的原始代码在someScopeScopedObject中：

someScopeScopedObject.init(someScopeScopedObject.myFunction2.bind(someScopeScopedObject));

这些都不是很漂亮，实际上，这是因为从外部提供属于对象的函数作为对该对象的回调很奇怪。

最好的解决方案可能是：

someScopeScopedObject.init(function() {
    someScopeScopedObject.myFunction2();
});