Javascript 还是不懂。这是看完文章之后

我是一个JS/React初学者，读过一些关于JS上的this关键字的文章，但仍然感到困惑。 也就是说，我参考了Tyler McGinnis的React和Udemy上的完整Javascript

这个关键字在我看来是一个相当复杂的主题，但我从这两个来源了解到。默认情况下，它指的是全局范围，但在方法中定义时，它指的是有问题的对象。我还知道.call/apply/bind可以给我们一个关于.this所指内容的提示

我的问题是，当你在写程序的时候，你实际上什么时候写这个关键字？上面的资料似乎集中在理解为什么其他人可能会使用这个关键词，但不一定是在你需要的时候。因此，当教程似乎在任何地方随机加入this/bind等时，我总是感到困惑

就具体例子而言，我有： 1.一是在国家范围内：

在了解.this概念之前，我遇到过不使用.this关键字的应用程序。没有具体的例子，但是你不应该使用。大多数时候都是这样吗

如果这是一个愚蠢的问题，我表示歉意——有时我想知道是分析/剖析编码中每个部分的原理更好，还是仅仅学习编码更好，因为就像孩子在不质疑语法规则的情况下自然地学习语言一样

在本例中，我们传递了一个名为onDelete的道具，但我不理解为什么需要绑定。这是否意味着我们正在将已传递的onDelete绑定到也已传递的props.id？

---

重要的是你花时间去研究。就我个人而言，我不建议使用React来了解

这一点

。当您扩展React组件时，您的

这个

原型继承自React.component，因此已经有很多React特定的约定。取而代之，考虑这个例子，我在这里调用<代码>这个<代码>直接< /p>

函数SimpleQueue（{size}）{
this.size=size
this.buffer=[]
}
SimpleQueue.prototype.push=函数（项）{
this.buffer.push（项目）
if（this.buffer.length>this.size）{
this.buffer.shift（）
}
还这个
}

SimpleQueue

只是一个使用内部数组的简单队列实现。您可以将此

视为对
SimpleQueue
的当前实例的引用，不管它是什么。在上面的示例中，我特别使用
this
作为
this.buffer
访问内部数组。然后我可以像这样使用一个
SimpleQueue
的实例

constmysimplequeue=newsimplequeue（{size:3}）
mySimpleQueue.push（1）//SimpleQueue{1}
mySimpleQueue.push（2）//SimpleQueue{1,2}
mySimpleQueue.push（3）//SimpleQueue{1,2,3}
push（4）//SimpleQueue{2,3,4}

注意：我的示例没有使用
类
，但它是相同的，因为
“这”不是一个复杂的主题。人们使它变得复杂

你有

handleTitleChange=(title)=>{
this.setState({})
}

当您说
this.setState（）
时，您希望
this
引用您在其中定义HandleteChange（）的类组件。箭头函数自动允许您在定义函数时设置“this”。这就是为什么有人说箭头函数在词汇上与此绑定。当我们的组件第一次被javascript呈现时，它检查内部并看到有
handleitlechange（）
指向箭头函数。当它看到“this”时，它将自动将“this”绑定到第一个定义箭头函数的位置。该函数的上下文是TimerForm组件

但是默认情况下javascript不会在函数上设置其“this”的范围。“this”是动态作用域，它与函数的编写位置无关，与函数的调用方式有关。这就是为什么我们必须明确说明你希望“这”是什么样的背景。我们希望“this”成为我们的类组件，我们可以使用的方法是在
构造函数（）中定义。如果您这样编写上述代码：

handleTitleChange(title){
    this.setState({})
    }

现在，在上面的函数
中，this
引用类，但是当您传递要由另一个组件或函数调用的引用时，您不再传递它的“this”。新的“this”将由调用“handleitlechange（title）”的对象分配。我们必须确保调用
handleitlechange（title）
时，其“this”值始终指向
TimerForm
类。所以我们转到
constructor（）{}
。因为我们的
constructor（）
是在调用任何东西之前首先运行的代码。在编写任何代码之前，我们希望确保
this
的上下文在所有方法中都是正确的

constructor(){
super()
console.log(this) // it will log TimerForm class 
this.handleTitleChange=this.handleTitleChange.bind(this)

//bind(this) `this` refers to the TimerForm
}

bind（）是任何函数上的一个方法，它返回具有新执行上下文的新函数。现在，我们的
handleitlechange
方法了解到它内部的
this
将引用TimerForm类组件

你不应该使用
。那么大部分时间都是这样吗

是的，对于基于类的react组件，您几乎应该在任何地方使用
this.
，用于访问道具、状态、处理程序、调用方法等

构造函数
是一个例外<代码>此。状态
已创建，
道具
是构造函数参数

使用
handleChange（e）{}
语法声明的处理程序需要
.bind（this）
才能：


对该状态进行操作

使用
this.setState（）
（从基类派生的react组件方法）
使用此组件中定义的其他方法

通常事件处理程序以如下形式绑定到构造函数中：

this.handleChange = this.handleChange.bind(this);

<button onClick={this.handleClick} />

坏消息-每次渲染调用都会产生新的引用。。。至少在反应方面不是最优的。。。所以<强>
<button onClick={(e) => this.handleClick(e)} />