Question

此代码

beforeEach(() => {
        this.asd= '123';
        this.sdf= '234';
        this.dfg= '345';
        this.fgh= '456';
});

巴贝尔已经将

描述为：

beforeEach(function() {
        undefined.asd= '123';
        undefined.sdf= '234';
        undefined.dfg= '345';
        undefined.fgh= '456';
});

为什么？

Answer 1

据推测，代码位于模块的顶级范围内，因此它处于严格模式（模块的默认模式是严格模式），或者是以严格模式评估的文件（因为它有"use strict"或因为Babel的默认值。

简短版本：如果您在调用回调时期望this确定beforeEach，则您需要使用function功能，而不是箭头功能。请继续阅读为什么Babel正在进行转换：

关于箭头函数的基本原理（除了简洁之外）是它们从它们的上下文继承this（就像它们关闭的变量一样），而不是由调用者设置它。在严格模式下，全局范围内的this为undefined。所以Babel在编译时知道箭头函数中的this将undefined并优化它。

你在评论中说这是在另一个函数中，但我的猜测是它在另一个箭头函数中，例如：

describe(() => {
    beforeEach(() => {
        this.asd= '123';
        // ...
    });
});

由于Babel知道this回调中undefined为describe，因此知道this为undefined beforeEach回调。

如果您将代码置于松散模式上下文中，或者在编译时无法确定this的函数调用内，则不会这样做。例如，在严格模式下你的

beforeEach(() => {
  this.asd= '123';
  this.sdf= '234';
  this.dfg= '345';
  this.fgh= '456';
});

确实可以转移到

'use strict';
beforeEach(function () {
  undefined.asd = '123';
  undefined.sdf = '234';
  undefined.dfg = '345';
  undefined.fgh = '456';
});

但是这个：

function foo() {
  beforeEach(() => {
    this.asd= '123';
    this.sdf= '234';
    this.dfg= '345';
    this.fgh= '456';
  });
}

转化为

'use strict';

function foo() {
  var _this = this;

  beforeEach(function () {
    _this.asd = '123';
    _this.sdf = '234';
    _this.dfg = '345';
    _this.fgh = '456';
  });
}

...因为Babel不知道如何调用foo，因此this会是什么。

Answer 2

我有这个问题，并将我的胖箭头功能改为普通功能，它似乎再次起作用。

() => {}

更改为

function() {}

Answer 3

箭头函数没有自己的this或参数绑定。相反，这些标识符像任何其他变量一样在词法范围内解析。这意味着在箭头函数内部，this和参数引用了this的值以及在定义箭头函数的环境中（即，箭头函数“外部”）的参数。
在您的方案中，全局范围内的this未定义。在编译时，babel将在箭头功能内将this转换为undefined。

如果您对此不太熟悉，请考虑阅读

Babel用undefined替换它

3 个答案: