为什么'this'本身在函数范围内未定义

Question

我有以下代码：

class App extends Component {

  constructor(){
    super()
    //this.buttonOneClick = this.buttonOneClick.bind(this);
  }

  buttonOneClick() {
    const { setTestData } = this.props;

    setTestData("test");
  }

  render() {
    const { testData } = this.props;
    return (
      <div className="App">
        <h1>Test App</h1>
        <div>{testData}</div>
        <button onClick={this.buttonOneClick}>Test</button>
      </div>
    );
  }
}

组件 App 使用 react-redux 的 connect 方法导出，以将 setTestData-function 映射到 props（这是 setTestData 的来源）。

当我设置 buttonOneClick() 处理程序而不将组件上下文绑定到它时（请参阅 constructor() 中我的代码中注释掉的行）我收到以下错误：

无法读取未定义的属性“道具”

我知道不会定义 props，因为处理程序是在不了解 props 的全局上下文中执行的，但我如何理解错误，这意味着 this 本身没有定义，这没有意义对我来说。为什么会这样？ this 不应该总是在任何执行上下文中定义吗？

提前致谢

Answer 1

这不应该总是在任何执行上下文中定义吗？

没有。

在严格模式下没有隐含的this 值。

"use strict";

function example() {
    alert(this);
}

example();

Answer 2

我们收到一个错误，因为在 onClick 调用我们的 buttonOneClick() 函数时没有定义 this。

通常，您可以通过将 this 绑定到 buttonOneClick 函数来解决此问题，使其始终保持不变。所以我们必须在构造函数中绑定它。

this.buttonOneClick = this.buttonOneClick.bind(this);

如果您不想使用绑定，则可能的解决方法是使用 es2015 javascript 箭头函数

buttonOneClick = () => console.log(this.props);

箭头函数没有自己的 this，因此它会使用 this 脱离其上下文，即我们的组件。这称为词法作用域