मैं प्रतिक्रिया में ES6 तीर कार्यों पर काम कर रहा हूँ। एरो फंक्शन में 'यह' कीवर्ड क्रोम डीबगर कंसोल में अजीब तरह से प्रदर्शित होता है। 'यह' वर्तमान ऑब्जेक्ट संदर्भ में ठीक काम करता है लेकिन जब क्रोम डीबगर कंसोल में मान चेक किया जाता है, तो यह गलत मान दिखाता है।

मैंने पहले ही "यह" कीवर्ड कैसे काम करता है? की जांच कर ली है, लेकिन वह ऐसा करता है मेरे सवाल का जवाब नहीं। मेरा सवाल यह नहीं है कि यह कीवर्ड कैसे काम कर रहा है, बल्कि यह अजीब मूल्य है जो कंसोल में प्रदर्शित होता है।

डिबगर कंसोल में, यह विंडो के संदर्भ में दिखाता है लेकिन वर्तमान उदाहरण को इंगित करके सही ढंग से काम करता है।

मेरे पास इस मुद्दे को प्रदर्शित करने के लिए एक वीडियो बनाने के अलावा कोई विकल्प नहीं था। अगर कुछ जावास्क्रिप्ट विशेषज्ञ मुझे इसे हल करने में मदद करते हैं तो सराहना करेंगे।

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;
-3
Rahul Agarwal 30 सितंबर 2019, 11:52

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

मूल प्रश्न में कोड सिर्फ एक स्रोत मानचित्र है (क्रोम डेवलपर टूल सेटिंग्स में सक्षम)। मुझे यकीन नहीं है कि वेबपैक यहां अपराधी है क्योंकि यह मूल 'इस' को रखने के लिए वर्तमान संदर्भ को पकड़ने के लिए एक नया '_this' बनाता है (विंडो ऑब्जेक्ट को इंगित करने के लिए)। इसलिए, जब आप स्रोत मानचित्र को डीबग करते हैं, तो क्रोम डीबगर कंसोल में मूल 'यह' (विंडो) दिखाता है लेकिन वर्तमान संदर्भ (_this) में कथन निष्पादित करता है।

0
E_net4 uses dynamic dispatch 1 अक्टूबर 2019, 16:00