面向对象编程

/* 面向过程：数据和逻辑分离 */
const userName = '张玥';
const userAge = 28;
function greet(name, age) {
  return `我是${name}，今年${age}岁`;
}

/* 面向对象：数据与行为封装在对象中 */
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    return `我是${this.name}，今年${this.age}岁`;
  }
}

const me = new User('张玥', 28);
me.greet(); // "我是张玥，今年28岁"

/* 方式一：对象字面量 */
const user1 = {
  name: '张玥',
  age: 28,
  greet() { return `Hi, ${this.name}`; }
};

/* 方式二：工厂函数（返回对象） */
function createUser(name, age) {
  return {
    name,
    age,
    greet() { return `Hi, ${name}`; }
  };
}

/* 方式三：构造函数（配合 new） */
function User(name, age) {
  this.name = name;
  this.age = age;
}
User.prototype.greet = function() {
  return `Hi, ${this.name}`;
};

/* 方式四：Object.create（原型继承） */
const proto = { greet() { return 'Hi'; } };
const user2 = Object.create(proto);
user2.name = '张玥';

/* new 的四步操作： */
/* 1. 创建一个新的空对象 */
/* 2. 把该对象的原型指向构造函数的 prototype */
/* 3. 将构造函数内的 this 绑定到该对象并执行 */
/* 4. 若构造函数返回对象则返回它，否则返回新对象 */

/* 手动实现一个 myNew */
function myNew(Constructor, ...args) {
  // 第 1、2 步
  const obj = Object.create(Constructor.prototype);
  // 第 3 步
  const result = Constructor.apply(obj, args);
  // 第 4 步
  return (result !== null && typeof result === 'object') ? result : obj;
}

/* 验证 */
function Person(name) { this.name = name; }
const p = myNew(Person, '张玥');
p.name; // "张玥"
p instanceof Person; // true

/* 定义构造函数与原型方法 */
function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  return `${this.name} 发出了声音`;
};

const cat = new Animal('喵喵');

/* 原型链验证 */
cat.__proto__ === Animal.prototype; // true
Animal.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true

/* 属性查找顺序 */
cat.speak(); // 自身没有 → 原型上有 → 调用
cat.toString(); // 一路查到 Object.prototype

/* 判断属性来源 */
cat.hasOwnProperty('name'); // true（自有属性）
cat.hasOwnProperty('speak'); // false（继承属性）
'speak' in cat; // true（含原型链）

function Foo() {}
const f = new Foo();

/* prototype：函数专有，指向"实例的原型" */
typeof Foo.prototype; // "object"
Foo.prototype.constructor === Foo; // true

/* __proto__：所有对象都有，指向自己的原型 */
f.__proto__ === Foo.prototype; // true
Foo.__proto__ === Function.prototype; // true

/* 推荐使用标准 API（__proto__ 已不推荐） */
Object.getPrototypeOf(f) === Foo.prototype; // true
Object.setPrototypeOf(f, null); // 改变原型

/* 创建一个"干净"的对象，不带 Object.prototype */
const dict = Object.create(null);

class Person {
  // 实例字段（可在构造器中初始化）
  species = 'Homo sapiens';
  // 私有字段
  #secret = '私密数据';

  // 构造函数
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // 原型方法（不可枚举）
  greet() {
    return `你好，我是 ${this.name}`;
  }

  // 静态方法（挂在类本身，而非原型）
  static create(name, age) {
    return new Person(name, age);
  }

  // 访问器
  get info() { return `${this.name} / ${this.age}`; }
  set info(v) { [this.name, this.age] = v.split('/'); }
}

const p = Person.create('张玥', 28);
p.greet(); // "你好，我是 张玥"
p.info; // "张玥 / 28"

/* 1. 原型链继承：子类原型指向父类实例 */
function Child() {}
Child.prototype = new Parent();
// 缺点：父类引用属性被所有实例共享

/* 2. 构造函数继承：在子类中调用父类 */
function Child(name) {
  Parent.call(this, name);
}
// 缺点：无法继承父类原型上的方法

/* 3. 组合继承：两者结合（最常用） */
function Child(name) {
  Parent.call(this, name);
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

/* 4. ES6 class extends（最终方案） */
class Child extends Parent {
  constructor(name, extra) {
    super(name); // 必须先调用 super
    this.extra = extra;
  }
  method() {
    return super.method() + ' 扩展';
  }
}

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() { return `${this.name} 发出声音`; }
  static type() { return '动物'; }
}

