JavaScript原型与原型链：前端进阶的秘密武器

2023-01-07 17:47:13

JavaScript 原型与原型链：揭秘前端进阶的利器

作为一名前端开发人员，你是不是也曾被 JavaScript 中的原型和原型链搞得一头雾水？别担心，你并不孤单。它们是 JavaScript 中两个至关重要的概念，理解它们对于掌握对象继承和面向对象编程至关重要。

在这篇深入浅出的文章中，我们将深入探索 JavaScript 原型和原型链，并通过一个网易面试题来巩固你的理解。

什么是 JavaScript 原型？

在 JavaScript 中，每个对象都有一个原型，它是一个包含了该对象所有属性和方法的对象。对象的原型可以通过对象的 __proto__ 属性来访问。

const obj = {
  name: 'John Doe',
  age: 30
};

console.log(obj.__proto__);
// {
//   constructor: Object,
//   hasOwnProperty: function () { [native code] },
//   isPrototypeOf: function () { [native code] },
//   propertyIsEnumerable: function () { [native code] },
//   toLocaleString: function () { [native code] },
//   toString: function () { [native code] },
//   valueOf: function () { [native code] }
// }

如上所示，对象的原型是一个包含了 constructor、hasOwnProperty、isPrototypeOf、propertyIsEnumerable、toLocaleString、toString 和 valueOf 等属性和方法的对象。这些属性和方法是 JavaScript 中的内置属性和方法，它们对所有对象都是可用的。

什么是 JavaScript 原型链？

原型链是从对象到其原型的链条，它可以一直追溯到 Object.prototype。当我们访问一个对象的属性或方法时，JavaScript 会首先在该对象中查找，如果找不到，它就会沿着原型链向上查找，直到找到该属性或方法。

const obj = {
  name: 'John Doe',
  age: 30
};

console.log(obj.name); // John Doe
console.log(obj.__proto__.toString.call(obj)); // [object Object]

在这个例子中，当我们访问 obj.name 时，JavaScript 会首先在 obj 对象中查找，找到 name 属性并返回其值 "John Doe"。当我们访问 obj.__proto__.toString.call(obj) 时，JavaScript 会首先在 obj.__proto__ 对象中查找，找到 toString 方法并调用它，并将 obj 作为参数传递给 toString 方法，最后返回字符串 "[object Object]”。

网易面试题：所有对象身上都有隐式原型吗？为什么？

是的，所有对象身上都有隐式原型，因为 JavaScript 中的所有对象都是从 Object.prototype 创建的。Object.prototype 是一个空对象，它包含了一些基本的属性和方法，这些属性和方法对所有对象都是可用的。