如何理解JavaScript中的原型链？

原型链是JavaScript实现继承和属性查找的机制，通过对象的[[Prototype]]链接形成链条，当访问属性时会沿链向上查找直至找到或到达null。原型（prototype）是函数特有的属性，指向实例共享方法的原型对象；原型链则是由__proto__连接构成的查找路径，二者共同实现对象间的方法共享与继承。利用原型链可优化内存、实现继承并提升性能，ES6的class本质仍是基于原型链的语法糖，提供更清晰的继承写法但底层机制不变。

JavaScript中的原型链，简单来说，就是一套对象间继承属性和方法的机制。当你试图访问一个对象的某个属性或方法时，如果它本身没有，JavaScript引擎就会沿着一条由

__proto__

[[Prototype]]

null

理解原型链，我觉得就像理解一棵家族树，但不是从上往下看，而是从你自身往上追溯你的祖先。每个对象都有一个“父母”对象（它的原型），如果父母没有，就去找爷爷奶奶（父母的原型），以此类推，直到找到“始祖”（

Object.prototype

解决方案

要深入理解原型链，我们得从几个核心概念入手。首先是每个JavaScript对象内部都有一个

[[Prototype]]

__proto__

prototype

prototype

[[Prototype]]

我们通常创建对象的方式，其实都在默默地利用原型链。

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

1. 对象字面量： 当你写

{}

new Object()

Object.prototype

const myObj = {};
console.log(myObj.__proto__ === Object.prototype); // true
console.log(myObj.toString()); // "[object Object]" - 这个方法就来自Object.prototype

myObj

toString

myObj.__proto__

Object.prototype

toString

2. 构造函数： 这是JavaScript实现“类”或“蓝图”的传统方式。

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

// 在Person.prototype上添加方法，所有Person实例共享
Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
console.log(alice.name); // 'Alice'
alice.sayHello(); // 'Hello, my name is Alice'

// 关键来了：alice的原型是Person.prototype
console.log(alice.__proto__ === Person.prototype); // true
// Person.prototype的原型是Object.prototype
console.log(Person.prototype.__proto__ === Object.prototype); // true
// Object.prototype的原型是null，链的终点
console.log(Object.prototype.__proto__ === null); // true

当

alice.sayHello()

alice

sayHello

alice.__proto__

Person.prototype

sayHello

3.

Object.create()

const animal = {
    eats: true,
    walk() {
        console.log("Animal walks.");
    }
};

const rabbit = Object.create(animal); // rabbit的原型是animal
rabbit.jumps = true;
rabbit.walk(); // "Animal walks."

console.log(rabbit.__proto__ === animal); // true
console.log(animal.__proto__ === Object.prototype); // true

rabbit

walk

animal

walk

原型链的魔力在于它实现了属性和方法的共享，这意味着内存效率更高，因为方法只存储在一个地方（原型对象上），所有实例都通过原型链去访问它。同时，它也是JavaScript实现“继承”的基石。

JavaScript原型（prototype）和原型链（prototype chain）之间究竟有什么关联与区别？

这确实是初学者最容易混淆的地方，也是我当年踩过不少坑的地方。要我说，它们俩是紧密相连但又有着明确分工的两个概念。

原型（

prototype

prototype

new MyFunction()

[[Prototype]]

__proto__

MyFunction.prototype

举个例子，

Array.prototype

Array

[1, 2, 3]

__proto__

Array.prototype

Array.prototype

push

pop

原型链（

prototype chain

[[Prototype]]

__proto__

[[Prototype]]

[[Prototype]]

null

Object.prototype

[[Prototype]]

所以，关联在于：原型（

prototype

__proto__

区别在于：

• prototype

  登录后复制
  是一个属性，存在于函数对象上，指向一个对象。它的作用是为通过该函数构造的实例提供共享的属性和方法。
• 原型链 是一种查找机制/结构，由一系列对象通过

  __proto__

  登录后复制
  （内部的

  [[Prototype]]

  登录后复制
  ）连接而成。它的作用是实现对象的继承和属性查找。

你可以把

prototype

在实际开发中，我们如何有效利用JavaScript原型链来优化代码结构和性能？

原型链在实际开发中的应用远不止于理论，它确实能帮助我们写出更优雅、更高效的代码。我个人觉得，最直接和最常见的应用场景就是共享方法和属性，这直接关系到内存和性能。

1. 共享方法，减少内存开销： 这是原型链最核心的优势之一。想象一下，如果你有1000个

User

greet()

function UserBad(name) {
    this.name = name;
    this.greet = function() { // 每个实例都会有自己的greet方法副本
        console.log(`Hi, I'm ${this.name}`);
    };
}
const user1 = new UserBad('Alice');
const user2 = new UserBad('Bob');
// user1.greet !== user2.greet // 它们是不同的函数对象

这样，每个

UserBad

greet

而利用原型链，我们可以将方法定义在构造函数的

prototype

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

UserGood.prototype.greet = function() { // 所有实例共享同一个greet方法
    console.log(`Hi, I'm ${this.name}`);
};

const userA = new UserGood('Charlie');
const userB = new UserGood('David');
// userA.greet === userB.greet // 它们引用的是同一个函数对象

这样，

greet

UserGood.prototype

UserGood

2. 实现继承： 虽然ES6有了

class

function Animal(name) {
    this.name = name;
}
Animal.prototype.eat = function() {
    console.log(`${this.name} eats.`);
};

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

// 核心：让Dog的原型继承Animal的原型
// 避免直接赋值Animal.prototype，那样会覆盖Dog.prototype，导致所有Dog实例的原型都指向Animal.prototype
// Object.create() 是一个很好的方式来创建一个新对象，并指定其原型
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修复constructor指向

