this keyword in arrow functions work correctly on current context but show incorrect value in chrome debugger console

Question

I am working on ES6 arrow functions in react. The 'this' keyword in the arrow function displays weirdly in the chrome debugger console. 'this' works fine in the current object context but when the value is checked in chrome debugger console, it shows incorrect value.

I already checked the How does the "this" keyword work? but that does not answer my question. My question is not about how this keyword is working but the weird value it displays in console.

In the debugger console, it shows as referring to the window but works correctly by pointing to the current instance.

I had no option but to create a video to demonstrate the issue. Would appreciate if some Javascript expert helps me resolve this.

https://youtu.be/FyF-DK8xcpg

Code:

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;

`In the debugger console, it shows as referring to the window` are you just typing `this` in the console? You may need to read how `this` works — Jaromanda X, Sep 30 '19 at 08:54
I already checked the https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work? but that does not answer my question. My question is not about how this keyword is working but the incorrect value it displays in console. — Rahul Agarwal, Sep 30 '19 at 09:37
@JaromandaX Just typing `this` in the console while being paused at a breakpoint. Which should expose all identifiers in the current scope. — Bergi, Sep 30 '19 at 09:39
Chrome devtools [are known to have issues with `this` in arrow functions](https://stackoverflow.com/q/54590233/1048572), although so far I've only heard of it when the arrow function code doesn't use `this` at all, or when the code was transpiled. — Bergi, Sep 30 '19 at 09:42
In the video, the breakpoint is paused at 'current object' context that is not window still it shows as 'window' in the console. But if I execute the 'this' statement, it works correctly in the 'object context'. I am sorry if I am not clear with the explanation of the problem, let me know to edit and provide more details. — Rahul Agarwal, Sep 30 '19 at 09:45

score 0 · Accepted Answer · edited Oct 01 '19 at 13:00

The react code above is actually compiled by webpack (I should have provided this information before) into:

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

The code in the original question is just a source map (Enabled in chrome developer tools settings). I am not sure if webpack is the culprit here because it creates a new '_this' to hold the current context keeping the original 'this' as it is (to point to window object). So, when you debug the source map, the chrome debugger shows the original 'this' (window) in the console but executes the statement in current context (_this).

this keyword in arrow functions work correctly on current context but show incorrect value in chrome debugger console

1 Answers1