JavaScript ES6 Class类全方位进阶指南
作者：发现一只大呆瓜
在ES6中class(类)作为对象的模板被引入,可以通过class关键字定义类,这篇文章主要介绍了JavaScript ES6 Class类全方位进阶指南的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
前言
在 ES6 之前，JavaScript 开发者必须通过构造函数和原型链（prototype）来模拟“类”的行为，代码既冗长又容易出错。ES6 引入了 class 关键字，虽然它本质上是语法糖，但它让 JavaScript 的面向对象编程变得更加清晰和标准。
一、 基础：类的定义与实例化
class 将构造函数（constructor）和原型方法（speak）统一封装在一个大括号内。
class Animal {
// 构造函数：每当 new 一个实例时自动调用
constructor(name) {
this.name = name; // 实例属性
}
// 原型方法：定义在 Animal.prototype 上，供所有实例共享
speak() {
console.log(`${this.name} speak!!!`);
}
}
const dog = new Animal('dog');
dog.speak(); // dog speak!!!二、 继承：extends 与 super 的力量
继承让子类可以复用父类的逻辑。在子类中，super 是连接父类的桥梁。
核心规则
- 必须调用 super：子类如果没有自己的
constructor，引擎会默认添加。如果有，则必须在访问this之前调用super()，否则会报错。 - 方法复用：可以使用
super.methodName()调用父类的普通方法。
class Animal {
constructor(name) {
this.name = name;
}
eat() {
return `${this.name} needs food`;
}
}
class Cat extends Animal {
constructor(name, color) {
// 1. 调用父类构造函数（传递 name）
super(name);
this.color = color;
}
eatFood() {
// 2. 通过 super 调用父类的原型方法
console.log(`${this.name} is ${this.color}, ${super.eat()}`);
}
}
const mimi = new Cat('mimi', 'white');
mimi.eatFood(); // mimi is white, mimi needs food三、 静态成员：static 关键字
static 定义的属性和方法属于类本身，而不是实例。
注意事项
- 不可继承：实例对象无法访问静态方法。
- this 指向：静态方法中的
this指向的是 类本身，而不是实例。
class Animal {
static feet = 4; // 静态属性
static eat() {
// 注意：这里的 this 指向 Animal 类本身
console.log(`${this.name} is eating`); // 这里的 this.name 输出的是 "Animal"（类的名字）
}
}
const cat = new Animal();
console.log(cat.feet); // undefined (实例无法访问)
console.log(Animal.feet); // 4 (类直接访问)
Animal.eat(); // "Animal is eating"四、 面试模拟题
Q1：ES6 的 class 声明和普通 function 构造函数有什么区别？
参考回答：
- 严格模式：
class内部默认就是严格模式。 - 变量提升：
class不存在变量提升（存在暂时性死区），必须先定义后使用。 - 调用方式：
class必须配合new调用，直接调用会报错；而普通构造函数可以作为普通函数执行。 - 原型方法：
class定义的方法是不可枚举的。
Q2：子类构造函数中为什么必须先调用super()？
参考回答：
在 ES5 的继承中，是先创建子类的 this，然后再将父类的方法属性添加到 this 上。
但在 ES6 的继承中，是先创建父类的实例对象 this（通过 super()），然后再用子类的构造函数修改这个 this。如果不调用 super()，子类就拿不到 this 对象。
Q3：如何用 ES5 模拟class的静态方法？
参考回答：
在 ES5 中，直接将方法挂载到构造函数函数名上即可：
function Animal() {}
Animal.eat = function() { console.log('eating'); }; // 模拟静态方法五、 总结
| 关键字 | 用途 | 核心点 |
|---|---|---|
| constructor | 初始化实例 | new 的时候自动触发 |
| extends | 建立原型继承 | 子类原型指向父类原型 |
| super | 指向父类 | 构造函数中必须首行调用 |
| static | 定义类私有成员 | 只能由类名直接调用 |
到此这篇关于JavaScript ES6 Class类全方位进阶指南的文章就介绍到这了,更多相关ES6 Class类指南内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！