JavaScript原型继承_深入理解原型链机制-js教程-PHP中文网

JavaScript原型继承_深入理解原型链机制

幻影之瞳

发布： 2025-11-28 19:24:07

原创

480人浏览过

JavaScript采用原型继承而非类继承，通过prototype和[[Prototype]]链实现对象间的属性查找与继承。

javascript原型继承_深入理解原型链机制

JavaScript中的原型继承是语言中最独特也最容易被误解的部分之一。很多人在初学时会被“类”的概念误导，其实JavaScript采用的是基于原型的继承机制，而不是传统面向对象语言中的类继承。理解原型链，是掌握JavaScript对象系统的关键。

原型与构造函数的关系

在JavaScript中，每个函数都有一个prototype属性，这个属性指向一个对象，即“原型对象”。当你用new操作符调用一个函数作为构造函数时，新创建的实例的内部[[Prototype]]（通常可通过__proto__访问）会指向该构造函数的prototype。

例如：

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log("Hello, I'm " + this.name);
};

const john = new Person("John");
john.greet(); // 输出: Hello, I'm John

登录后复制

这里，john.__proto__ 指向 Person.prototype，所以它能访问greet方法。

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

原型链的查找机制

当你尝试访问一个对象的属性或方法时，JavaScript引擎会先在该对象自身查找。如果找不到，就会沿着[[Prototype]]链向上查找，直到找到匹配的属性或到达链的末端（即null）。

这条向上的链接结构就是“原型链”。

比如：

console.log(john.toString()); // 调用的是 Object.prototype.toString

登录后复制

因为john自身没有toString，JS会查找Person.prototype，还没找到就继续查Person.prototype.__proto__，也就是Object.prototype，最终在那里找到toString方法。

AIBox 一站式AI创作平台

AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

217

查看详情

原型链大致如下：

john 
  → Person.prototype 
    → Object.prototype 
      → null

登录后复制

如何实现继承：借用原型链

要让一个构造函数继承另一个构造函数的属性和方法，常见的做法是将子类型的原型设置为父类型实例。

示例：

function Student(name, grade) {
  Person.call(this, name); // 继承实例属性
  this.grade = grade;
}

// 建立原型链
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

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

const lily = new Student("Lily", 12);
lily.greet(); // Hello, I'm Lily
lily.study(); // Lily is studying.

登录后复制

这里关键的一行是：Student.prototype = Object.create(Person.prototype)，它创建了一个以Person.prototype为原型的新对象，从而形成继承关系。

现代写法：使用 class 和 extends

ES6引入了class语法糖，让原型继承看起来更像传统类继承，但底层依然是原型链机制。

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  bark() {
    console.log(this.name + " barks!");
  }
}

const dog = new Dog("Max", "Golden Retriever");
dog.speak(); // Max makes a sound.
dog.bark();  // Max barks!

登录后复制

虽然写法更简洁，但Dog.prototype.__proto__仍然指向Animal.prototype，原型链机制未变。

基本上就这些。原型链的核心在于理解对象之间的链接关系，以及属性查找是如何逐层向上进行的。掌握这一点，就能真正看懂JavaScript中的“继承”是如何工作的。不复杂但容易忽略细节。

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