class Dog extends Animal {
  constructor(name, breed) {
    // 用法一：super() 调用父类构造函数
    super(name);
    this.breed = breed;
  }
  speak() {
    // 用法二：super.method() 调用父类方法
    return super.speak() + '，汪汪！';
  }
  static type() {
    return super.type() + '（犬科）';
  }
}

const d = new Dog('旺财', '柴犬');
d.speak(); // "旺财 发出声音，汪汪！"
Dog.type(); // "动物（犬科）"

/* 方案一：闭包实现私有变量 */
function Counter() {
  let count = 0; // 外部无法访问
  this.increment = () => ++count;
  this.getCount = () => count;
}

/* 方案二：Symbol 作为"伪私有"键 */
const _balance = Symbol('balance');
class Account {
  constructor(v) { this[_balance] = v; }
  getBalance() { return this[_balance]; }
}

/* 方案三：ES2022 私有字段（推荐） */
class BankAccount {
  #balance = 0;

  constructor(initial) {
    if (initial < 0) throw new Error('初始金额不能为负');
    this.#balance = initial;
  }

  deposit(amount) {
    if (amount <= 0) throw new Error('金额必须大于 0');
    this.#balance += amount;
    return this;
  }

  get balance() { return this.#balance; }
}

const acc = new BankAccount(100);
acc.deposit(50).deposit(30);
acc.balance; // 180
acc.#balance; // SyntaxError：外部不可访问

class Shape {
  area() {
    throw new Error('子类必须实现 area()');
  }
}

class Circle extends Shape {
  constructor(r) { super(); this.r = r; }
  area() { return (Math.PI * this.r ** 2).toFixed(2); }
}

class Rect extends Shape {
  constructor(w, h) { super(); this.w = w; this.h = h; }
  area() { return (this.w * this.h).toFixed(2); }
}

/* 统一接口，不同实现 */
const shapes = [new Circle(3), new Rect(4, 5)];
shapes.forEach(s => console.log(s.area()));

/* 鸭子类型：不关心类型，只关心能力 */
function printArea(shape) {
  if (typeof shape.area !== 'function') {
    throw new TypeError('需要 area() 方法');
  }
  return shape.area();
}

/* 1. 默认绑定：独立调用 → window/undefined */
function fn() { console.log(this); }
fn(); // 严格模式下是 undefined

/* 2. 隐式绑定：谁调用，this 就指向谁 */
const obj = { name: '张玥', say() { console.log(this.name); } };
obj.say(); // "张玥"

/* 隐式丢失：赋值后变成默认绑定 */
const fn2 = obj.say;
fn2(); // undefined（this 丢失）

/* 3. 显式绑定：call / apply / bind */
fn.call({ name: '李四' }); // 立即执行
const bound = fn.bind({ name: '王五' }); // 永久绑定

/* 4. new 绑定：this 指向新创建的实例 */
function Foo() { this.x = 1; }
new Foo().x; // 1

/* 箭头函数：没有自己的 this，继承外层 */
const counter = {
  count: 0,
  start() {
    setInterval(() => {
      this.count++; // this 指向 counter
    }, 1000);
  }
};

class Temperature {
  // 静态属性
  static unit = '℃';
  static #instances = 0;

  constructor(celsius) {
    this.#celsius = celsius;
    Temperature.#instances++;
  }

  // 访问器：像属性一样读写
  get fahrenheit() {
    return this.#celsius * 1.8 + 32;
  }
  set fahrenheit(f) {
    this.#celsius = (f - 32) / 1.8;
  }

  // 静态方法
  static count() { return Temperature.#instances; }

  // 迭代器：让实例可被 for...of 遍历
  *[Symbol.iterator]() {
    yield this.#celsius;
    yield this.fahrenheit;
  }
}

const t = new Temperature(25);
t.fahrenheit; // 77
t.fahrenheit = 86; // 反向设置
[...t]; // [30, 86]

/* Mixin：把一个类的原型方法拷贝到另一个类 */
const Serializable = {
  serialize() { return JSON.stringify(this); }
};

const Loggable = {
  log() { console.log(`[LOG] ${this.constructor.name}`); }
};

class User {}
Object.assign(User.prototype, Serializable, Loggable);

const u = new User();
u.log(); // "[LOG] User"

/* 组合：把能力作为属性注入 */
class Logger {
  log(msg) { console.log(`[${new Date().toISOString()}] ${msg}`); }
}

class OrderService {
  constructor(logger) {
    this.logger = logger; // 依赖注入
  }
  create(order) {
    this.logger.log('创建订单');
    return { ...order, id: Date.now() };
  }
}

const service = new OrderService(new Logger());

/* 1. 单例模式 */
class Config {
  static #instance;
  constructor() {
    if (Config.#instance) return Config.#instance;
    Config.#instance = this;
    this.env = 'production';
  }
}

/* 2. 工厂模式 */
class ButtonFactory {
  static create(type) {
    const map = {
      primary: PrimaryButton,
      ghost: GhostButton,
    };
    const Cls = map[type] || PrimaryButton;
    return new Cls();
  }
}

/* 3. 观察者模式（事件总线） */
class EventBus {
  #listeners = new Map();

