Question

我很难确定应该何时使用this关键字，何时不应该使用它。.

例如，我之前做过这样的事情。

let socket; 
class something extends Component {

componentDidMount() {
 socket = openSocket('https://coincap.io');
}

componentDidUpdate() {
  socket.on('trades', (tradeMsg) => {
 }

componentWillUnmount() {
 this.socket.disconnect();
}

然后有人重新组织了我的代码，就像

 class something extends Component {

 componentDidMount() {
    this.socket = openSocket('https://coincap.io');
}

  componentDidUpdate() {
     this.socket.on('trades', (tradeMsg) => {
    }


componentWillUnmount() {
 this.socket.disconnect();
}

[问题：] 虽然，代码都可以工作，但是我在理解我们应该使用哪种方法以及他为什么使用this关键字之间感到困惑。

Answer 1

您正在处理ES6，它消除了与语言中的this关键字有关的歧义。

简而言之，this表示（在传统意义上）当前范围；但是，在JavaScript中，this表示调用函数的对象，而不是当前作用域。

如前所述，ES6消除了variable hoisting之类的复杂性。

谈到您的问题，将其重构为this.something的原因是，当您的类被调用时（现在，请记住，JavaScript遵循原型继承并且是一门一流的语言；意味着该函数{{1} }是类的基础，可以将函数作为参数传递），它将像函数一样工作，而prototypes关键字将引用对象或调用它的上下文。

如果我们有以下代码：

this

执行上下文为let foo = 'bar'; const fn = () => { console.log( this.foo ); } fn();，变量window为foo；因此，window.foo将转换为this.foo。

类似地，您的代码将被转译为类似的内容

window.foo

在这里，关键字var socket = new Socket(); function className() {} className.prototype.someFunction = function() { console.log( socket ); }将确保使用当前上下文，而不是您可以在函数中使用的局部变量。

我希望这一点可以弄清楚。 Here是理解this关键字的精彩文章！：）

Answer 2

问题不是this和变量本身之间的区别。就是this引用了类实例，并允许有多个类实例，因此允许有多个套接字实例，而socket变量引用了特定的套接字实例，并将在后续的组件实例中被覆盖。

如果一次有多个组件实例，则该组件将发生故障，因为socket变量引用了最新的openSocket('https://coincap.io')结果。

也是这个

let socket; 
class something extends Component {

componentDidMount() {
 socket = openSocket('https://coincap.io');
}

componentDidUpdate() {
  socket.on('trades', (tradeMsg) => {
 }

componentWillUnmount() {
 this.socket.disconnect();
}

因为没有this.socket，将导致组件卸载错误。

在JS中使用此变量与使用变量

2 个答案: