JS原型的捉迷藏之旅：从浅到深，一览究竟

2024-01-19 17:28:36

在编程的世界中，JavaScript（JS）作为一门动态语言，以其灵活性、轻便性和广泛的应用而深受开发者的喜爱。在JS中，原型和原型链的概念对于理解对象和继承至关重要。本文将带你踏上JS原型的捉迷藏之旅，从浅到深地解析原型和原型链，揭开它们的神秘面纱。

原型：对象的寻根之旅

在JS中，每个对象都有一个原型，原型是一个特殊的对象，它充当着该对象的基础，提供了一系列共享的属性和方法。换句话说，原型就是对象的根源，它决定了对象的基本行为和特性。

原型可以通过Object.getPrototypeOf()方法访问，该方法返回对象的原型。例如：

const obj = {
  name: "John",
};

const prototype = Object.getPrototypeOf(obj);

console.log(prototype);

输出结果：

Object {
  constructor: ƒ Object(),
  __defineGetter__: ƒ __defineGetter__(),
  __defineSetter__: ƒ __defineSetter__(),
  hasOwnProperty: ƒ hasOwnProperty(),
  isPrototypeOf: ƒ isPrototypeOf(),
  propertyIsEnumerable: ƒ propertyIsEnumerable(),
  toLocaleString: ƒ toLocaleString(),
  toString: ƒ toString(),
  valueOf: ƒ valueOf(),
  ...
}

正如你所见，原型包含了许多属性和方法，这些属性和方法对所有对象都是通用的，它们构成了对象的默认行为。

原型链：寻根溯源，揭开继承的面纱

原型链是指一连串连接在一起的原型对象，它允许一个对象访问其原型对象的属性和方法，从而实现继承。

当访问一个对象的属性或方法时，如果该对象没有该属性或方法，JavaScript会沿着原型链向上查找，直到找到具有该属性或方法的原型对象。这个过程被称为原型链查找。

原型链的建立是通过__proto__属性实现的，__proto__属性指向对象的原型对象。例如：

const obj = {
  name: "John",
};

console.log(obj.__proto__);

输出结果：

Object {
  constructor: ƒ Object(),
  __defineGetter__: ƒ __defineGetter__(),
  __defineSetter__: ƒ __defineSetter__(),
  hasOwnProperty: ƒ hasOwnProperty(),
  isPrototypeOf: ƒ isPrototypeOf(),
  propertyIsEnumerable: ƒ propertyIsEnumerable(),
  toLocaleString: ƒ toLocaleString(),
  toString: ƒ toString(),
  valueOf: ƒ valueOf(),
  ...
}

__proto__属性指向对象的原型对象，而原型对象又可能有自己的原型对象，如此循环往复，就形成了原型链。