javascript - 在 JS 中使用 this 与使用变量

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 遵循原型(prototype)继承并且是一流的语言；这意味着function 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 );

}

这里，this 关键字将确保使用当前上下文而不是您可能在函数中使用的局部变量。

我希望这能够清楚地表明这一点。 Here是一篇了解 this 关键字的好文章! :)