JavaScript继承基于原型链，通过构造函数和prototype实现。原型链查找属性时逐级向上追溯，直至null。常见继承方式包括原型链继承、构造函数继承、组合继承及寄生组合继承，其中寄生组合继承为最佳实践。ES6的class与extends是语法糖，底层仍依赖原型机制，使代码更简洁但本质不变。
JavaScript 的对象继承机制不同于传统的面向对象语言，它基于原型（Prototype）而非类。理解原型链和继承方式，是掌握 JavaScript 面向对象编程的关键。
原型与原型链的基本概念
在 JavaScript 中，每个函数都有一个 prototype 属性，这个属性指向一个对象，即该函数的原型对象。当使用构造函数创建实例时，实例的内部会链接到构造函数的 prototype 对象，这种链接关系通过 __proto__（现已不推荐直接使用，但有助于理解）体现。
查找属性时，JavaScript 引擎首先检查对象自身是否有该属性，如果没有，就沿着 [[Prototype]] 链向上查找，直到找到匹配属性或到达原型链顶端（即 null）。这条查找路径就是原型链。
例如：
立即学习“Java免费学习笔记（深入）”；
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log(“Hello, I’m ” + this.name);
};
const p1 = new Person(“Alice”);
p1.sayHello(); // 输出: Hello, I’m Alice
这里 p1 自身没有 sayHello 方法，但它能调用，是因为 JavaScript 沿着原型链找到了 Person.prototype 上的方法。
常见的继承实现方式
JavaScript 提供了多种实现继承的方式，每种都有其适用场景和局限性。
1. 原型链继承
将子类型的原型设置为父类型的一个实例。
function Animal() {
this.type = “animal”;
}
Animal.prototype.eat = function() {
console.log(this.name + ” is eating.”);
};
function Dog(name) {
this.name = name;
}
Dog.prototype = new Animal(); // 继承 Animal
Dog.prototype.bark = function() {
console.log(“Woof!”);
};
const dog = new Dog(“Buddy”);
dog.eat(); // Buddy is eating.
dog.bark(); // Woof!
缺点：所有子类实例共享父类实例的属性，若属性是引用类型，会导致互相影响。
2. 构造函数继承（经典继承）
在子类构造函数中调用父类构造函数，使用 call 或 apply 改变 this 指向。
function Animal(name) {
this.name = name;
this.colors = [“red”, “blue”];
}
function Dog(name, age) {
Animal.call(this, name); // 继承属性
this.age = age;
}
const dog1 = new Dog(“Max”, 3);
const dog2 = new Dog(“Lucy”, 2);
dog1.colors.push(“green”);
console.log(dog2.colors); // [“red”, “blue”]，不受影响
优点：可传参，避免引用类型共享。缺点：无法继承父类原型上的方法。
3. 组合继承（最常用）
结合原型链和构造函数继承，既继承原型方法，又保证实例有独立属性。
function Animal(name) {
this.name = name;
this.colors = [“red”, “blue”];
}
Animal.prototype.eat = function() {
console.log(this.name + ” eats food.”);
};
function Dog(name, age) {
Animal.call(this, name); // 第二次调用 Animal
this.age = age;
}
Dog.prototype = new Animal(); // 第一次调用 Animal
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
console.log(“Woof!”);
};
虽然有效，但父类构造函数被调用了两次，存在性能浪费。
4. 寄生组合继承（最佳实践）
通过 Object.create() 创建干净的中间原型，避免重复调用父类构造函数。
function inheritPrototype(SubType, SuperType) {
const prototype = Object.create(SuperType.prototype);
prototype.constructor = SubType;
SubType.prototype = prototype;
}
function Dog(name, age) {
Animal.call(this, name);
this.age = age;
}
inheritPrototype(Dog, Animal);
Dog.prototype.bark = function() {
console.log(“Woof!”);
};
这种方式高效且语义清晰，是现代 JavaScript 继承的推荐写法。
ES6 类与继承的语法糖
ES6 引入了 class 和 extends 关键字，使继承写法更接近传统语言，但底层仍是基于原型。
class Animal {
constructor(name) {
this.name = name;
}
eat() {
console.log(this.name + ” is eating.”);
}
}
class Dog extends Animal {
constructor(name, age) {
super(name); // 调用父类构造函数
this.age = age;
}
bark() {
console.log(“Woof!”);
}
}
const dog = new Dog(“Rex”, 4);
dog.eat(); // Rex is eating.
dog.bark(); // Woof!
class 并没有引入新的继承模型，只是对原型继承的语法封装，更简洁易读。
基本上就这些。理解原型链的本质，才能真正掌握 JavaScript 的对象机制。即使使用 class 语法，背后的原理依然依赖原型和构造函数。
以上就是JavaScript原型链与继承机制研究的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530184.html
微信扫一扫 
支付宝扫一扫 
