JavaScript class 的 this 指向

本文被收录到:

JavaScript 教程

JavaScript 是互联网上最流行的编程语言。使用 JavaScript 可以开发网站、APP、小程序、游戏和服务器端。写这个教程是为了提高自己的 JavaScript 编程水平,而最好的学习方法就是“费曼学习法”,以教代学,以输出倒逼输入。最近日渐成熟的 AI 工具,刚好成为我写这个教程锦上添花。

目录

在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代码至关重要。

 
声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
763 文章
4 教程
8 项目
随机推荐
CSS3 实现 Switch 开关
Node.js 使用 Jest 和 supertest 做接口测试
Node.js dns 模块
选择排序
Notifications API
JavaScript DOM 查找元素
Debian11 安装笔记1:编译安装Nginx、Naxsi 和 Njs
Git 放弃本地修改,强制和之前的某次提交同步