你所不知道的原型和原型链到底是什么？

前端

2023-04-19 13:49:34

揭开原型和原型链的神秘面纱：JavaScript 中的强大工具

JavaScript 是当今网络开发中一种不可或缺的语言，其核心概念之一就是原型和原型链。了解这两个概念对于掌握 JavaScript 开发至关重要，它可以帮助你创建更灵活、可重用和可维护的代码。

原型：对象属性和方法的蓝图

原型是 JavaScript 对象的一个内在属性，它指向创建该对象的构造函数。这个构造函数本质上就是一个蓝图，它定义了对象可以拥有的属性和方法。当创建一个新对象时，它将从其原型继承这些属性和方法。

原型链：属性和方法的查找路径

原型链是从一个对象到其原型，然后到其原型的原型的链条，以此类推。当您访问一个对象的属性或方法时，JavaScript 会首先在该对象中查找它。如果没有找到，它会沿着原型链向上查找，直到找到它或到达原型链的末尾。

原型和原型链如何协同工作

原型和原型链通过 this 协同工作。当您在一个对象的方法中使用 this 关键字时，它指向该对象。这意味着您可以使用 this 关键字来访问该对象及其原型链中的属性和方法，就像它们是该对象自己的属性和方法一样。

代码示例：原型和原型链的实际应用

以下是一个代码示例，演示原型和原型链是如何工作的：

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

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

const person1 = new Person('John');
const person2 = new Person('Mary');

person1.sayHello(); // Hello, my name is John.
person2.sayHello(); // Hello, my name is Mary.

在这个示例中，Person 构造函数有一个名为 name 的属性和一个名为 sayHello 的方法。当您创建一个新的 Person 对象时，该对象将从 Person 构造函数的原型继承 name 属性和 sayHello 方法。这意味着您可以使用 this 关键字来访问这些属性和方法，就像它们是该对象自己的属性和方法一样。