箭头功能中的此关键字在当前上下文中可以正常工作，但在chrome调试器控制台中显示不正确的值

Question

我正在从事ES6箭头功能的反应。箭头功能中的'this'关键字在chrome调试器控制台中奇怪地显示。 'this'在当前对象上下文中可以正常工作，但是在chrome调试器控制台中检查该值时，它显示的值不正确。

我已经检查了How does the "this" keyword work?，但不能回答我的问题。我的问题不是关于这个关键字如何工作，而是关于它在控制台中显示的怪异值。

在调试器控制台中，它显示为引用窗口，但是通过指向当前实例可以正常工作。

我别无选择，只能制作一个视频来演示这个问题。如果某些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

我终于找到了确切的原因。如果您发现该查询是真实的，并且对您的回答有帮助，请所有对此问题不满意的人重新考虑他们的决定。

以上反应代码实际上是由webpack编译的（我之前应该已经提供了此信息）：

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开发人员工具设置中启用）。我不确定webpack是否是罪魁祸首，因为它创建了一个新的'_this'来保存当前上下文，并保持原始的'this'不变（指向窗口对象）。因此，当您调试源映射时，Chrome调试器会在控制台中显示原始的“ this”（窗口），但会在当前上下文（_this）中执行该语句。