JavaScript - 对象函数

Question

我有一个定义如下的 JavaScript 对象：

const test = {
  myFirstFunction: () => {
    console.log('MyFirstFunction called');
    this.mySecondFunction('data');
  },

  mySecondFunction: (param) => {
    console.log('MySecondFunction called ' + param);
  }
};

test.myFirstFunction();

当我运行此代码时，我收到一条错误消息：

“未捕获类型错误：this.mySecondFunction 不是函数”。

我不明白为什么。我做错了什么？

Answer 1

箭头函数没有自己的

this

，它默认指向父级

this

。

在你的

myFirstFunction & mySecondFunction

中，父母是

window

。当你打电话给

this.mySecondFunction()

时，实际上是在寻找不存在的

window.mySecondFunction()

。这就是它抛出错误的原因。

更改为正常功能，就可以正常工作了。

const test = {
  myFirstFunction: function() {
    console.log('MyFirstFunction called');
    this.mySecondFunction('data');
  },

  mySecondFunction: function(param) {
    console.log('MySecondFunction called ' + param);
  }
};

test.myFirstFunction();

Answer 2

MDN 指出：

箭头函数没有自己的“this”绑定，并且应该 不能用作方法。

箭头函数根据定义箭头函数的范围建立“this”。

因此在这种情况下，“this”将不是“测试”对象。

Answer 3

原因是箭头函数不会绑定自己的

this

上下文，相反

this

仍然是

window

尝试

test.mySecondFunction('data')

代替

Answer 4

箭头函数不绑定自己的 this，它们从父作用域继承 this（“词法作用域”）。

因此，在常规函数中，作用域默认绑定到全局函数。另一方面，箭头函数没有自己的 this，但它们从父作用域继承它（在本例中是全局作用域）

const test = {
  myFirstFunction: function() {
    console.log('MyFirstFunction called');
    this.mySecondFunction('data');
  },

  mySecondFunction: function(param)  {
    console.log('MySecondFunction called ' + param);
  }
};

test.myFirstFunction();