JS 原型链继承详解 - 探索对象间隐藏的 [[Prototype]] 连接机制-js教程-PHP中文网

JS 原型链继承详解 - 探索对象间隐藏的 [[Prototype]] 连接机制

betcha

发布： 2025-09-20 22:00:03

原创

618人浏览过

原型链继承通过[[Prototype]]链接实现，子对象可访问父对象属性方法。使用Object.create()设置原型避免共享问题，constructor需手动修正。原型链顶端为Object.prototype，其[[Prototype]]为null。用hasOwnProperty()判断属性是否属于对象自身，防止原型链污染应避免修改内置原型，可用Object.create(null)或Object.freeze()。ES6 class底层仍基于原型链。

js 原型链继承详解 - 探索对象间隐藏的 [[prototype]] 连接机制

JS 原型链继承是通过对象间的

[[Prototype]]

登录后复制

链接实现的，允许子类继承父类的属性和方法。理解原型链是掌握 JavaScript 面向对象编程的关键。

解决方案

JavaScript 中，每个对象都有一个内部属性

[[Prototype]]

登录后复制

，通常可以通过

__proto__

登录后复制

（非标准，但广泛使用）或

Object.getPrototypeOf()

登录后复制

访问。当我们试图访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript 引擎会沿着

[[Prototype]]

登录后复制

链向上查找，直到找到该属性或到达原型链的顶端（

null

登录后复制

）。

原型链继承的核心在于设置构造函数的

prototype

登录后复制

属性。当我们使用

new

登录后复制

关键字创建一个对象时，新对象的

[[Prototype]]

登录后复制

会指向构造函数的

prototype

登录后复制

属性。通过修改构造函数的

prototype

登录后复制

，我们可以实现属性和方法的继承。

例如：

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

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

function Dog(name, breed) {
  Animal.call(this, name); // 调用父类构造函数，继承属性
  this.breed = breed;
}

// 设置 Dog 的原型为 Animal 的实例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修正 constructor 指向

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

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.sayHello(); // 输出 "Hello, I'm Buddy" (继承自 Animal)
myDog.bark();    // 输出 "Woof!" (Dog 自身的方法)

console.log(myDog instanceof Animal); // true
console.log(myDog instanceof Dog);    // true

登录后复制

这段代码首先定义了一个

Animal

登录后复制

构造函数，并为其

prototype

登录后复制

添加了一个

sayHello

登录后复制

方法。然后，定义了一个

Dog

登录后复制

构造函数，并在其中调用

Animal.call(this, name)

登录后复制

，这允许

Dog

登录后复制

实例继承

Animal

登录后复制

的

name

登录后复制

属性。

关键的一步是

Dog.prototype = Object.create(Animal.prototype)

登录后复制

。

Object.create()

登录后复制

创建了一个新对象，其

[[Prototype]]

登录后复制

指向

Animal.prototype

登录后复制

。这样，

Dog

登录后复制

的实例就可以访问

Animal

登录后复制

的

prototype

登录后复制

上的方法。

Dog.prototype.constructor = Dog

登录后复制

这一行也很重要。如果不修正

constructor

登录后复制

，

Dog.prototype.constructor

登录后复制

会指向

Animal

登录后复制

，这会造成混淆。

最后，

myDog

登录后复制

实例既是

Animal

登录后复制

的实例，也是

Dog

登录后复制

的实例，验证了继承关系。

为什么要使用

Object.create()

登录后复制

而不是直接
Dog.prototype = new Animal()
登录后复制
?

美间AI

美间AI：让设计更简单

查看详情

直接

Dog.prototype = new Animal()

登录后复制

会创建一个新的

Animal

登录后复制

实例作为

Dog.prototype

登录后复制

。这意味着

Dog

登录后复制

的所有实例都会共享

Animal

登录后复制

实例的属性，如果

Animal

登录后复制

构造函数中设置了某些属性，可能会导致意外的共享和修改。

Object.create(Animal.prototype)

登录后复制

创建了一个新对象，其

[[Prototype]]

登录后复制

指向

Animal.prototype

登录后复制

，但不会执行

Animal

登录后复制

构造函数，避免了这个问题。

原型链的顶端是什么？如何判断一个对象是否具有某个属性？

原型链的顶端是

Object.prototype

登录后复制

。

Object.prototype

登录后复制

的

[[Prototype]]

登录后复制

指向

null

登录后复制

。这意味着所有对象最终都继承自

Object.prototype

登录后复制

。

可以使用

hasOwnProperty()

登录后复制

方法来检查一个对象是否自身拥有某个属性，而不是从原型链上继承来的。例如：

const obj = { name: "Alice" };
console.log(obj.hasOwnProperty("name"));       // true
console.log(obj.hasOwnProperty("toString"));   // false (继承自 Object.prototype)

登录后复制

hasOwnProperty()

登录后复制

true

登录后复制

表示该属性是对象自身的属性，

false

登录后复制

表示该属性是从原型链上继承来的。

如何避免原型链污染？

原型链污染指的是通过修改

Object.prototype

登录后复制

或其他内置对象的

prototype

登录后复制

，影响所有基于这些原型创建的对象。这可能导致安全漏洞和不可预测的行为。

避免原型链污染的方法包括：

避免修改内置对象的
prototype
登录后复制
: 尽量不要直接修改
```
Object.prototype
```
登录后复制
、
```
Array.prototype
```
登录后复制
等内置对象的
```
prototype
```
登录后复制
。
使用
Object.create(null)
登录后复制
创建对象:
```
Object.create(null)
```
登录后复制
创建一个没有原型的对象，可以防止从原型链上继承任何属性。
使用
hasOwnProperty()
登录后复制
进行属性检查: 在访问对象的属性之前，使用
```
hasOwnProperty()
```
登录后复制
检查该属性是否是对象自身的属性，避免受到原型链污染的影响。
使用
Object.freeze()
登录后复制
冻结对象:
```
Object.freeze()
```
登录后复制
可以冻结一个对象，防止其属性被修改或添加。