это ключевое слово в функциях стрелок корректно работает в текущем контексте, но показывает неверное значение в консоли отладчика Chrome

Question

Я работаю над функциями стрелок ES6 в реакции. Ключевое слово this в функции стрелки отображается странно в консоли отладчика Chrome. «this» отлично работает в текущем контексте объекта, но когда значение проверяется в консоли отладчика chrome, оно показывает неверное значение.

Я уже проверил Как работает ключевое слово «this»? но это не отвечает на мой вопрос. Мой вопрос не о том, как работает это ключевое слово, а о странном значении, которое оно отображает в консоли.

В консоли отладчика оно отображается как ссылающееся на окно, но работает правильно, указывая на текущий экземпляр.

У меня не было выбора, кроме как создать видео для демонстрации проблемы. Буду признателен, если какой-нибудь эксперт по Javascript поможет мне решить эту проблему.

https://youtu.be/FyF-DK8xcpg

Код:

import React, { Component } from 'react';

class App extends Component {

  state = {name: "Rahul"}

  nameChanger = () => {
    debugger;
    console.log("This is" + this.Window.name);
    this.setState({name: "New Rahul"})
  }


  render() {

    setTimeout(this.nameChanger, 1000);

    return (
      <div className="App">
         {this.state.name}
      </div>
    );
  }
}

export default App;

Answer 1

Приведенный выше код реагирования фактически скомпилирован веб-пакетом (я должен был предоставить эту информацию раньше) в:

var App = function (_Component) {
  _inherits(App, _Component);

  function App() {
    var _ref;

    var _temp, _this, _ret;

    _classCallCheck(this, App);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = App.__proto__ || Object.getPrototypeOf(App)).call.apply(_ref, [this].concat(args))), _this), _this.state = { name: "Rahul" }, _this.nameChanger = function () {
      debugger;
      _this.setState({ name: "New Rahul" });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  _createClass(App, [{
    key: "render",
    value: function render() {

      setTimeout(this.nameChanger, 1000);

      return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
        "div",
        { className: "App", __source: {
            fileName: _jsxFileName,
            lineNumber: 17
          },
          __self: this
        },
        this.state.name
      );
    }
  }]);

  return App;
}(__WEBPACK_IMPORTED_MODULE_0_react__["Component"]);

/* harmony default export */ __webpack_exports__["a"] = (App);

Код в исходном вопросе - это просто исходная карта (включено в настройках инструментов разработчика Chrome). Я не уверен, что веб-пакет является виновником здесь, потому что он создает новое «_this» для хранения текущего контекста, сохраняя оригинальное «this» как есть (чтобы указать на объект окна). Таким образом, когда вы отлаживаете исходную карту, отладчик chrome показывает оригинальное 'this' (окно) в консоли, но выполняет оператор в текущем контексте (_this).