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

原型链是JavaScript中对象通过[[Prototype]]链接实现属性查找与继承的机制，每个对象的__proto__指向其原型，构造函数的prototype用于new创建实例时指定原型，实例共享prototype上的方法和属性；通过Object.create或修改prototype可实现继承，如Student继承Person时，查找路径为实例→Student.prototype→Person.prototype；内置对象也遵循此结构，如数组arr的原型链为arr→Array.prototype→Object.prototype→null，函数fn的原型链为fn→Function.prototype→Object.prototype→null，原型链最终指向null，实现了语言层面的共享与继承。

JavaScript的原型链是理解语言核心机制的关键。很多人在初学时会被原型、构造函数、__proto__、prototype这些概念搞混，其实只要理清对象之间的连接方式，原型链并不难掌握。

原型与原型链的基本概念

在JavaScript中，每个对象都有一个内部属性，称为[[Prototype]]，它指向另一个对象——这个对象就是当前对象的原型。浏览器通常通过__proto__暴露这个内部属性（不建议在生产中直接使用）。

当你访问一个对象的属性时，JavaScript引擎会先在该对象自身查找，如果找不到，就沿着__proto__指针向上查找，直到找到为止，或者到达原型链的末端（即null）。这个逐级查找的过程就是原型链的体现。

函数比较特殊，除了有[[Prototype]]外，还有一个prototype属性。这个属性只在函数作为构造函数被new调用时起作用。new操作会创建一个新对象，其[[Prototype]]指向构造函数的prototype属性。

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

构造函数与原型的关系

定义一个构造函数后，它的prototype是一个对象，默认包含一个constructor属性指向函数本身。所有通过该构造函数创建的实例，都会共享这个prototype上的属性和方法。

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

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

const p1 = new Person('Alice');
p1.greet(); // 输出: Hello, I am Alice

这里p1本身没有greet方法，但它能调用，是因为JavaScript在p1上找不到greet时，去Person.prototype中找到了。p1.__proto__ === Person.prototype 为true，这就是连接点。

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

原型链的强大之处在于可以实现继承。让一个构造函数的prototype指向另一个构造函数的实例，就能形成层级关系。

比如想让Student继承Person：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

221

查看详情

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

这样，Student的实例既能访问自己的属性，也能通过原型链访问Person.prototype上的greet方法。当调用student.greet()时，查找路径是：实例自身 → Student.prototype → Person.prototype。

注意不能直接赋值Student.prototype = new Person()，虽然也能建立链，但会引入不必要的属性，并且后续修改会影响所有子类。

内置对象的原型链结构

JavaScript内置对象也遵循原型链规则。例如：

const arr = [];

arr的原型链是：arr → Array.prototype → Object.prototype → null

所以数组可以使用push、pop等方法（来自Array.prototype），也能使用hasOwnProperty（来自Object.prototype）。

同样，函数也是对象：
function fn() {}
fn的原型链：fn → Function.prototype → Object.prototype → null

这解释了为什么函数能调用call、apply（Function.prototype提供），也能遍历属性（继承自Object.prototype）。

基本上就这些。原型链的本质就是对象之间的链接关系，通过这种机制，JavaScript实现了属性共享和行为继承。理解清楚prototype、__proto__、constructor三者的关系，再结合new和Object.create的实际行为，就能真正掌握这门语言的面向对象基础。不复杂，但容易忽略细节。

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