【JavaScript】原型对象 (prototype) 详解

JavaScript 是一门强大的编程语言，其独特的对象模型基于原型链（prototype chain）而非传统的类继承。本文将详细介绍 JavaScript 中的原型对象 prototype，帮助你深入理解其原理及应用场景。

一、JavaScript 中的原型与原型链概述

1. 原型对象的基本概念

在 JavaScript 中，每个对象都有一个内置属性，称为 [[Prototype]]（在一些实现中被访问为 __proto__），它指向另一个对象，这个对象就是该对象的原型（prototype）。当访问对象的属性或方法时，如果该对象本身没有定义该属性或方法，JavaScript 引擎就会沿着原型链去寻找，直到找到为止。原型链是一种机制，它将对象串联起来，形成了一条查找路径。

2. prototype 属性的作用

每个 JavaScript 的函数都有一个特殊的属性 prototype，该属性指向一个对象，函数的所有实例都可以继承这个对象上的属性和方法。prototype 属性是 JavaScript 实现继承的基础。

例如：

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

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

const person1 = new Person('Alice');
person1.sayHello(); // 输出: Hello, my name is Alice

在这个例子中，sayHello 方法被添加到了 Person.prototype 上，因此 person1 可以通过原型链访问这个方法。

二、原型链详解

1. 原型链的结构

JavaScript 的对象之间通过原型链联系起来。当你访问对象的属性时，JavaScript 会首先检查对象本身是否有该属性，如果没有，它会顺着原型链逐级向上查找，直到找到该属性或到达 null（原型链的终点）。这个查找过程的顺序就是原型链的结构。

console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true

在上述例子中，person1 的 __proto__ 指向 Person.prototype，而 Person.prototype 的 __proto__ 又指向 Object.prototype，最后 Object.prototype.__proto__ 是 null，表明已经到达原型链的顶端。

2. 原型链的层级

我们可以理解原型链为一个层级结构：

• 实例对象的 __proto__ 指向其构造函数的 prototype 对象。
• 构造函数的 prototype 对象的 __proto__ 通常指向 Object.prototype。
• Object.prototype 是所有对象的顶层原型，它的 __proto__ 为 null。

三、构造函数与原型对象

1. 构造函数与 prototype

每当你使用构造函数创建对象时，该对象会自动获得对构造函数 prototype 属性中方法和属性的访问权限。这意味着你可以通过 prototype 为对象实例添加共享的属性和方法，而无需每次创建新实例时都重新定义这些属性和方法。

例如：

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

Dog.prototype.bark = function() {
  console.log(this.name + ' is barking!');
};

const dog1 = new Dog('Buddy');
const dog2 = new Dog('Charlie');

dog1.bark(); // 输出: Buddy is barking!
dog2.bark(); // 输出: Charlie is barking!

在这个例子中，bark 方法只定义了一次，但 dog1 和 dog2 实例都可以通过原型链访问并使用该方法。这不仅节省了内存，还提高了代码的复用性。

2. 共享 vs. 实例属性

需要注意的是，使用 prototype 定义的属性是共享的，而使用 this 定义的属性是实例独有的。

function Cat(name) {
  this.name = name; // 实例属性
}

Cat.prototype.type = 'feline'; // 原型属性

const cat1 = new Cat('Whiskers');
const cat2 = new Cat('Felix');

console.log(cat1.type); // 输出: feline
console.log(cat2.type); // 输出: feline

cat1.type = 'domestic';
console.log(cat1.type); // 输出: domestic (实例属性覆盖了原型属性)
console.log(cat2.type); // 输出: feline

在这个例子中，cat1 的 type 属性被修改成了实例属性，不再从原型链中获取该值，而 cat2 依然保持原型中的 feline 值。

四、使用 Object.create() 创建对象

除了使用构造函数，JavaScript 还提供了 Object.create() 方法，用于创建新对象并指定其原型。该方法允许你显式地设置对象的原型，而不需要通过构造函数来创建对象。

例如：

const animal = {
  speak() {
    console.log('Animal sound!');
  }
};

const dog = Object.create(animal);
dog.speak(); // 输出: Animal sound!

在这个例子中，dog 通过 Object.create(animal) 创建，因此它的原型是 animal 对象，能够访问 animal 的 speak 方法。

五、ES6 中的 class 与原型

1. class 语法糖

ES6 引入了 class 语法，让 JavaScript 的面向对象编程风格更加接近传统的类继承。然而，class 本质上只是构造函数和原型机制的语法糖，背后依旧是基于原型链的继承。

例如：

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person1 = new Person('Alice');
person1.sayHello(); // 输出: Hello, my name is Alice

虽然 class 语法看起来更像是面向对象的类继承，但它与传统的原型继承没有本质区别。Person.prototype 仍然是所有 Person 实例的原型。

2. class 继承

使用 class 语法，你可以通过 extends 关键字实现继承：

class Animal {
  speak() {
    console.log('Animal sound');
  }
}

class Dog extends Animal {
  speak() {
    console.log('Bark');
  }
}

const dog = new Dog();
dog.speak(); // 输出: Bark

在这个例子中，Dog 继承了 Animal 类，并重写了 speak 方法。这种继承机制依然是基于原型链实现的。

六、总结

JavaScript 的原型对象 prototype 是其继承机制的核心。通过原型链，JavaScript 实现了对象之间的继承关系，使得属性和方法可以在对象实例之间共享。理解原型和原型链，对于深入掌握 JavaScript 这门语言至关重要。无论是通过传统的构造函数还是现代的 class 语法，原型机制都是不可忽视的核心概念。

推荐：

• JavaScript
• react
• vue

---