Question

此代码：

'use strict'
function Ob() {}

Ob.prototype.add = () => {
  this.inc()
}

Ob.prototype.inc = () => {
  console.log(' Inc called ');
}

module.exports = new Ob();

此代码使用：

'use strict'
const ob = require('./ob')
ob.add();

调用阶梯时，我收到此错误：

this.inc is not a function

当我将第一个代码段更改为：

'use strict'
function Ob() {}

Ob.prototype.add = function() {
  this.inc();
}

Ob.prototype.inc = function() {
  console.log(' Inc called ');
}

module.exports = new Ob();

一切都很好，我得到了：

Inc called

为什么第一个版本会抛出？

更新：如何使用箭头功能使其工作？

Answer 1

使用箭头函数不起作用，因为它们捕获当前范围的this。在您的示例代码中

'use strict'

function Ob() {}

Ob.prototype.add = () => {
  this.inc()
}

Ob.prototype.inc = () => {
  console.log(' Inc called ');
}

module.exports = new Ob();

此代码运行时没有this（好吧，有一个，但至少它不是构造函数创建的对象实例）。基本上，这段代码相当于：

'use strict'

const that = this;

function Ob() {}

Ob.prototype.add = function () {
  that.inc()
}

Ob.prototype.inc = function () {
  console.log(' Inc called ');
}

module.exports = new Ob();

然后很明显实际上that.inc()没有任何功能。这就是为什么它不起作用。

如何使用箭头功能修复此问题？嗯，我会说，不要在这里使用箭头函数，因为它完全没有意义，而且它们不仅仅是编写“普通”函数的另一种方式，它们有些不同。

如何解决这个问题？使用旧式function关键字，一切都会按预期工作： - ）

Answer 2

箭头功能不会引入新的上下文。这意味着在箭头函数this内将是它所包含的函数的上下文。

在以下示例中，IIFE创建了window

的上下文

(function () {
  function Ob() {}

  Ob.prototype.test = () => {
    console.log(this === window);
  };

  o = new Ob();
  o.test(); // true
}());

如果您想使用具有自己上下文的函数，则必须使用完整的function关键字。

(function () {
  function Ob() {}

  Ob.prototype.test = function () {
    console.log(this === window);
  };

  o = new Ob();
  o.test(); // false
}());

.prototyped箭头函数未定义this.function

2 个答案: