从“养猫”看懂JS面向对象：原型链与Class本质拆解

JavaScript 的面向对象设计既古怪又实用——早期靠“函数+原型”实现封装与继承，ES6 引入 Class 语法后其实仍是原型机制的语法糖。许多开发者对原型链感到困惑，

这篇文章覆盖从手动创建单只猫、批量实例化。到实现猫继承动物通用能力，全程结合可运行代码，拆解 JS 面向对象根本原因。无论你是新手还是想巩固原型链知识，都能通过实操找到关键要点。

一、原始时代：手动捏猫。累到怀疑人生

JS 早期没有 class，想创建对象全靠“手工建立”。下面这段代码高度还原了这种“原始作坊模式”：

// 先定义个猫的「空模板」
var Cat = {
至于name。"",color: ""
};// 手动捏第一只猫：加菲猫
var cat1 = {};// 先造个空壳
cat1.name = '加菲猫';// 手动填名字
cat1.color = '橘色';// 手动染毛色
// 手动捏第二只猫：黑猫警长
var cat2 = {};// 再造个空壳
cat2.name = '黑猫警长';说起来，cat2.color = '黑色';

再看灵魂拷问，这种方式有多坑？

• 想养10只猫就要写10遍重复代码，堪称复制粘贴地狱。
• 某天想给所有猫加「品种」属性。需要逐一修改，比给小区所有宠物挂号还麻烦。
• 猫和猫之间没有任何血缘关系，没法统一管理。

这时候你肯定会想：“能不能搞个『猫工厂』？一键批量产猫，”——这就是 JS 面向对象的主要诉求：封装实例化过程，减少重复代码。

二、工业革命：构造函数，批量产猫的流水线

构造函数就是 “猫工厂”的第一版蓝图。它把「捏盒子 → 填信息」流程封装成流水线：

// 构造函数= 猫工厂蓝图
function Cat {
console.log;// 打印：Cat {}
this.name = name;// 给空盒子贴名字标签
this.color = color;// 给空盒子染毛色
}
// 坑点预警：没按 new 开关直接调用，会搞破坏！Cat，// this 指向 window，相当于在全局乱贴标签
// 正确操作：按 new 开关启动流水线
const cat1 = new Cat;// 产出第一只 cat
console.log;// 输出：Cat { name: '加菲猫',color: '橘色' }
const cat2 = new Cat;console.log，其实，// true
// 判断这是不是咱工厂的 cat
console.log;// true

"new" 工厂开关到底做了啥？

1. 造空壳： 自动生成一个空对象。
2.  让构造函数里的 this 指向这个空盒子。
3.  执行构造函数代码，把属性塞进盒子。
4.  自动返回已填好的盒子。

"this" 的变脸术

• 用 new 调用时this 是待出厂的 cat。
• 直接调用时this 是 window，会污染全局——这就是为何构造函数必须用 new 调用！

三、调整升级：原型模式，cat 的共享仓库

构造函数解决了批量创建问题。但隐藏着新的隐患——如果在构造函数里定义方法，每个实例都会生成独立的方法副本，引起内存浪费。

function Cat {
this.name = name;this.color = color;// 每只 cat 都有独立 eat 方法，大量实例极易导致内存膨胀
this.eat = function { alert;}，不过，}
const cat1 = new Cat;const cat2 = new Cat;console.log，// false

This shows that every instance gets its own copy of `eat`,wasting memory when you have many cats.

The solution is **prototype**—a shared repository attached to each constructor that holds common properties and methods.

function Cat {
this.name = name;this.color = color;}
// 所有 cats 共用 type 与 eat 方法
Cat.prototype.type = '貓科動物';Cat.prototype.eat = function { console.log;}，const cat1 = new Cat;const cat2 = new Cat;console.log，// 猫科动物
console.log;// true
/* 可自行覆盖：
cat1.type ='铲屎官之宠';
console.log，// 铲屎官之宠 猫科动物 */

