探秘 JS 原型和原型链：三个图片，一招制敌！

引言

对于前端开发新手而言，原型和原型链概念犹如迷宫，看似深奥莫测，却也暗藏着破解之匙。三张图 ，我将为你揭开这层神秘面纱，让你对原型和原型链了如指掌，在面试中所向披靡。

图片 1：理解原型

[图片一个圆圈，内部写着“构造函数”，指向一个矩形，内部写着“原型”；矩形指向一个圆圈，内部写着“对象实例”。]

原型本质上是一个对象 ，由构造函数创建，与该构造函数创建的所有对象相关联。原型包含了构造函数中定义的所有属性和方法，这些属性和方法可以被与该原型相关联的所有对象继承。

图片 2：原型链

[图片：一个垂直链条，顶部写着“Object.prototype”，下面依次连接着“HTMLElement.prototype”、“HTMLBodyElement.prototype”、“HTMLDivElement.prototype”、“div1”。]

原型链是一个指向 原型对象的链条 。每个对象都包含一个指向其原型的指针。如果对象中没有找到某个属性或方法，则会沿着原型链向上查找，直到找到该属性或方法。Object.prototype 是所有原型链的根原型。

图片 3：KO 原型和原型链

[图片：一个拳头，击打着“原型和原型链”字样；旁边写着“三张图，轻松 KO”。]

这三张图揭示了原型和原型链的本质：原型是对象的属性和方法的集合，原型链是对象的指向其原型的指针链。

技术指南

步骤 1：创建构造函数

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

步骤 2：创建原型

Person.prototype = {
  greet: function() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

步骤 3：创建对象实例

const person1 = new Person('John', 25);

步骤 4：访问原型属性

person1.greet(); // 输出：Hi, I'm John

步骤 5：原型链

console.log(person1.__proto__); // 输出：Person.prototype
console.log(Person.prototype.__proto__); // 输出：Object.prototype

示例代码

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

Animal.prototype.eat = function() {
  console.log(`${this.name} is eating.`);
};

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

Cat.prototype = new Animal();
Cat.prototype.meow = function() {
  console.log(`${this.name} says meow!`);
};

const cat = new Cat('Whiskers');

cat.eat(); // 输出：Whiskers is eating.
cat.meow(); // 输出：Whiskers says meow!

SEO 文章描述

JavaScript 原型和原型链是前端开发中重要的概念。了解这些概念对于理解对象的行为至关重要。通过三个简单的图片，这篇文章将帮助初学者轻松掌握原型和原型链，并提供技术指南和示例代码，以增强理解。