JavaScript_原型链与继承机制深入剖析

JavaScript通过原型链实现对象继承，核心是构造函数、prototype与[[Prototype]]的关联。每个函数有prototype对象，实例通过__proto__指向它，属性查找沿原型链向上追溯至Object.prototype或null。经典继承结合构造函数借用和Object.create()建立原型链接，避免直接赋值丢失constructor；ES6的class和extends为语法糖，底层仍基于原型链，如Dog继承Animal时，其原型链保持不变。关键在于理清对象、构造函数及原型间的关系。

JavaScript 的对象继承机制与其他面向对象语言不同，它基于原型链（Prototype Chain）实现。理解原型链是掌握 JavaScript 面向对象编程的核心。

原型与构造函数的关系

在 JavaScript 中，每个函数都有一个 prototype 属性，这个属性指向一个对象，即该函数的原型对象。当使用构造函数创建实例时，实例的内部会链接到构造函数的 prototype 对象。

例如：

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log("Hello, I'm " + this.name);
};
const alice = new Person("Alice");
alice.greet(); // 输出: Hello, I'm Alice
  

这里，alice 是 Person 的实例，它能访问 greet 方法，是因为 JavaScript 在查找属性时会沿着原型链向上搜索。

立即学习“Java免费学习笔记（深入）”；

原型链的查找机制

当访问一个对象的属性或方法时，JavaScript 引擎首先检查该对象自身是否具有该属性。如果没有，就会查找其原型对象；如果原型中也没有，则继续查找原型的原型，直到找到或到达原型链末端（即 null）。

每个对象都有一个内部属性 [[Prototype]]，可通过 __proto__（非标准但广泛支持）或 Object.getPrototypeOf() 访问。

例如：

console.log(alice.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null
  

这说明原型链最终会指向 Object.prototype，然后终止于 null。

Grammarly

Grammarly是一款在线语法纠正和校对工具，伟大的AI辅助写作工具

253

查看详情

继承的实现方式

JavaScript 提供多种方式实现继承，最常见的是组合构造函数和原型链。

经典模式：借用构造函数 + 原型链链接

function Student(name, studentId) {
  Person.call(this, name); // 继承属性
  this.studentId = studentId;
}
// 建立原型继承
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.study = function() {
  console.log(this.name + " is studying.");
};

const bob = new Student("Bob", "S001");
bob.greet(); // Hello, I'm Bob
bob.study(); // Bob is studying.
  

关键点在于使用 Object.create(Person.prototype) 来设置 Student.prototype 的原型，避免直接赋值导致构造函数丢失。

现代语法中的 class 与 extends

ES6 引入了 class 和 extends 语法糖，让继承更直观，但底层仍基于原型链。

例如：

class Animal {
  constructor(type) {
    this.type = type;
  }
  speak() {
    console.log(this.type + " makes a sound");
  }
}

class Dog extends Animal {
  constructor(name) {
    super("dog");
    this.name = name;
  }
  bark() {
    console.log("Woof!");
  }
}

const dog = new Dog("Rex");
dog.speak(); // dog makes a sound
dog.bark();  // Woof!
  

虽然写法接近传统类，但 Dog.prototype 的原型仍是 Animal.prototype，原型链机制未变。

基本上就这些。理解原型链的关键是搞清对象、构造函数、prototype 和 [[Prototype]] 之间的关系。不复杂但容易忽略细节。

以上就是JavaScript_原型链与继承机制深入剖析的详细内容，更多请关注php中文网其它相关文章！