JavaScript继承基于原型链,ES6的class是其语法糖。通过Object.create()建立原型链,实现方法共享;class中extends本质仍是设置原型指向。例如,Student extends Person使子类继承父类属性方法,super()调用父构造函数。class语法更清晰、易维护,推荐现代项目使用,但需注意:方法在原型上、必须用new调用、无变量提升、私有字段用#定义。尽管class写法直观,底层仍依赖原型链,理解二者关系有助于掌握JS对象模型,结合使用更高效。

JavaScript中的继承机制和其他面向对象语言有所不同,它基于原型链实现。ES6引入的class语法让代码看起来更接近传统类式语言,但底层依然依赖原型链。理解这两者的关系有助于写出更清晰、可维护的代码。
原型链继承的基本原理
在JavaScript中,每个对象都有一个内部属性[[Prototype]],指向其原型对象。当我们访问一个对象的属性时,如果该对象本身没有这个属性,引擎会沿着原型链向上查找,直到找到或到达原型链末端(null)为止。
通过构造函数创建实例时,构造函数的prototype属性就是实例的原型。例如:
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("Hello, I'm " + this.name);
};
function Student(name, grade) {
Person.call(this, name);
this.grade = grade;
}
// 建立原型链连接
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
const s = new Student("Alice", 8);
s.greet(); // 输出: Hello, I'm Alice
这里通过Object.create()让Student.prototype继承自Person.prototype,实现了原型链上的方法共享。
立即学习“Java免费学习笔记(深入)”;
Class语法糖的本质
ES6的class并不是全新的继承模型,而是上述原型继承的语法封装。用class重写上面的例子:
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log("Hello, I'm " + this.name);
}
}
class Student extends Person {
constructor(name, grade) {
super(name);
this.grade = grade;
}
}
const s = new Student("Alice", 8);
s.greet(); // 输出: Hello, I'm Alice
这段代码的行为和前面完全一致。class只是让原型继承的写法更直观、更易读。extends关键字背后仍然是设置子类原型指向父类原型,并处理构造函数调用。
关键区别与注意事项
虽然class看起来像传统类,但本质仍是原型继承。有几个细节需要注意:
- 方法定义在原型上:class中的方法默认添加到prototype,不会重复创建
- 必须使用new调用:class构造函数不能像普通函数那样直接调用
- 不存在变量提升:class声明不会被提升,必须先声明再使用
- 私有字段支持有限:早期版本不支持私有成员,现在可用#前缀定义私有字段
实际开发中的选择建议
现代项目推荐使用class语法,原因包括:
- 语法清晰,结构统一,易于团队协作
- 与TypeScript等工具配合良好
- 继承逻辑明确,减少手动操作prototype出错的可能
- 符合大多数开发者对“类”的认知习惯
但在需要高度动态行为或兼容老环境时,了解原型链操作仍然必要。掌握两者关系能更好理解JavaScript的对象模型。
基本上就这些,class是语法糖,原型链是根基,两者结合使用最有效。










