在原型迷宫中寻觅真谛：揭秘JavaScript原型和原型链

前端

2023-10-21 10:35:06

JavaScript的原型和原型链是一个令人着迷的话题，却也容易令人望而却步。但不要担心，让我们放下既定的观念，从头开始探索这个 JavaScript 世界中的奥秘，揭开其神秘面纱。

原型和原型链是什么？

在JavaScript中，所有的引用类型（比如数组、函数和对象）都是对象，而对象本质上就是属性的集合。与原生类型的不同之处在于，引用类型的对象拥有一个名为原型的隐藏属性。这个原型也是一个对象，它包含了该类型的所有共享属性和方法。

原型链 是一个指向对象的祖先对象的链。每个对象都有一个指向其原型的指针，而该原型又指向其自己的原型，以此类推，直到链条到达根原型——Object.prototype。

原型和原型链有什么作用？

原型和原型链在JavaScript中扮演着至关重要的角色：

共享属性和方法： 原型允许共享属性和方法，从而避免重复定义。例如，所有数组对象都共享length属性和push()方法，因为它们都继承自Array.prototype。
继承： 原型链提供了原型继承 ，这是一种在对象之间共享功能的机制。子对象可以通过原型链访问父对象的属性和方法，而无需显式继承它们。

理解原型链中的关系

原型链中的关系可以有些复杂，但理解以下几个关键点很重要：

每个对象都有一个原型，指向其祖先对象。
根原型是Object.prototype，所有对象的原型链都最终指向它。
对象的属性和方法首先在其自身属性中查找，如果没有找到，则会沿着原型链向上查找。

举个例子

以下示例演示了原型链的实际工作原理：

const person = { name: "John" };
console.log(person.name); // "John"
console.log(person.hasOwnProperty("name")); // true
console.log(person.__proto__.hasOwnProperty("name")); // false

在这个例子中，person对象有一个name属性，而它的原型（person.__proto__）指向Object.prototype。当我们访问person.name时，它会首先在person对象中查找，因为person拥有自己的name属性。然而，当我们访问person.__proto__.name时，它不会返回任何值，因为Object.prototype没有name属性。