javascript - 类和箭头函数和 THIS

Question

关闭。这个问题需要更多 focused .它目前不接受答案。












想改进这个问题？更新问题，使其仅关注一个问题 editing this post .


3年前关闭。







Improve this question




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

我将通过示例将以下问题分开。我了解常规函数和此上下文的绑定(bind)，它只是箭头函数以及我如何看到它们使用/声明的方式令人困惑。

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

1 - 我已经看到一个教程说'this'的值将是窗口的例子，因为箭头函数继承自全局/窗口范围，但我也看到了他们说它将从类上下文继承的教​​程 -哪个是对的？如果你能解释一下。

class MyClass {
    value = 'Hello World!'
    clickHandler = () => { console.log(this.value) };
}

2 - 我对这个问题有 2 个部分 -
i - 为什么语法是 clickHandler = () => 而不是 clickHandler () =>

我问这个是因为我读到类方法可以用'functionName(){}'定义，那么为什么箭头函数将方法名称视为变量？

ii - 下面代码中 this 的值是什么？与问题 1 相同，我猜这是指窗口对象还是类？

class Foo extends React.Component {
  constructor() {
  }
  clickhandler = () => {
    console.log("you clicked me!!")
  }
  render() {
    return( 
    <div>
      <button onClick={this.clickhandler}> // => CALLBACK

3 - 在这里，我看到事件处理程序是一个内联函数，但看起来它因为末尾的 () 而被调用，有时就像在下面的代码片段中一样，您可以看到只给出了没有括号的函数名称，他们不应该也在那里吗？

class MyComponent extends React.Component {
  showValue() {
    console.log(this.props.value);
  }

  render() {
    return (
      <button onClick={() => this.showValue()}>Do Something</button>
    );
  }
}

-------------------------------------------

showValue() {
    console.log(this.props.value);
  }

  render() {
    return (
      <button onClick={this.showValue}>Do Something</button>
    );
  }

Answer 1

Why is the syntax clickHandler = () => rather than clickHandler () =>

foo () => ...语法对 ES6 类无效，这个概念没有意义。 foo() {...}是原型(prototype)方法的语法糖:

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

如果 Class.prototype.foo，这将不起作用是一支箭； this将从 Class 的范围中检索被定义为:

// this === undefined

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

foo = () => ...是 class field语法，这是第 3 阶段的提议，不是 ES6 的一部分。

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

是语法糖:

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

I've seen examples where a tutorial says the value of this would be window as the arrow function inherits from the global/window scope but I've also seen tutorials where they say it will inherit this from the class context/scope - which is correct?

箭头函数获得词汇 this从封闭范围。如果在全局范围内定义了箭头，this是 window , 和 undefined在 ES 模块范围内。

在上面的示例中，箭头定义在类构造函数范围内，this是类实例。

Here I see the event handler is an inline function, but it looks like it gets invoked because of the () at the end, sometimes as in the follow on snippet, you can see that just the function name is given without the parentheses, shouldn't they be there also?

回调函数预计将作为 onClick 传递支柱。 this.showValue()调用一个函数并从中返回一个值。除非值也是一个函数，否则就地调用方法，如 onClick={this.showValue()}是不正确的。
onClick={this.showValue}将类方法作为回调传递。从 showValue是未绑定(bind)到正确 this 的原型(prototype)方法上下文，回调将在错误的上下文中执行(问题在 this question 中解释)，而 onClick={() => this.showValue()}将包装函数作为执行 showValue 的回调传递有正确的上下文。