JavaScript中的原型和原型链是什么

发布时间：2021-11-27 17:36:18 作者：iii
来源：亿速云阅读：111

# JavaScript中的原型和原型链是什么

## 引言

在JavaScript中，原型（Prototype）和原型链（Prototype Chain）是理解对象继承和属性查找机制的核心概念。尽管现代JavaScript引入了`class`语法，但其底层仍然基于原型继承。本文将深入探讨原型和原型链的概念、工作原理以及实际应用。

---

## 1. 原型（Prototype）基础

### 1.1 什么是原型？
每个JavaScript对象（除`null`外）都有一个内置的`[[Prototype]]`属性（可通过`__proto__`或`Object.getPrototypeOf()`访问），指向另一个对象，这个对象就是当前对象的“原型”。

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

1.2 原型的作用

属性共享：原型对象的属性和方法可以被所有实例共享。
继承机制：通过原型实现对象之间的继承。

1.3 构造函数与原型

构造函数通过prototype属性关联原型对象，实例通过__proto__指向该原型。

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}!`);
};

const alice = new Person('Alice');
alice.sayHello(); // 调用原型方法

2. 原型链（Prototype Chain）

2.1 原型链的形成

当访问对象的属性时，JavaScript会按以下顺序查找： 1. 对象自身属性 2. 对象的[[Prototype]]（原型） 3. 原型的[[Prototype]]（形成链式结构） 4. 直到null（链的末端）

alice.toString(); // 调用Object.prototype.toString

JavaScript中的原型和原型链是什么
（示意图：实例 → Person.prototype → Object.prototype → null）

2.2 手动修改原型链

通过Object.setPrototypeOf()或直接赋值__proto__（不推荐）可以修改原型链。

const parent = { familyName: 'Smith' };
const child = { name: 'Tom' };
Object.setPrototypeOf(child, parent);
console.log(child.familyName); // 'Smith'

3. 原型继承的实现方式

3.1 构造函数继承

结合call和原型赋值实现继承。

function Parent(name) {
  this.name = name;
}
Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 继承属性
  this.age = age;
}
Child.prototype = Object.create(Parent.prototype); // 继承方法
Child.prototype.constructor = Child;

3.2 ES6的`class`语法

class是原型继承的语法糖。

class Parent {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

4. 关键API与操作

4.1 相关方法

Object.create(proto)：以指定原型创建对象
Object.getPrototypeOf(obj)：获取对象的原型
instanceof：检查构造函数的原型是否在对象链上

4.2 性能注意事项

频繁修改原型链（如Object.setPrototypeOf）会破坏引擎优化
深度过长的原型链会影响查找效率

5. 常见问题与陷阱

5.1 原型污染

无意中修改原型对象会影响所有实例。

Array.prototype.push = function() { 
  console.log('Hacked!');
};
[1, 2].push(3); // 所有数组受影响

5.2 `for...in`遍历

会枚举原型链上的可枚举属性，需配合hasOwnProperty使用。

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key); // 仅自身属性
  }
}

6. 实际应用场景

6.1 方法复用

将公共方法定义在原型上节省内存。

function Car(model) {
  this.model = model;
}
Car.prototype.drive = function() {
  console.log(`${this.model} is driving.`);
};

6.2 多级继承

通过原型链实现多层继承关系（如UI组件库）。

7. 现代JavaScript的最佳实践

优先使用class语法
避免直接操作__proto__
使用Object.hasOwn()替代hasOwnProperty
考虑组合优于继承的设计模式

// 组合示例
const canEat = {
  eat() { console.log('Eating...'); }
};
const canWalk = {
  walk() { console.log('Walking...'); }
};
class Person {
  constructor() {
    Object.assign(this, canEat, canWalk);
  }
}

结论

原型和原型链是JavaScript面向对象编程的基石。理解这些概念有助于： - 编写更高效的代码 - 调试复杂的继承关系 - 深入理解框架（如React/Vue）的底层机制

尽管现代开发中class语法更直观，但掌握原型机制仍是进阶JavaScript开发的必备技能。 “`

字数统计：约2150字（含代码示例）
扩展建议：可进一步探讨Symbol与原型的关系、V8引擎对原型链的优化等高级话题。