  on(event, handler) {
    if (!this.#listeners.has(event)) {
      this.#listeners.set(event, new Set());
    }
    this.#listeners.get(event).add(handler);
    return () => this.off(event, handler);
  }

  off(event, handler) {
    this.#listeners.get(event)?.delete(handler);
  }

  emit(event, ...args) {
    this.#listeners.get(event)?.forEach(h => h(...args));
  }
}

/* 4. 策略模式 */
class PriceContext {
  constructor(strategy) { this.strategy = strategy; }
  calc(price) { return this.strategy.calc(price); }
}
const vip = { calc: p => p * 0.8 };
new PriceContext(vip).calc(100); // 80

/* 抽象基类：定义任务通用行为 */
class Task {
  #done = false;

  constructor(title) {
    if (new.target === Task) {
      throw new Error('Task 是抽象类，不能直接实例化');
    }
    this.title = title;
    this.createdAt = new Date();
  }

  get done() { return this.#done; }

  complete() {
    this.#done = true;
    return this;
  }

  // 抽象方法：子类必须实现
  describe() {
    throw new Error('子类必须实现 describe()');
  }
}

/* 具体任务：普通任务 */
class SimpleTask extends Task {
  describe() {
    return `📌 ${this.title}`;
  }
}

/* 具体任务：带截止日期 */
class DeadlineTask extends Task {
  constructor(title, deadline) {
    super(title);
    this.deadline = new Date(deadline);
  }

  describe() {
    const days = Math.ceil(
      (this.deadline - Date.now()) / 86400000
    );
    return `⏰ ${this.title}（剩余 ${days} 天）`;
  }
}

/* 管理器：组合 + 观察者 */
class TaskManager {
  #tasks = [];
  #listeners = new Set();

  add(task) {
    if (!(task instanceof Task)) {
      throw new TypeError('只能添加 Task 实例');
    }
    this.#tasks.push(task);
    this.#notify();
    return this;
  }

  complete(title) {
    const t = this.#tasks.find(x => x.title === title);
    t?.complete();
    this.#notify();
    return this;
  }

  onChange(fn) {
    this.#listeners.add(fn);
    return () => this.#listeners.delete(fn);
  }

  #notify() {
    this.#listeners.forEach(fn => fn(this.report()));
  }

  // 多态：不同任务输出不同描述
  report() {
    return this.#tasks.map(t => ({
      text: t.describe(),
      done: t.done,
    }));
  }
}

/* 使用 */
const manager = new TaskManager();
manager.onChange(list => console.table(list));
manager
  .add(new SimpleTask('阅读 MDN 文档'))
  .add(new DeadlineTask('完成项目评审', '2026-10-01'))
  .complete('阅读 MDN 文档');

/* 陷阱 1：方法中 this 丢失 */
class Timer {
  constructor() { this.n = 0; }
  start() {
    // ❌ this 指向 setInterval 的调用者
    setInterval(function() { this.n++; }, 1000);
    // ✅ 箭头函数继承外层 this
    setInterval(() => { this.n++; }, 1000);
  }
}

/* 陷阱 2：类字段箭头函数 vs 原型方法 */
class A {
  // 每个实例都会创建一份，占用更多内存
  handle = () => { console.log(this); };
  // 挂在原型上，所有实例共享
  normal() { console.log(this); }
}

/* 陷阱 3：循环中创建函数引用同一个变量 */
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0); // 3 3 3
}
// 用 let 或闭包解决

/* 陷阱 4：直接修改原型带来的全局污染 */
// ❌ 永远不要修改内建对象的原型
// Array.prototype.myMethod = function() {};