JavaScript作为一门基于原型的编程语言，其面向对象的核心实现依托于类与继承机制。早期的JS通过函数和原型模拟类的特性，ES6引入的class语法让类的定义更清晰，但底层依然基于原型系统，理解类与继承的本质对编写可维护的JS代码至关重要。
JS中类的定义方式
ES5函数模拟类
在ES6之前，开发者通常通过构造函数来定义类，构造函数内部定义实例属性，原型对象上定义共享的方法。
// 定义父类Person
function Person(name, age) {
// 实例属性
this.name = name;
this.age = age;
}
// 原型上定义方法，所有实例共享
Person.prototype.sayHello = function() {
console.log('你好，我是' + this.name + '，今年' + this.age + '岁');
};
// 创建实例
var p1 = new Person('张三', 20);
p1.sayHello(); // 输出：你好，我是张三，今年20岁
ES6 class语法定义类
ES6的class语法是原型继承的语法糖，让类的定义更符合传统面向对象语言的写法，可读性更强。
// 使用class定义父类Person
class Person {
// constructor是构造函数，用于初始化实例属性
constructor(name, age) {
this.name = name;
this.age = age;
}
// 定义原型方法
sayHello() {
console.log('你好，我是' + this.name + '，今年' + this.age + '岁');
}
}
// 创建实例
const p1 = new Person('李四', 22);
p1.sayHello(); // 输出：你好，我是李四，今年22岁
JS继承的实现方式
ES5原型链继承
原型链继承的核心是将子类的原型指向父类的实例，这样子类实例就能访问父类原型上的方法。
// 父类构造函数
function Animal(type) {
this.type = type;
this.skills = [];
}
Animal.prototype.eat = function() {
console.log(this.type + '在吃东西');
};
// 子类构造函数
function Dog(name) {
this.name = name;
}
// 原型链继承：子类原型指向父类实例
Dog.prototype = new Animal('犬科');
// 修正子类的constructor指向，否则会指向父类构造函数
Dog.prototype.constructor = Dog;
// 创建子类实例
const dog1 = new Dog('旺财');
dog1.eat(); // 输出：犬科在吃东西
console.log(dog1 instanceof Dog); // true
console.log(dog1 instanceof Animal); // true
ES6 class继承
ES6通过extends关键字实现继承，搭配super关键字调用父类构造函数，语法更简洁清晰。
// 父类
class Animal {
constructor(type) {
this.type = type;
}
eat() {
console.log(this.type + '在吃东西');
}
}
// 子类继承父类
class Dog extends Animal {
constructor(name) {
// 调用父类构造函数，必须在使用this之前调用
super('犬科');
this.name = name;
}
bark() {
console.log(this.name + '在汪汪叫');
}
}
// 创建子类实例
const dog1 = new Dog('小白');
dog1.eat(); // 输出：犬科在吃东西
dog1.bark(); // 输出：小白在汪汪叫
类与继承的核心注意点
- constructor属性：每个原型对象都有constructor属性，指向关联的构造函数，手动修改原型后需要修正该属性，否则会导致实例判断类型出错。
- 原型链查找规则：访问实例的属性或方法时，会先从实例自身查找，找不到则沿着原型链向上查找，直到找到或者到达原型链顶端null。
- super的使用限制：在子类的constructor中，必须在使用this之前调用super，否则会抛出错误，因为子类没有自己的this对象，需要先继承父类的this再修改。
实际场景中的应用
在实际开发中，类与继承常用于封装通用能力，比如定义一个基础请求类，然后扩展出不同业务场景的请求子类，复用公共的请求配置和错误处理逻辑。
// 基础请求类
class BaseRequest {
constructor(baseUrl) {
this.baseUrl = baseUrl;
}
// 通用请求方法
async request(url, options = {}) {
const res = await fetch(this.baseUrl + url, options);
if (!res.ok) {
throw new Error('请求失败，状态码：' + res.status);
}
return res.json();
}
}
// 用户相关请求子类
class UserRequest extends BaseRequest {
constructor() {
super('https://ipipp.com/api');
}
// 获取用户列表
getUserList() {
return this.request('/user/list');
}
// 获取用户详情
getUserDetail(id) {
return this.request('/user/detail?id=' + id);
}
}
// 使用子类
const userReq = new UserRequest();
userReq.getUserList().then(data => {
console.log('用户列表数据：', data);
});
JavaScript类与继承面向对象原型链constructor修改时间：2026-06-20 11:33:29