Question

考虑以下两个文件：

// push.js
export default (item) => {
  this.items.push(item);
};

-

// index.js
import push from './push';

class pushy {
  constructor() {
    this.items = [];
  }
}

pushy.prototype.push = push;

export default pushy;

预期的效果是导出的pushy有push方法，可以推送到this.items。但实际结果是错误。

TypeError：无法读取未定义
的属性'items'

错误表明this似乎是一个问题。

现在有趣的是，如果要恢复到require和module.exports，一切都会按预期完美运行。

// push.js
module.exports = function(item) {
  this.items.push(item);
};

-

// index.js
function pushy() {
  this.items = [];
}

pushy.prototype.push = require('./push');

module.exports = pushy;

据我所知，两个版本应该是相同的，但它们不是。有没有办法让这个工作与ES6或我将不得不求助于使用旧的语法？

Answer 1

arrow functions的重点在于它们绑定了词法this值并且永远不会放弃它。因此，在这种情况下您不能使用它们。您必须对this值变化的函数使用函数表达式（或声明）。

使用函数表达式没有任何问题。它们可能看起来不太好（在我看来），但它们实际上只是另一种工具。

使用ES6导入向类原型添加方法会产生'this'错误

1 个答案: