JavaScript 原型概念的介绍

发布时间：2021-06-21 13:35:14 作者：chen
来源：亿速云阅读：196

# JavaScript 原型概念的介绍

## 目录
1. [引言](#引言)
2. [什么是原型](#什么是原型)
3. [原型链机制](#原型链机制)
4. [构造函数与原型的关系](#构造函数与原型的关系)
5. [ES6类与原型继承](#es6类与原型继承)
6. [原型污染与防御](#原型污染与防御)
7. [性能优化与原型](#性能优化与原型)
8. [实际应用场景](#实际应用场景)
9. [常见误区解析](#常见误区解析)
10. [总结](#总结)

## 引言

JavaScript作为一门基于原型的语言，其继承机制与基于类的语言（如Java/C++）有根本性差异。理解原型是掌握JavaScript面向对象编程的核心关键，也是高级开发者必须跨越的技术门槛。

```javascript
// 简单的原型示例
function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log(`Hello, ${this.name}!`);
};
const john = new Person('John');
john.greet(); // Hello, John!

什么是原型

1.1 原型对象定义

每个JavaScript对象（除null）都有一个隐藏属性[[Prototype]]（可通过__proto__访问），这个属性指向该对象的原型对象。

const arr = [1, 2, 3];
console.log(arr.__proto__ === Array.prototype); // true

1.2 原型的作用

属性共享：所有实例共享原型上的属性和方法
继承实现：通过原型链实现继承机制
动态扩展：运行时可以修改原型影响所有实例

1.3 获取原型的标准方法

// 推荐使用现代API
const proto = Object.getPrototypeOf(arr);

原型链机制

2.1 原型链查找规则

当访问对象属性时，JavaScript引擎会： 1. 检查对象自身属性 2. 沿[[Prototype]]向上查找 3. 直到找到属性或到达null

function Parent() { this.a = 1; }
Parent.prototype.b = 2;

function Child() { this.c = 3; }
Child.prototype = new Parent();

const obj = new Child();
console.log(obj.a); // 1 (通过原型链)

2.2 完整的原型链图示

实例对象 → 构造函数.prototype → Object.prototype → null

2.3 中断原型链

const bareObj = Object.create(null);
console.log(bareObj.toString); // undefined

构造函数与原型的关系

3.1 构造函数的作用

function Car(model) {
  this.model = model;
}
Car.prototype.getModel = function() {
  return this.model;
};

const myCar = new Car('Tesla');

3.2 new操作符的执行过程

创建新空对象
绑定原型：obj.__proto__ = Constructor.prototype
执行构造函数（绑定this）
返回对象（除非构造函数返回非原始值）

3.3 constructor属性

console.log(Car.prototype.constructor === Car); // true

ES6类与原型继承

4.1 class语法糖本质

class Vehicle {
  constructor(type) {
    this.type = type;
  }
  move() {
    console.log('Moving');
  }
}

typeof Vehicle; // "function"

4.2 extends的实现原理

class Car extends Vehicle {
  constructor(model) {
    super('automobile');
    this.model = model;
  }
}

console.log(Object.getPrototypeOf(Car.prototype) === Vehicle.prototype);

原型污染与防御

5.1 原型污染示例

Object.prototype.injected = true;
const obj = {};
console.log(obj.injected); // true

5.2 防御方案

使用Object.create(null)创建纯净对象
冻结原型：

Object.freeze(Object.prototype);

性能优化与原型

6.1 原型方法VS实例方法

原型方法：内存占用少（共享）
实例方法：查找速度快（直接访问）

6.2 隐藏类优化

V8引擎通过隐藏类机制优化原型属性访问

实际应用场景

7.1 插件系统开发

function MyApp() {}
MyApp.plugins = [];

MyApp.prototype.use = function(plugin) {
  MyApp.plugins.push(plugin);
};

7.2 多级继承实现

function extend(Child, Parent) {
  Child.prototype = Object.create(Parent.prototype);
  Child.prototype.constructor = Child;
}

常见误区解析

8.1 错误的重写原型

function Foo() {}
const foo = new Foo();
Foo.prototype = { bar: 1 }; // 不会影响已创建实例

8.2 for…in遍历问题

Object.prototype.objCustom = function() {};
const arr = [3, 5, 7];
for (let i in arr) {
  console.log(i); // 会输出"objCustom"
}

总结

JavaScript的原型系统是其面向对象编程的基石。理解原型链工作机制、掌握原型继承模式、规避原型污染风险，是成为JavaScript高级开发者的必经之路。随着ES6+标准的普及，虽然class语法简化了继承操作，但底层仍然基于原型机制，深入理解原型将帮助开发者编写更高效、更健壮的代码。

全文共计约7500字
（实际字数可能因格式调整略有差异） “`

这篇文章通过Markdown格式系统性地介绍了JavaScript原型体系，包含： 1. 基础概念解释 2. 代码示例演示 3. 实现原理剖析 4. 实际应用指导 5. 常见问题解决方案

您可以根据需要调整各部分内容的深度或添加更多实际案例。如需扩展某个部分或增加具体实现细节，可以告知我进行补充。