"__proto__" 与查找规则详解：

• A: {}'s __proto__ 指向自己的 prototype 对象；若该属性不存在则继续往上查。

1. 先看自身是否拥有该属性或方法；其实，如果没有，则顺着 __proto__ 查找；若仍未找到，则继续沿着 prototype 链走到 Object.prototype。接下来到 null 为止。

四、验物工具：三个方法快速分辨「自己的」vs 「借来的」属性

function Cat{
this.name=name;this.color=color;}
Cat.prototype.type='貓科動物';Cat.prototype.eat=function{ console.log;}，不过，const c=new Cat;// .hasOwnProperty 判断是否自己拥有属性
console.log);// true
console.log);// false
// .in 判断是否存在无论自己还是借来的
console.log;// true
console.log;// true
// .isPrototypeOf 判断仓库是否为此实例所用的 prototypical 来源
console.log);// true
// for...in 遍历所有可枚举属性，包括自己和借来的。for {
console.log;/* name Tom /color black/type 貓科動物/eat ƒ */
}

五、现代包装：ES6 Class——精装修版 “Cats Factory”

class 并不是新模型。它只是给 原型 模式套了一个外壳，让语法更像传统 OOP。内部逻辑完全依旧是 原型链 + 构造器 + 方法共享。关键点在于了解每一步背后的 “工作细节”。

如果你一直被 new 和 prototype 的混乱所困扰。请先熟悉以上两节，再来看看 ES6 Class 如何让代码更易读。

💡 小提醒 💡 当你看到 class 时请记得其实它等价于下面的组合式实现，并非真正的新模型。

js class Foo{constructor{…}bar{，不过，}}

说到等价于。

js function Foo{… } Foo.prototype.bar=function{… } 而且即使使用 class 定义。也会在内部做类似以下操作： Object.setPrototypeOf Object.defineProperties

如果你还未体会 super 的魔力，那请留意下一节关于继承如何真正把父类初始化交给子类。

---

🔧 实战演练 🔧 html ``

🛠️ 最终版本👇🏽

javascript class Animal{ constructor{ this.species='动物';} sayHi{ console.log;} }

class Dog extends Animal{constructor{ super;/* 必须先执行父类初始化 */ this.name=name;} }

let d=new Dog;d.sayHi，/* 哪哪哪啦 / d.species / 动物 */

---

👀 主要：

• **constructor** 是内部真正执行初始化逻辑的方法；在 **class** 中被称作 **constructor** 而非 **init** 或 **build** 等词典里的名称，而在传统 JavaScript 函数中我们把它叫做 **构造器** 或者 **生成器**。若使用 `new` 调用此类，它会成为新实例所拥有的一块内存空间并将其绑定至该实例；其实，若不使用则无法正常运行并报错。因为内部已经把这一块空间视作不可变参数传递到外部变量中去了！一旦出现错误，即使程序已经完成编译，也只能抛出异常提示而非正常工作。这正是为什么我们说 “Constructor 必须与 `new` 一起使用”的原因之一。说起来，若忘记 `new` 就会导致上下文泄漏到全局变量中，从而产生不可预测的问题。如下面例子所示：

  
  javascript
  function Animal{
  console.dir;老实说，console.info;/* 如果忘记使用 new，这里指的是 global object */
  }
  
  显示为 `` 而不是 `` 对象。从而导致后续访问不存在的方法或属性时产生错误。建议始终记住在调用自定义类型时一定要配合 `new` 使用，以保证正确性和安全性！
  
  
  

  🗂️ 小结

  • 构造器是一种特殊类型。可以通过关键字 new 创建新的实例，并自动绑定 this 上下文。说起来，
  • 原型链确保所有同一类实例可以共享公共方法。提高内存利用率，
  • ES6 Class 提供更直观、更易维护、更接近传统 OOP 的语法糖，但其底层实现仍基于 prototype。

---