javascript中的原型链是什么

发布时间：2021-07-21 10:29:24 作者：chen
来源：亿速云阅读：159

# JavaScript中的原型链是什么

## 引言

在JavaScript中，原型链（Prototype Chain）是理解对象继承和属性查找机制的核心概念。作为一门基于原型的语言，JavaScript与传统的基于类的语言（如Java、C++）有着显著不同。本文将深入探讨原型链的概念、工作原理、应用场景以及相关的最佳实践，帮助开发者全面掌握这一重要机制。

---

## 一、原型链的基本概念

### 1.1 什么是原型（Prototype）
在JavaScript中，每个对象（除`null`外）都有一个隐藏属性`[[Prototype]]`（可通过`__proto__`或`Object.getPrototypeOf()`访问），这个属性指向另一个对象，称为该对象的"原型"。

```javascript
const obj = {};
console.log(obj.__proto__ === Object.prototype); // true

1.2 原型链的形成

当访问一个对象的属性时，JavaScript会按照以下顺序查找： 1. 检查对象自身属性 2. 如果不存在，则查找对象的[[Prototype]] 3. 递归这个过程直到找到属性或到达原型链末端（null）

function Person() {}
Person.prototype.sayHi = function() {
  console.log("Hi!");
};

const p = new Person();
p.sayHi(); // 通过原型链找到方法

二、原型链的详细工作机制

2.1 构造函数与原型

每个构造函数都有一个prototype属性，指向一个原型对象。当使用new创建实例时，实例的[[Prototype]]会指向构造函数的prototype。

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

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

const cat = new Animal("Mimi");
cat.eat(); // 通过原型链调用

2.2 原型链的层级关系

原型链可以形成多级继承关系：

function Bird() {}
Bird.prototype = Object.create(Animal.prototype);
Bird.prototype.fly = function() {
  console.log(`${this.name} is flying`);
};

const parrot = new Bird("Polly");
parrot.eat();  // 继承自Animal
parrot.fly();  // Bird自有方法

2.3 属性遮蔽（Property Shadowing）

当子对象与原型链上的属性同名时，会发生属性遮蔽：

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

const myDog = new Dog();
myDog.bark = function() {
  console.log("Bark loudly!");
};

myDog.bark(); // "Bark loudly!"（遮蔽了原型方法）

三、原型链相关的关键方法

3.1 Object.create()

创建一个新对象，使用现有对象作为新对象的原型：

const parent = { x: 10 };
const child = Object.create(parent);
console.log(child.x); // 10（通过原型链继承）

3.2 Object.getPrototypeOf() / Object.setPrototypeOf()

获取和设置对象的原型：

const obj = {};
const proto = { y: 20 };

Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // true

3.3 instanceof 操作符

检查构造函数的prototype是否出现在对象的原型链中：

console.log([] instanceof Array);  // true
console.log([] instanceof Object); // true

3.4 hasOwnProperty()

区分自身属性和继承属性：

const obj = { a: 1 };
Object.prototype.b = 2;

console.log(obj.hasOwnProperty('a')); // true
console.log(obj.hasOwnProperty('b')); // false

四、原型链与类继承的关系

4.1 ES6 class 语法糖

class本质上是原型继承的语法糖：

class Person {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

// 等价于
function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() { /*...*/ };

4.2 extends 的实现原理

使用extends时，JavaScript会建立正确的原型链：

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
}

// 原型链关系
console.log(
  Object.getPrototypeOf(Student.prototype) === Person.prototype
); // true

五、原型链的应用场景

5.1 方法共享

所有实例共享原型上的方法，节省内存：

function Car(model) {
  this.model = model;
}

// 所有Car实例共享同一个start方法
Car.prototype.start = function() {
  console.log(`${this.model} starting...`);
};

5.2 原型扩展

通过修改原型可以为所有实例添加功能：

Array.prototype.last = function() {
  return this[this.length - 1];
};

console.log([1, 2, 3].last()); // 3

5.3 多级继承

实现类似传统OOP的继承层次：

function Shape() {}
Shape.prototype.draw = function() { /*...*/ };

function Circle() {}
Circle.prototype = Object.create(Shape.prototype);

六、原型链的注意事项

6.1 性能考虑

过长的原型链会影响属性查找速度：

// 避免创建过深的原型链
function A() {}
function B() {}
function C() {}
B.prototype = Object.create(A.prototype);
C.prototype = Object.create(B.prototype); // 原型链: C -> B -> A

6.2 原型污染

修改内置对象原型可能引发问题：

// 不推荐的做法
Object.prototype.customMethod = function() {};
// 这会影响到所有对象，包括for...in循环

6.3 constructor 属性维护

手动设置原型时需要维护constructor：

function Parent() {}
function Child() {}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child; // 修复constructor引用

七、现代JavaScript中的原型链

7.1 原型链与Proxy

Proxy可以拦截原型链操作：

const handler = {
  getPrototypeOf(target) {
    console.log("Getting prototype");
    return Object.getPrototypeOf(target);
  }
};

const proxy = new Proxy({}, handler);
Object.getPrototypeOf(proxy);

7.2 原型链与Symbol

Symbol属性不会被原型链意外覆盖：

const id = Symbol('id');
Object.prototype[id] = 42;

const obj = {};
console.log(obj[id]); // 42（但不会影响字符串属性）

结语

原型链是JavaScript对象系统的基石，理解其工作原理对于编写高效、可维护的代码至关重要。随着ES6 class语法的普及，虽然原型链的细节被部分隐藏，但在调试、性能优化和高级模式中，深入理解原型链仍然不可或缺。建议开发者： 1. 使用class语法保持代码清晰 2. 避免直接修改内置原型 3. 在需要时使用组合优于继承 4. 利用现代工具（如ESLint）检查原型相关错误

通过掌握原型链，你将能够更好地驾驭JavaScript的面向对象编程能力。

附录：常见面试题

new操作符具体做了什么？
如何实现一个Object.create()的polyfill？
如何判断属性是对象自身属性还是继承属性？
什么是原型污染？如何防范？
ES6 class与原型继承有什么区别？

（全文约4050字） “`

这篇文章全面涵盖了JavaScript原型链的核心概念，包含： - 基础概念解释 - 详细工作机制图解 - 关键API使用方法 - 与现代语法的关系 - 实际应用场景 - 注意事项和最佳实践 - 补充面试题

采用Markdown格式，包含代码示例、层级标题和重点标注，适合作为技术文档或博客文章。