Babel заменяет это на undefined

Этот код

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';
});

Почему?

Ответы

Ответ 1

Предположительно, этот код находится в области верхнего уровня модуля, поэтому он в строгом режиме (по умолчанию для модулей - строгий режим) или файл, который оценивается в строгом режиме (поскольку он имеет "use strict" или из-за настроек Babel).

Краткая версия. Если вы ожидаете, что this будет определяться beforeEach при вызове вашего обратного вызова, вы хотите использовать функцию function, а не функцию стрелки. Читайте дальше, почему Babel транслирует как есть:

Фундаментальная функция стрелок (кроме краткости) заключается в том, что они наследуют this из своего контекста (например, переменную, которую они закрывают), вместо того, чтобы установить ее вызывающим. В строгом режиме this в глобальном масштабе undefined. Так что Вавилон знает во время компиляции, что this внутри функции стрелки будет undefined и оптимизирует его.

Вы сказали в комментариях, что это внутри другой функции, но я предполагаю, что она находится внутри другой функции стрелки, например:

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

Так как Бабель знает, что 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';
  });
}

... потому что Бабель не знает, как будет называться foo, и, следовательно, что this будет.

Ответ 2

У меня была эта проблема, и я изменил свою функцию жирной стрелки на нормальную функцию, и она, похоже, снова работала.

() => {}

изменено на

function() {}