JS原型链是什么原理-js教程-PHP中文网

JS原型链是什么原理

煙雲

发布： 2025-08-16 13:01:01

原创

398人浏览过

原型链是javascript实现继承的核心机制，当对象查找属性时会沿原型链向上查找直至找到或到达null。1. 每个对象的__proto__指向其构造函数的prototype；2. 构造函数的prototype也是对象，其__proto__指向父类原型，最终指向object.prototype；3. object.prototype.__proto__为null，标志链的结束；4. class语法糖本质仍基于原型链，extends实现继承关系，super调用父类构造函数；5. 避免原型链污染应不修改object.prototype、使用object.create(null)创建无原型对象、用object.freeze()冻结对象及严格验证输入。理解原型链有助于掌握继承、避免bug并提升代码安全性，该机制贯穿于js对象属性查找全过程，是面向对象编程的基础。

JS原型链是什么原理

JS原型链，简单来说，就是对象查找属性时的一条向上查找的路径。当一个对象自身没有某个属性时，它会沿着原型链向上查找，直到找到该属性或者到达原型链的顶端（

null

登录后复制

）。

解决方案

原型链是 JavaScript 实现继承的核心机制。每个 JavaScript 对象都有一个指向其原型（prototype）的内部链接，这个原型对象也有自己的原型，以此类推，形成一个链条，这就是原型链。

具体来说：

__proto__
登录后复制
和
prototype
登录后复制
: 每个 JavaScript 对象（除了
```
null
```
登录后复制
）都有一个
```
__proto__
```
登录后复制
属性，指向创建它的构造函数的
```
prototype
```
登录后复制
属性指向的对象。而函数对象比较特殊，它除了拥有
```
__proto__
```
登录后复制
属性之外，还拥有
```
prototype
```
登录后复制
属性。
构造函数: 当使用
```
new
```
登录后复制
关键字调用一个函数时，这个函数就成为了构造函数。构造函数的作用是创建新的对象，并且会将新对象的
```
__proto__
```
登录后复制
属性指向构造函数的
```
prototype
```
登录后复制
属性指向的对象。
Object.prototype
登录后复制
: 所有对象的原型链最终都会指向
```
Object.prototype
```
登录后复制
，它是所有对象的基类。
```
Object.prototype
```
登录后复制
的
```
__proto__
```
登录后复制
指向
```
null
```
登录后复制
，标志着原型链的终结。

举个例子：

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

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

const john = new Person('John');
john.greet(); // 输出 "Hello, my name is John"

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

登录后复制

在这个例子中：

```
john
```
登录后复制
对象的
```
__proto__
```
登录后复制
指向
```
Person.prototype
```
登录后复制
。
```
Person.prototype
```
登录后复制
对象的
```
__proto__
```
登录后复制
指向
```
Object.prototype
```
登录后复制
。
```
Object.prototype
```
登录后复制
对象的
```
__proto__
```
登录后复制
指向
```
null
```
登录后复制
。

所以，当

john

登录后复制

对象调用

greet()

登录后复制

方法时，它首先在自身查找，没有找到，然后沿着原型链向上查找，在

Person.prototype

登录后复制

中找到了

greet()

登录后复制

方法，于是执行该方法。

原型链的查找过程

文心大模型

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

查看详情

当访问一个对象的属性时，JavaScript 引擎会按照以下步骤查找：

先在对象自身查找该属性。
如果对象自身没有该属性，则沿着
```
__proto__
```
登录后复制
向上查找，即在其原型对象中查找。
如果原型对象中仍然没有该属性，则继续沿着原型对象的
```
__proto__
```
登录后复制
向上查找，直到找到该属性或者到达原型链的顶端（
```
null
```
登录后复制
）。
如果在原型链的顶端仍然没有找到该属性，则返回
```
undefined
```
登录后复制
。

为什么理解原型链对 JavaScript 开发至关重要？

理解原型链是深入理解 JavaScript 继承机制的关键。它直接影响着我们如何组织和复用代码。如果不理解原型链，可能会导致一些意想不到的 bug，例如属性查找错误或者原型污染。此外，掌握原型链有助于我们更好地理解 JavaScript 中的面向对象编程思想，并能更灵活地运用各种设计模式。

如何避免原型链污染？

原型链污染指的是恶意修改对象的原型，从而影响到所有基于该原型创建的对象。这可能导致安全漏洞。避免原型链污染的方法包括：

避免直接修改
Object.prototype
登录后复制
: 尽量不要直接修改
```
Object.prototype
```
登录后复制
，因为这会影响到所有对象。
使用
Object.create(null)
登录后复制
创建对象: 使用
```
Object.create(null)
```
登录后复制
创建的对象没有原型，因此不会受到原型链污染的影响。
使用
Object.freeze()
登录后复制
冻结对象: 使用
```
Object.freeze()
```
登录后复制
可以冻结对象，使其属性不可修改。
进行输入验证: 对用户输入进行严格的验证，防止恶意代码注入。

一个简单的例子，展示了如何使用

Object.create(null)

登录后复制

来创建一个没有原型的对象，避免原型链污染：

const obj = Object.create(null);
obj.hasOwnProperty = function() {
  return false; // 尝试覆盖 hasOwnProperty
};

console.log(obj.hasOwnProperty('name')); // 报错，因为 hasOwnProperty 不是一个函数

// 正常情况下，我们应该这样使用 hasOwnProperty：
const normalObj = {};
console.log(Object.prototype.hasOwnProperty.call(normalObj, 'name')); // false

登录后复制

在这个例子中，由于

obj

登录后复制

没有原型，所以尝试访问

obj.hasOwnProperty

登录后复制

会报错。这避免了恶意代码覆盖

hasOwnProperty

登录后复制

方法，从而防止原型链污染。

原型链和

class

登录后复制

语法糖有什么关系？

class

登录后复制

语法糖是 ES6 引入的，它提供了一种更简洁的语法来定义类。但本质上，

class

登录后复制

仍然是基于原型链实现的。

class

登录后复制

只是一个语法糖，它隐藏了原型链的细节，让代码更易读易写。

例如：

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + ' makes a sound.');
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  speak() {
    console.log(this.name + ' barks.');
  }
}

const dog = new Dog('Buddy');
dog.speak(); // 输出 "Buddy barks."

console.log(dog.__proto__ === Dog.prototype); // true
console.log(Dog.prototype.__proto__ === Animal.prototype); // true

登录后复制

在这个例子中，