深入理解JavaScript原型链_javascript高级编程

原型链是JavaScript对象属性查找的机制，当对象自身无该属性时，会向上追溯其原型，直至null。每个对象有[[Prototype]]指向原型，函数的prototype属性用于实例继承。构造函数创建实例时，实例的[[Prototype]]指向构造函数的prototype。通过Object.create()可实现继承，子类原型指向父类原型，形成链式结构。内置对象如数组也遵循此规则，arr.toString()实际调用的是Array.prototype上的方法，而Array.prototype继承自Object.prototype，最终形成arr → Array.prototype → Object.prototype → null的原型链。正确理解原型链有助于掌握JS继承与对象模型。

JavaScript的原型链是理解这门语言对象模型的核心机制。很多人在初学时会感到困惑，但一旦掌握，就能更自然地使用继承、构造函数和对象之间的关系。

原型与原型链的基本概念

每个JavaScript对象在创建时都会关联另一个对象，这个关联的对象就是它的原型（prototype）。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性，JavaScript引擎就会去它的原型上查找，如果原型也没有，就继续向上查找——直到找到为止，或者到达原型链的末端（null）。

函数除了是函数之外，还是对象，并且拥有一个特殊的属性 prototype，这个属性指向一个对象，该对象将作为通过 new 调用该函数创建的实例的原型。

而每个对象都有一个内部属性 [[Prototype]]，现代JavaScript中可以通过 __proto__ 访问（不推荐直接使用），ES6之后推荐使用 Object.getPrototypeOf() 和 Object.setPrototypeOf() 来操作。

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

构造函数、原型与实例的关系

以一个简单的构造函数为例：

function Person(name) {
  this.name = name;
}

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

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

这里发生的过程是：

• john 是 Person 的实例
• john 的 [[Prototype]] 指向 Person.prototype
• 当调用 john.sayHello()，john 自身没有该方法，于是查找其原型，即 Person.prototype，找到了 sayHello 方法并执行

我们可以通过以下方式验证：

Object.getPrototypeOf(john) === Person.prototype; // true
john.__proto__ === Person.prototype;             // true（不推荐使用 __proto__）

原型链的延伸：继承的实现原理

JavaScript中的“继承”本质上是通过原型链实现的。子类型的实例可以访问父类型原型上的方法和属性。

ChatDOC

ChatDOC是一款基于chatgpt的文件阅读助手，可以快速从pdf中提取、定位和总结信息

262

查看详情

常见的寄生组合式继承写法：

function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  console.log(this.name + " is eating.");
};

function Dog(name, breed) {
  Animal.call(this, name); // 继承属性
  this.breed = breed;
}

// 建立原型链：Dog.prototype 的原型是 Animal.prototype
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修正 constructor 指向

Dog.prototype.bark = function() {
  console.log("Woof!");
};

const dog = new Dog("Max", "Golden Retriever");
dog.eat();  // Max is eating.
dog.bark(); // Woof!

Object.getPrototypeOf(dog) === Dog.prototype; // true
Object.getPrototypeOf(Dog.prototype) === Animal.prototype; // true

这样，dog 实例就可以沿着原型链找到 bark（在 Dog.prototype）、eat（在 Animal.prototype），形成一条链式结构。

内置对象的原型链

JavaScript内置对象也遵循相同的规则。例如：

const arr = [1, 2, 3];
arr.toString(); // "[1,2,3]"

数组实例 arr 本身没有 toString 方法，它从 Array.prototype 上获得，而 Array.prototype 的原型是 Object.prototype，所以上面的调用链是：

• arr → Array.prototype → Object.prototype → null

可以通过以下方式查看：

Object.getPrototypeOf(arr) === Array.prototype; // true
Object.getPrototypeOf(Array.prototype) === Object.prototype; // true
Object.getPrototypeOf(Object.prototype); // null

这说明所有对象最终都继承自 Object.prototype，除非显式指定为 null。

基本上就这些。原型链看似复杂，实则是由简单规则构成：对象查找属性时，若自身没有，就往原型上找，层层向上，直到 null。理解这一点，就能更好地掌握 JavaScript 的面向对象机制。不复杂但容易忽略。

以上就是深入理解JavaScript原型链_javascript高级编程的详细内容，更多请关注php中文网其它相关文章！