JS中的class关键字怎么用?和构造函数有什么区别?

JavaScript 中的 classes6 引入的语法糖,用于更清晰地定义对象模板,其本质仍基于原型继承。1. 定义类使用 class 关键字,内部通过 constructor 初始化属性,方法直接写在类体中;2. 创建实例需用 new 调用;3. class 与构造函数区别包括:写法不同、不存在变量提升、必须用 new 调用、类中方法不可枚举;4. class 常用特性包括静态方法(Static)、继承(extends 和 super)、getter/setter;5. 推荐在现代代码或需要继承时使用 class,而在维护旧项目或兼容老旧浏览器时使用构造函数。

JS中的class关键字怎么用?和构造函数有什么区别?

在 JavaScript 中,class 关键字是 ES6 引入的一种语法糖,用来更清晰、更简洁地定义对象的模板。它本质上还是基于原型(prototype)的继承机制,只是写法上更接近传统面向对象语言。


class 是怎么用的?

定义一个类的基本方式如下:

class Person {   constructor(name, age) {     this.name = name;     this.age = age;   }    sayHello() {     console.log(`你好,我是${this.name}`);   } }

使用这个类创建实例就和构造函数一样:

const p1 = new Person('小明', 20); p1.sayHello(); // 输出:你好,我是小明

可以看出,class 的写法比传统的构造函数更直观,方法直接写在类里,不需要手动操作 prototype。


class 和构造函数有什么区别

虽然它们最终实现的功能是一样的,但有几个关键点需要注意:

  • 写法不同
    构造函数通常是一个函数,方法要通过 prototype 添加;而 class 更结构化,方法直接写在类体中。

  • 不存在变量提升(hoisting)
    使用 class 定义的类不会被提升,必须先定义再使用,否则会报错(ReferenceError)。构造函数则可以先调用后定义。

  • 必须用 new 调用
    class 只能通过 new 创建实例,直接调用会报错。构造函数可以用普通函数方式调用(虽然不推荐)。

  • 类中的方法不可枚举
    类中定义的方法默认是不可枚举的(enumerable 为 false),而构造函数通过 prototype 添加的方法是可枚举的。


class 还有哪些常用特性?

除了基本用法,class 还支持一些更实用的特性:

1. 静态方法(static)

静态方法属于类本身,而不是实例:

class Person {   static info() {     console.log('这是一个Person类');   } }  Person.info(); // 正确 // new Person().info(); // 报错

2. 继承(extends 和 super)

class 支持使用 extends 实现继承,子类中使用 super() 调用父类构造函数:

class Student extends Person {   constructor(name, age, grade) {     super(name, age); // 调用父类构造函数     this.grade = grade;   } }

3. getter / setter

可以在类中定义属性的获取和设置逻辑:

class Person {   constructor(firstName, lastName) {     this._firstName = firstName;     this._lastName = lastName;   }    get fullName() {     return `${this._firstName} ${this._lastName}`;   }    set fullName(value) {     const parts = value.split(' ');     this._firstName = parts[0];     this._lastName = parts[1];   } }

什么时候该用 class?什么时候用构造函数?

  • 如果你写的代码偏向现代风格、需要继承、或者希望结构清晰,建议使用 class。
  • 如果你在维护旧项目、或者需要兼容老旧浏览器(比如 IE),可能还需要用构造函数 + prototype 的方式。
  • 在大多数现代框架(如 React、vue 的组合式 API 出现前)中,class 曾是组织组件逻辑的主要方式。

基本上就这些了。class 看起来简单,但背后还是原型那一套机制,理解这一点对深入掌握 JS 很有帮助。

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享