Javascript 类和箭头函数以及

在学习JS和React时，我在教程中遇到了令人困惑的差异

我将用例子把下面的问题分开。我理解常规函数的bind和这个上下文，只是箭头函数和我如何看到它们的使用/声明令人困惑

请不要只参考重复的内容，因为我在教程中发现了相互矛盾的答案，这些答案让我感到困惑，所以请寻找真相的来源，以简单的方式理解。与以下问题和示例相关的答案将更有帮助

1-我看过一些例子，其中教程说“this”的值将是window，因为arrow函数从全局/窗口范围继承，但我也看过一些教程，其中他们说它将从类上下文继承它-这是正确的？请你解释一下

class-MyClass{
值='你好，世界！'
clickHandler=（）=>{console.log（this.value）}；
}

为什么语法是clickHandler=（）=>而不是clickHandler（）=>

foo（）=>…

语法对ES6类无效，这个概念没有意义

foo（）{…}

是原型方法的语法糖：

function Class() {}
Class.prototype.foo = function () {
  // this instanceof Class === true
}

如果

Class.prototype.foo

是一个箭头，那么这将不起作用<代码>此将从定义了

类

的范围中检索：

// this === undefined

Class.prototype.foo = () => {
  // this === undefined
}

foo=（）=>…

是语法，它是第3阶段的提案，不是ES6的一部分

class Class {
  foo = () => {
    // this instanceof Class === true 
  }
}

语法糖用于：

class Class {
  constructor() {
    // this instanceof Class === true 
    this.foo = () => {
      // this instanceof Class === true 
    }
  }
}

我看过一些例子，其中一个教程说它的值将是window，因为arrow函数继承自全局/窗口范围，但我也看过一些教程，其中他们说它将继承自类上下文/范围，这是正确的

Arrow函数从封闭范围中获取词法

这个
。如果在全局范围内定义了箭头，
此
在ES模块范围内为
窗口
，而
未定义

在上面的示例中，在类构造函数范围中定义了一个箭头，
这是类实例

在这里，我看到事件处理程序是一个内联函数，但它看起来像是因为末尾的（）而被调用的，有时就像在后面的代码段中一样，您可以看到函数名没有括号，它们不也应该在那里吗

回调函数应作为
onClick
prop传递
this.showValue（）
调用函数并从中返回值。除非值也是函数，否则调用像
onClick={this.showValue（）}
这样的方法是不正确的

onClick={this.showValue}
将类方法作为回调传递。由于
showValue
是未绑定到正确的
this
上下文的原型方法，因此将使用错误的上下文执行回调（问题在中解释），而
onClick={（）=>this.showValue（）}
将包装函数作为回调传递，该回调使用正确的上下文执行
showValue
。
1-
此
引用当前范围。在
MyClass
中，这指的是类实例。
所以答案都是正确的。在全局范围中，这指的是窗口，在
myclass
中，这指的是类

2-正如您可能注意到的，在arrow函数中，不需要将函数与类绑定，因此语法不同

3-
onClick={（）=>this.showValue（）}>做点什么
：每次单击触发事件时创建一个函数。在某些情况下，当您希望将额外的参数从组件呈现传递到事件处理程序时，它非常有用

onClick={（）=>this.showValue（事件、id、名称）}>做点什么

但是使用
onClick={this.showValue}>做一些事情
，这是通常的情况，当处理程序触发事件时调用它，而每次都不创建新函数

但是它如何识别处理程序呢？通过绑定，
这个
可以识别你范围内的内容，因为你把它称为里面的
showValue
非常长但很好的问题。谢谢，但一旦你通读了它-它只是关于类似主题的3个例子，希望不会太长。请在每篇文章中只问一个问题。@Bergi确定，这些似乎密切相关，所以这次我把它们放在一篇文章中。@jobe 3与1和2没有直接关系，应该是一个单独的问题。实际上，我对3号也有一个类似的问题，我想知道我们应该如何传递参数
onClick={this.showValue}
？哪个参数？问题中的示例不包含参数。如果除了click event中的
event
对象之外还应该有其他东西，那么它应该以任何方式用一个函数包装，
onClick={e=>this.showValue（'foo'）}
@estus我给出的具体示例的第一个问题仍然让我困惑，这里的封闭范围是什么？是教室还是窗户？正如我所说的，我已经看到了教程中给出的两个答案。@estus我恐怕没有参考我给出的问题和数字，我没有按照你的解释进行，并且有点迷路了。因为
this.showValue
是一个函数，
this.showValue（）
是从这个函数返回的值，它是
未定义的
。您不需要将
未定义
传递给
onClick
。您可以将两者都登录到控制台进行检查。当然，当单击发生时，您需要括号来调用函数。-你不需要打电话，我会帮你的。回调函数是稍后将被回调的函数。你传递回调的地方负责调用它。不，
this
关键字从不指“范围”。@Bergi你能解释一下吗？对于问题1，我已经看到了类上下文和窗口的答案。@jobe。Estus的答案是正确的，在const中创建了一个箭头函数