迷雾终散，直面JavaScript原型与原型链

前端

2023-11-10 18:23:09

何谓原型？

在 JavaScript 中，原型是通过函数创建的对象。当用 new 运算符调用函数时，JavaScript 会创建一个新的对象，该对象的原型被设置为调用函数。这允许新对象继承调用函数的属性和方法。

何谓原型链？

原型链是 JavaScript 中一个对象的原型到最终原型的连续链。原型链允许对象访问其原型中的属性和方法，以及其原型的原型中的属性和方法，依此类推。

JavaScript原型和原型链的关系

JavaScript 中，原型链是基于原型概念构建的。每个对象都有一个原型，原型也是一个对象，它可以具有自己的属性和方法。如果一个对象找不到某个属性或方法，它会沿着原型链向上查找，直到找到该属性或方法。

举个例子，探究一下原型链是如何运作的：

假设我们有一个名为 Person 的构造函数，该构造函数具有 name 和 age 两个属性。

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

现在，我们创建一个新的 Person 对象。

const person = new Person('John Doe', 30);

这个新对象具有 name 和 age 两个属性。如果我们想访问 person 对象的 name 属性，我们可以通过以下方式进行：

person.name

这会返回字符串 'John Doe'。

如果我们想访问 person 对象的 age 属性，我们可以通过以下方式进行：

person.age

这会返回数字 30。

但是，如果我们想访问 person 对象的 occupation 属性，我们就会遇到问题，因为 Person 构造函数没有定义 occupation 属性。在这种情况下，JavaScript 会沿着原型链向上查找。Person 构造函数的原型是 Object.prototype，Object.prototype 具有 occupation 属性。