JavaScript原型对象怎么用

发布时间：2022-01-18 09:02:07 作者：iii
来源：亿速云阅读：135

# JavaScript原型对象怎么用

## 前言

在JavaScript中，原型（Prototype）是理解对象继承和共享机制的核心概念。与基于类的语言不同，JavaScript使用原型继承来实现对象的属性和方法共享。本文将深入探讨原型对象的概念、工作原理以及实际应用场景。

---

## 一、原型对象基础概念

### 1.1 什么是原型对象

每个JavaScript对象（除`null`外）都有一个关联的`[[Prototype]]`内部属性（可通过`__proto__`访问），这个属性指向的就是该对象的原型对象。原型对象本身也是一个普通对象，它包含可以被其他对象共享的属性和方法。

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

1.2 构造函数与原型

当使用构造函数创建对象时，新对象的原型会自动指向构造函数的prototype属性：

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

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

let john = new Person('John');
john.sayHello(); // Hello, John!

二、原型链机制

2.1 原型链的结构

JavaScript通过原型链实现继承。当访问一个对象的属性时，引擎会： 1. 先在对象自身查找 2. 如果没有，则去原型对象上查找 3. 递归这个过程直到Object.prototype（最终为null）

console.log(john.toString()); // 来自Object.prototype

2.2 原型链示意图

john → Person.prototype → Object.prototype → null

2.3 修改原型链的方法

Object.create()：创建指定原型的新对象

let parent = { x: 10 };
let child = Object.create(parent);

setPrototypeOf（不推荐用于生产环境）

Object.setPrototypeOf(child, newProto);

三、原型对象的实际应用

3.1 方法共享

通过原型实现方法共享，避免每个实例都创建独立的方法副本：

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

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

3.2 实现继承

ES5中常用的继承模式：

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

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

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

// 设置原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

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

3.3 扩展内置对象

通过修改原型可以扩展内置对象功能（需谨慎）：

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

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

四、ES6类与原型的关系

4.1 class语法糖本质

ES6的class本质仍是基于原型的语法糖：

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  area() {
    return this.height * this.width;
  }
}

console.log(typeof Rectangle); // "function"
console.log(Rectangle.prototype.area); // function

4.2 继承的实现

extends关键字自动处理了原型链：

class Square extends Rectangle {
  constructor(side) {
    super(side, side);
  }
}

五、原型相关API详解

5.1 Object.create()

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

const person = {
  isHuman: false,
  printIntroduction() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);
me.name = 'Matthew';
me.isHuman = true;

5.2 Object.getPrototypeOf()

获取对象的原型：

console.log(Object.getPrototypeOf(me) === person); // true

5.3 instanceof操作符

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

console.log(john instanceof Person); // true

六、性能优化与注意事项

6.1 原型修改的影响

动态修改原型会影响所有相关实例：

function Foo() {}
let foo = new Foo();

Foo.prototype.newMethod = function() {};
// foo立即可以访问newMethod

6.2 避免原型污染

不要随意修改内置对象的原型（如Object/Array），这可能导致： - 命名冲突 - 破坏已有代码 - 性能下降

6.3 原型与属性查找性能

原型链越长，属性查找时间越长。V8等引擎会优化频繁访问的原型属性。

七、常见问题解答

Q1: proto vs prototype的区别？

prototype是函数特有的属性
__proto__是每个对象都有的属性（现已标准化）

Q2: 如何判断属性是自身的还是继承的？

使用hasOwnProperty()：

john.hasOwnProperty('name'); // true
john.hasOwnProperty('toString'); // false

Q3: 如何实现深拷贝包括原型？

function deepClone(obj) {
  let clone = Object.create(Object.getPrototypeOf(obj));
  // ...递归拷贝属性
  return clone;
}

结语

理解JavaScript原型是掌握这门语言的关键。虽然ES6引入了class语法，但其底层仍然是基于原型的继承机制。合理使用原型可以实现高效的代码组织和复用，但也要注意避免常见的陷阱。建议开发者通过实践来深入理解这一核心概念。

本文约3000字，完整5000字版本需要扩展更多实际案例、性能测试数据和历史背景等内容。 “`

注：实际5000字文章需要： 1. 增加更多代码示例和解释 2. 添加性能对比测试数据 3. 深入讨论原型与闭包的异同 4. 增加框架（如React/Vue）中的原型应用实例 5. 添加调试技巧和工具使用说明 6. 扩展常见面试题解析 7. 增加原型设计模式的应用场景