reactjs - 如果它没有在构造函数中绑定 this，为什么它在反应组件方法中解析为 undefined 而不是 window/global-env

Question

只是描述为标题。

我得到了如何解决这种情况的答案 -this指undefined。

但没有答案告诉我为什么this指undefined.

在我看来，this将指window/global-env它是否未隐式或显式指定。

当然this会在undefined的时候strict-mode。

标签： reactjsthisundefined

Answer 1

这是在运行时确定的，根据代码，它可能会有所不同。

这是

• 在运行时确定，当一个函数被调用时
• 取决于函数的调用方式，而不是函数的定义位置
• 对对象的引用。
• 将永远是一个对象
• 全局（this）在严格模式下不可用

示例 1：这=window

var name = 'Global';

var callName1 = function() {
  var name = 'Peter';
  console.log('--- From callName1 ----');
  console.log(this.name);
  //console.log(this);
  callName2();
}


var callName2 = function() {
  var name = 'Jane';
  console.log('--- From callName2 ----');
  console.log(this.name);
  //console.log(this);
}

callName1();

var execute = function(fn) {
  var name = 'Mary';
  console.log('--- From execute ----');
  console.log(this.name);
  //console.log(this);
}

execute(callName2);

示例 2：在严格模式下不可用

'use strict';

var name = 'Global';

var callName1 = function() {
  var name = 'Peter';
  console.log('--- From callName1 ----');
  console.log(this.name);
  console.log(this);
}

callName1();

示例 3：使用方法调用检查this

var name = 'global';

var obj = {
  name: 'James Obj1',
  func: function() {
    console.log('--- From func ----');
    console.log(this.name);
    console.log(this); // this reference obj1
  }
}

obj.func()

var obj2 = {
  name: 'Jame Obj2',
  func: obj.func // this reference obj2, but the function is defined in obj1
}

obj2.func()

var obj3 = {
  name: 'Kane Obj3',
  obj4: {
    name: 'Mary Obj4',
    func: function () {
      console.log('--- From obj4 ----');
      console.log(this.name);
      console.log(this); // this reference obj4
    }
  }
}
obj3.obj4.func()

使用() => {}函数this - 是词法绑定的。这意味着它使用this来自包含箭头函数的代码。