Dog.prototype.bark = function() {
    console.log(`${this.name} barks!`);
};

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.eat(); // Buddy eats. (来自Animal.prototype)
myDog.bark(); // Buddy barks! (来自Dog.prototype)

这里，

myDog

myDog

Dog.prototype

Animal.prototype

Object.prototype

null

Dog

animal

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

56

查看详情

3. 扩展内置对象（需谨慎）： 虽然不推荐大规模修改内置对象的原型（因为它可能导致命名冲突和难以调试的问题），但在某些特定且受控的环境下，为内置对象添加一些辅助方法确实能提高开发效率。

// 示例：给Array.prototype添加一个求和方法
// 实际项目中应避免直接修改内置原型，除非你完全控制环境
if (!Array.prototype.sum) { // 检查是否已存在，避免重复定义
    Array.prototype.sum = function() {
        return this.reduce((acc, current) => acc + current, 0);
    };
}

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.sum()); // 15

这样，所有数组实例都能直接调用

sum()

通过合理利用原型链，我们能够构建出模块化、可维护且高效的JavaScript代码，这对于大型应用尤其重要。

ES6中的

class

登录后复制

语法糖，它背后和JavaScript原型链的工作机制有何异同？

ES6引入的

class

相同点：

1. 基于原型链的继承：

   class

   登录后复制
   的继承机制，即

   extends

   登录后复制
   关键字，本质上还是通过操作原型链来实现的。当你写

   class Dog extends Animal {}

   登录后复制
   时，JavaScript引擎会在幕后将

   Dog.prototype

   登录后复制
   的

   [[Prototype]]

   登录后复制
   设置为

   Animal.prototype

   登录后复制
   ，从而建立了原型链上的继承关系。

   class Animal {
       constructor(name) {
           this.name = name;
       }
       eat() {
           console.log(`${this.name} eats.`);
       }
   }
   
   class Dog extends Animal {
       constructor(name, breed) {
           super(name); // 调用父类的构造函数
           this.breed = breed;
       }
       bark() {
           console.log(`${this.name} barks!`);
       }
   }
   
   const myDog = new Dog('Buddy', 'Golden Retriever');
   myDog.eat(); // Buddy eats.
   myDog.bark(); // Buddy barks!
   
   // 底层原理：
   console.log(Dog.prototype.__proto__ === Animal.prototype); // true
   console.log(myDog.__proto__ === Dog.prototype); // true

   登录后复制

   可以看到，

   Dog.prototype

   登录后复制
   确实继承自

   Animal.prototype

   登录后复制
   ，这正是原型链在起作用。

2. 方法共享： 在

   class

   登录后复制
   中定义的所有实例方法（非静态方法），都会被放置在类的

   prototype

   登录后复制
   对象上，从而实现所有实例共享这些方法，节省内存。这与传统构造函数将方法定义在

   Function.prototype

   登录后复制
   上是完全一致的。

3. constructor

   登录后复制
   属性：

   class

   登录后复制
   中的

   constructor

   登录后复制
   方法，其实就是传统构造函数。它在创建实例时被调用，

   this

   登录后复制
   指向新创建的实例。

不同点（主要是语法和一些细节行为）：

1. 语法更清晰： 这是最显而易见的区别。

   class

   登录后复制
   语法避免了手动操作

   prototype

   登录后复制
   和

   Object.create()

   登录后复制
   来设置继承，让代码看起来更像传统的面向对象语言，更容易理解和维护。

2. super

   登录后复制
   关键字： 在子类的构造函数中，必须先调用

   super()

   登录后复制
   才能使用

   this

   登录后复制
   。

   super()

   登录后复制
   实际上就是调用了父类的构造函数。在方法中，

   super

   登录后复制
   可以用来调用父类的方法。这是

   class

   登录后复制
   特有的语法糖，在传统原型继承中，你需要手动调用

   Parent.call(this, ...)

   登录后复制
   或

   Parent.prototype.method.call(this, ...)

   登录后复制
   。

3. class

   登录后复制
   是函数： 尽管看起来像一个特殊的结构，但

   class

   登录后复制
   本身仍然是一个函数。

   class MyClass {}
   console.log(typeof MyClass); // "function"

   登录后复制

   不过，

   class

   登录后复制
   函数与普通函数有一些关键区别：
   • 不能被

     new

     登录后复制
     调用： 普通函数如果不用

     new

     登录后复制
     调用，

     this

     登录后复制
     可能指向全局对象；

     class

     登录后复制
     必须用

     new

     登录后复制
     调用。
   • 没有

     arguments

     登录后复制
     对象：

     class

     登录后复制
     内部没有

     arguments

     登录后复制
     对象。
   • 严格模式：

     class

     登录后复制
     内部的代码默认运行在严格模式下，即使你没有在文件开头声明

     "use strict"

     登录后复制
     。

4. 静态方法和属性：

   class

   登录后复制
   提供了

   static

   登录后复制
   关键字来定义静态方法和属性，这些方法和属性直接属于类本身，而不是类的实例，也无法通过实例访问。

   class Utils {
       static add(a, b) {
           return a + b;
       }
   }
   console.log(Utils.add(1, 2)); // 3
   // const util = new Utils();
   // util.add(1, 2); // TypeError: util.add is not a function

   登录后复制

   在传统原型链中，静态方法通常是直接作为构造函数的属性来添加的，比如

   Function.staticMethod = ...

   登录后复制
   。

5. 私有字段（提案中或已实现）： 现代JavaScript的

   class

   登录后复制
   语法还引入了私有字段（如

   #privateField

   登录后复制
   ），这在传统原型继承中是难以直接实现的（通常需要闭包或

   Symbol

   登录后复制
   来模拟）。

总结来说，

class

class

以上就是如何理解JavaScript中的原型链？的详细内容，更多请关注php中文网其它相关文章！