深入浅出 JavaScript 面向对象编程：从原型链到现代类系统

引言：为什么对象是 JavaScript 的核心？

JavaScript 是一门基于原型的面向对象语言，但它的对象系统与传统类式语言（如 Java）截然不同。理解对象、原型和类的关系，是掌握 JavaScript 编程精髓的关键。本文将结合《JavaScript 高级程序设计》第八章内容，带你穿透迷雾，直击本质。

---

一、对象与原型：JavaScript 的基因密码

1. 创建对象的三种姿势

• 字面量 ：const obj = { name: 'Leo' }

• 构造函数 ：new Object()

• 原型继承 ：Object.create(proto)

  const animal = { eats: true };
  const rabbit = Object.create(animal, { jumps: { value: true } });
  console.log(rabbit.jumps); // true（自身属性）
  console.log(rabbit.eats);  // true（继承属性）

2. 原型链：JavaScript 的"家族血脉"

每个对象都有一个隐藏的 [[Prototype]] 属性（可通过 __proto__ 访问），构成链式继承结构：

function Person(name) { this.name = name; }
Person.prototype.sayHi = function() { console.log(`Hi, ${this.name}!`); };

const leo = new Person('Leo');
leo.sayHi(); // 通过原型链调用方法

// 原型链验证
console.log(leo.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null（终点）

3. 原型污染的攻与防

• 危险操作 ：修改 Object.prototype 会导致所有对象受影响

  Object.prototype.contaminated = 'Oops!';
  console.log({}.contaminated); // 'Oops!'

• 防御方案 ：冻结原型或使用无原型对象

  Object.freeze(Object.prototype); // 禁止修改
  const safeObj = Object.create(null); // 无原型的纯净对象

---

二、类与继承：ES6 语法糖背后的真相

1. class 关键字的本质

ES6 的类本质仍是构造函数+原型继承的语法糖，但有以下重要改进：

• 必须通过 new 调用
• 类方法不可枚举（传统构造函数的方法可枚举）
• 内部 [[HomeObject]] 机制实现可靠的 super() 调用

2. 实现继承的三种范式

• 组合继承（经典模式） ：存在效率问题

  function Parent(name) { this.name = name; }
  function Child(name) { Parent.call(this, name); } // 第二次调用父类构造函数
  Child.prototype = new Parent(); // 第一次调用父类构造函数

• 寄生组合继承（最佳实践） ：

  function inherit(Child, Parent) {
    const proto = Object.create(Parent.prototype);
    proto.constructor = Child;
    Child.prototype = proto;
  }

• ES6 类继承 ：

  class Parent { constructor(name) { this.name = name; } }
  class Child extends Parent { 
    constructor(name) { super(name); } // super必须在前！
  }

3. 私有字段的进化史

• 闭包方案 （ES6 之前）：

  const Person = (() => {
    const privateData = new WeakMap();
    return class {
      constructor(name) {
        privateData.set(this, { name });
      }
      getName() { return privateData.get(this).name; }
    };
  })();

• 现代方案 （ES2022+）：

  class Person {
    #name; // 私有字段
    constructor(name) { this.#name = name; }
    getName() { return this.#name; }
  }

在早期 JavaScript 没有官方支持私有属性和方法时，开发者们通常使用下划线 _ 作为属性或方法名的前缀，以此来表示这是一个 "私有" 的成员。不过，这仅仅是一种约定，并不具备真正的私有性。 从 ES2022 开始，JavaScript 引入了使用 # 符号定义的真正私有成员。

---

三、面向对象进阶：设计模式与性能艺术

1. 混入模式（Mixin）

实现对象组合而非继承：

const Flyable = {
  fly() { console.log(`${this.name} is flying!`); }
};

class Bird {
  constructor(name) { this.name = name; }
}
Object.assign(Bird.prototype, Flyable);

const eagle = new Bird('Eagle');
eagle.fly(); // Eagle is flying!

2. 代理与反射：元编程利器

创建智能属性校验：

const validator = {
  set(target, prop, value) {
    if (prop === 'age') {
      if (typeof value !== 'number' || value < 0 || value > 120) {
        throw new Error('Invalid age');
      }
    }
    return Reflect.set(...arguments);
  }
};

const person = new Proxy({}, validator);
person.age = 25; // 正常
person.age = 150; // 抛出错误

3. 内存优化：原型的力量

• 错误做法 ：构造函数内定义方法

  function Person(name) {
    this.name = name;
    this.sayHi = function() { /*...*/ }; // 每个实例都创建新函数
  }

• 正确做法 ：将方法定义在原型上

  Person.prototype.sayHi = function() { /*...*/ }; // 所有实例共享

---

四、JavaScript 面向对象设计哲学

1. 鸭子类型思想

"如果它走起来像鸭子，叫起来像鸭子，那么它就是鸭子"------关注对象能做什么（方法），而非它是什么（类型）。

2. 组合优于继承

通过对象组合、混入模式等方式，构建灵活可维护的代码结构。

3. 拥抱原型本质

即使使用 class 语法，也要理解背后的原型机制，这是调试复杂问题的关键。

---

结语：面向对象的未来

从 ES5 的原型操作到 ES6 的类语法，再到 ES2022 的私有字段，JavaScript 的面向对象体系不断进化。但原型链这一核心从未改变，它如同 JavaScript 的 DNA，深深烙印在语言的最底层。理解这些知识，你将能：

1. 精准调试原型链相关问题
2. 根据场景选择最佳继承方案
3. 编写高性能、可维护的面向对象代码
4. 深入理解现代框架（如 React/Vue）的类组件设计

---

延伸阅读：

• 《你不知道的JavaScript》（上卷）
• MDN 文档：Object、Class、Proxy 专题
• ECMAScript 规范中关于 [[Prototype]] 的描述