JavaScript class 的 this 指向 - JavaScript 编程网

在JavaScript的类(Class)中，this关键字的指向遵循一般的JavaScript规则，但特别关注于类的方法上下文。以下是关于this在JavaScript类中如何工作的几个关键点：

1，构造函数中的this：在类的构造函数(constructor)中，this指的是新创建的实例对象。这意味着你可以使用this来设置实例的属性或调用实例的方法。

class Person {
  constructor(name) {
    this.name = name; // 这里的`this`指的是新创建的Person实例
  }
}

2，方法中的this：类的方法内部，this同样默认绑定到该类的实例上。这意味着你可以在方法中访问和修改实例的属性。

class Person {
  constructor(name) {
    this.name = name;
  }
  
  introduce() {
    console.log(`Hi, I'm ${this.name}.`); // 这里的`this`也是当前实例
  }
}

3，静态方法中的this：静态方法不属于任何实例，它们直接通过类调用。因此，在静态方法中，this指的是类本身，而不是类的实例。

class Person {
  static species = 'Homo Sapiens';

  static getSpecies() {
    return this.species; // 这里的`this`指的是Person类
  }
}

4，箭头函数中的this：如果你在类的方法中使用箭头函数，注意箭头函数不会绑定自己的this，它会捕获其所在上下文的this值。在类的方法中，这通常不是你想要的行为，因为你会期望this指向实例。因此，尽管合法，但在类的方法中使用箭头函数通常不推荐，除非你有特殊的目的要保留外部的this上下文。

class Person {
  constructor(name) {
    this.name = name;
    
    // 通常不建议这样做，除非你有特别的理由
    this.greet = () => {
      console.log(`Hello, I'm ${this.name}.`);
    };
  }
}

总结来说，在JavaScript类中，this的指向主要依据其所在的执行上下文：在构造函数和非静态方法中指向实例，在静态方法中指向类本身。理解this的正确使用对于编写清晰、有效的面向对象JavaScript代码至关重要。

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。

真诚赞赏，手留余香

赞赏