Javascript 关于的问题。React组件中的此绑定

目标：在

.this（）

绑定React组件时，我想完全理解正在进行的引用以及计算机采取的确切的逐步过程

说明：我有一些代码（如下所示），在代码中，计算机通过行

this.handleChange=this.handleChange.bind（this）绑定
handleChange
输入处理程序。有一个父组件
MyApp
，它有一个子组件
GetInput
和另一个子组件
RenderInput

问题：

问题1。我的困惑主要源于这样的想法：
。this（）
自动引用最近的“父”对象，并通过
进行绑定。this（）
因此会将其重定向到写入
.bind（）
的最近的父对象。在下面的例子中，它似乎重定向到
MyApp
组件。但是，
MyApp
类是一个函数
console.log（typeof MyApp）//应该是：function
。因此，为什么
.this（）
没有在下面的代码中引用全局对象

问题2。当调用handleChange处理程序时，计算机执行的逐步过程是什么？是否有以下情况：

RenderInput
组件内的初始调用：
{this.props.input}

引用
RenderInput
父级，它是
GetInput
组件：

计算机读取
onChange={this.props.handleChange}
转到
GetInput
组件的父级，它是
MyApp
组件，并读取：
handleChange={this.handleChange}
（这是我最不确定的步骤）
查找
.this（）
绑定到的位置：
this.handleChange=this.handleChange.bind（this）

引用
MyApp
作为
this
执行
handleChange
处理程序：
handleChange（事件）{this.setState（{inputValue:event.target.value}）；}
MyApp类扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
输入值：“
};
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
这是我的国家({
inputValue:event.target.value
});
}
render（）{
返回(
{
}
{
}
);
}
}
类GetInput扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
获取输入：
);
}
};
类RenderInput扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
输入渲染：
{this.props.input}

);
}
};

以下示例中的关键字

此

：

  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }

是指父函数

handleChange

，并且

handleChange

没有

setState

方法。当我们扩展

类MyApp extends React.component时，组件做了什么。它是从
React.Component
中“继承”
setState
。。。这就是为什么我们必须手动将其绑定到该类（这只是语法上的糖分，正如您所指出的，它是一个函数…）

更深入：当您创建这样的构造函数时：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

  handleChange = (event) => {
    this.setState({
      inputValue: event.target.value
    });
  }

然后用新关键字调用该函数，如下所示：

const personOne = new Person('Bob', 26)

引擎盖下发生的是关键字
new
创建一个空对象并将
this
设置为其引用，这就是为什么在函数体本身中有
this.name=name
等

你可以这样想：

const this = {}

this.name = 'Bob'
this.age = 26

这个
现在将是一个类似于
{name:'Bob'，age:26}

作为旁注：在许多示例中，您将看到如下箭头函数：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

  handleChange = (event) => {
    this.setState({
      inputValue: event.target.value
    });
  }

这是因为箭头函数没有自己的
this
context。。。它将自动冒泡到父级，无需绑定…
让我们从这样一个事实开始，即
this
和
.bind
的行为都不是特定于反应的。因此，为了简单起见，让我们暂时忘记React&只看一些普通的JS代码（不用担心！稍后我们将回到React）

现在让我们从头开始，这是一个对象：

{
用户名：“KamiFightingSpirit”
}

看起来很简单，但对象的值可能是任意的（数组、其他对象、函数等）。我们还要添加一个函数：

{
用户名：“KamiFightingSpirit”，
logUsername:function（）{
console.log（this.username）；
}
}

这到底是什么<代码>这是指执行上下文，您可能还听说过：

此执行上下文是函数调用之前的点之前的任何内容

让我们快速检查一下，记住
这个
与范围不同。它是在执行期间计算的

const soUser={
用户名：“KamiFightingSpirit”，
logUsername:function（）{
console.log（this.username）；
}
};
soUser.logUsername（）；
//->KamiFightingSpirit

好的，在执行过程中，
这个
等于
soUser

//让我们借用soUser的方法
const userNameLogger=soUser.logUsername；
常量嵌套对象={
用户名：“将不记录此属性”//也不会记录“KamiFightingSpirit”
样本用户：{
用户名：“Igor Bykov”，
logUsername:userNameLogger
}
};
nestedObjects.sampleUser.logUsername（）；
//->伊戈尔·比科夫

很好，又起作用了
此
等于前面的点之前的对象