深入理解 JavaScript 对象原型，解密原型链之谜（上）

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

摘要

本文将深入探讨 JavaScript 中的对象原型，包括其工作原理、用途和优势。通过实例演示，帮助读者更好地掌握这一重要概念。🎓

引言

大家好，我是阿珊！对象原型是 JavaScript 中一个非常重要的特性，它对于理解和扩展对象的行为起着关键作用。在本文中，我们将一起探索对象原型的奥秘。让我们开启这段有趣的学习之旅吧！💡

一、对象原型的基础📘

解释对象原型的概念和作用

在 JavaScript 中，对象原型（Object Prototype）是对象继承属性和方法的一种机制。每个 JavaScript 对象都有一个原型，当我们试图访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 会在该对象的原型上查找。

对象原型的概念和作用如下：

1. 对象原型的概念：对象原型是一个包含共享属性和方法的对象。在 JavaScript 中，所有的对象都是通过原型链来访问属性和方法的。当我们创建一个对象时，它会从它的原型继承属性和方法。

2. 对象原型的作用：对象原型使得我们可以共享属性和方法，从而减少内存占用和提高性能。当我们创建一个对象时，如果该对象需要使用一些通用的属性和方法，我们可以在原型上定义这些属性和方法，从而使得所有对象都可以共享这些属性和方法。

例如，在 JavaScript 中，所有的数组对象都有一个原型，这个原型包含了数组对象通用的属性和方法。当我们创建一个数组对象时，它会从数组原型上继承这些属性和方法。

const arr = [1, 2, 3];
console.log(arr.__proto__ === Array.prototype); // 输出：true

在上面的示例中，arr 是一个数组对象，它从 Array.prototype（数组原型）上继承了属性和方法。

总之，对象原型是 JavaScript 中对象继承属性和方法的一种机制，它使得我们可以共享通用的属性和方法，从而减少内存占用和提高性能。

展示如何创建和使用对象原型

在 JavaScript 中，可以通过以下方式创建和使用对象原型：

1. 创建对象原型：可以使用 Object.create() 方法来创建一个对象原型。这个方法会创建一个新对象，该对象具有指定的原型。

const prototype = Object.create(Object.prototype);

在上面的示例中，我们创建了一个新对象 prototype，它的原型是 Object.prototype。

2. 为对象原型添加属性和方法：可以为对象原型添加属性和方法，从而使得所有对象都可以共享这些属性和方法。

prototype.greeting = "Hello";
prototype.sayHello = function() {console.log(`${this.greeting}, world!`);
};

在上面的示例中，我们为 prototype 添加了 greeting 和 sayHello 属性和方法。

3. 创建对象并继承原型：可以使用 Object.create() 方法创建一个新对象，并指定一个原型。这样，新对象就会从指定的原型上继承属性和方法。

const person = Object.create(prototype);
person.name = "Alice";

在上面的示例中，我们创建了一个新对象 person，并指定它的原型为 prototype。因此，person 会从 prototype 上继承 greeting 和 sayHello 属性和方法。

4. 使用原型链访问属性和方法：当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 会在该对象的原型上查找。

console.log(person.greeting); // 输出："Hello"
person.sayHello(); // 输出："Hello, world!"

在上面的示例中，我们访问了 person 对象的 greeting 和 sayHello 属性和方法，这些属性和方法是从 prototype 上继承的。

总之，在 JavaScript 中，可以通过创建对象原型、为原型添加属性和方法、创建对象并继承原型以及使用原型链访问属性和方法等方式来使用对象原型。

二、原型链的工作原理📚

介绍原型链的基本概念

原型链是 JavaScript 中对象继承属性和方法的一种机制。当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 会在该对象的原型上查找。这种查找过程形成了一条原型链。

原型链的基本概念如下：

1. 每个 JavaScript 对象都有一个原型：在 JavaScript 中，所有的对象都是通过原型链来访问属性和方法的。当我们创建一个对象时，它会从它的原型继承属性和方法。

2. 原型也是一个对象：在 JavaScript 中，原型也是一个对象，它包含共享属性和方法。当我们创建一个对象时，它会从原型上继承属性和方法。

3. 原型链：当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 会在该对象的原型上查找。这种查找过程形成了一条原型链。

4. 查找过程：在查找原型链时，JavaScript 会从当前对象开始，逐个检查其原型，直到找到指定的属性和方法，或者到达原型链的末尾（Object.prototype）。

5. 原型链中断：如果到达原型链的末尾仍然没有找到指定的属性和方法，那么查找过程将会中断，并抛出一个 ReferenceError 错误。

下面是一个简单的示例，展示了原型链的基本概念：

const prototype = {greeting: "Hello",sayHello: function() {console.log(`${this.greeting}, world!`);}
};const person = Object.create(prototype);
person.name = "Alice";console.log(person.greeting); // 输出："Hello"
person.sayHello(); // 输出："Hello, world!"

在上面的示例中，我们创建了一个原型对象 prototype，并创建了一个新对象 person，并指定它的原型为 prototype。因此，person 会从 prototype 上继承 greeting 和 sayHello 属性和方法。当我们访问 person 对象的 greeting 和 sayHello 属性和方法时，JavaScript 会沿着原型链查找这些属性和方法，并找到它们。

总之，原型链是 JavaScript 中对象继承属性和方法的一种机制，它使得我们可以共享通用的属性和方法，从而减少内存占用和提高性能。

通过示例解释原型链的继承机制

在 JavaScript 中，对象继承属性和方法的一种方式是通过原型链。原型链继承机制允许我们在一个对象上添加或修改属性，然后在其派生对象中继承这些属性。以下是一个简单的示例，解释了原型链的继承机制：

function Person(name) {this.name = name;
}Person.prototype.sayHello = function() {console.log(`Hello, my name is ${this.name}`);
};function Employee(name, employeeId) {Person.call(this, name);this.employeeId = employeeId;
}Employee.prototype = Object.create(Person.prototype);Employee.prototype.constructor = Employee;Employee.prototype.sayHello = function() {console.log(`Hello, my name is ${this.name} and my employee ID is ${this.employeeId}`);
};var employee = new Employee("Alice", "E123");
employee.sayHello(); // 输出：Hello, my name is Alice and my employee ID is E123

在这个示例中，我们首先创建了一个 Person 构造函数和一个 Employee 构造函数。Employee 继承了 Person。为了实现继承，我们使用 Object.create(Person.prototype) 创建了一个新的原型对象，这个新原型对象继承了 Person 的原型。然后我们将 Employee 的原型指向这个新创建的原型对象。这样，Employee 就继承了 Person 的属性和方法。

我们还重写了 Employee 的 sayHello 方法，使其输出更具体的信息。当我们创建一个 Employee 实例并调用 sayHello 方法时，由于继承了 Person 的 sayHello 方法，所以可以正常调用并输出结果。

总之，在 JavaScript 中，可以通过原型链继承机制在一个对象上添加或修改属性，然后在其派生对象中继承这些属性。