类与继承

┌─────────────────────────────────────────────────────────┐
│                    类的原型链结构                          │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  Dog（类/构造函数）                                       │
│   │                                                     │
│   │ prototype                                           │
│   ▼                                                     │
│  Dog.prototype ────────────┐                            │
│   │                        │                            │
│   │ constructor            │ __proto__                  │
│   │ = Dog                  ▼                            │
│   │                  Animal.prototype                   │
│   │                        │                            │
│   │                        │ __proto__                  │
│   │                        ▼                            │
│   │                   Object.prototype                  │
│   │                        │                            │
│   │                        │ __proto__                  │
│   │                        ▼                            │
│   │                         null                        │
│   │                                                     │
│   ▼                                                     │
│  dog 实例                                                │
│   │                                                     │
│   │ __proto__ = Dog.prototype                           │
│                                                         │
└─────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────┐
│              Animal (父类)                            │
│  ┌────────────────────────────────────────────────┐  │
│  │ 属性：name                                      │  │
│  │ 方法：speak(), move()                           │  │
│  └────────────────────────────────────────────────┘  │
│         ▲                ▲                ▲          │
│         │                │                │          │
│    ┌────┴────┐      ┌────┴────┐      ┌────┴────┐    │
│    │   Dog   │      │   Cat   │      │  Bird   │    │
│    ├─────────┤      ├─────────┤      ├─────────┤    │
│    │breed    │      │color    │      │canFly   │    │
│    │bark()   │      │meow()   │      │fly()    │    │
│    │fetch()  │      │climb()  │      │         │    │
│    └─────────┘      └─────────┘      └─────────┘    │
└──────────────────────────────────────────────────────┘

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  // 实例方法
  sayHello() {
    console.log(`Hello, I'm ${this.name}`)
  }

  // Getter
  get info() {
    return `${this.name}, ${this.age} years old`
  }

  // Setter
  set setAge(age) {
    this.age = age
  }
}

const person = new Person("Alice", 25)
person.sayHello() // "Hello, I'm Alice"
console.log(person.info) // "Alice, 25 years old"
person.setAge = 26
console.log(person.age) // 26

// 命名类表达式
const Person = class PersonClass {
  sayHello() {
    console.log("Hello")
  }
}

// 匿名类表达式
const Animal = class {
  speak() {
    console.log("Sound")
  }
}

class MathUtils {
  static PI = 3.14159

  static square(x) {
    return x * x
  }

  static cube(x) {
    return x * x * x
  }
}

console.log(MathUtils.PI) // 3.14159
console.log(MathUtils.square(3)) // 9
console.log(MathUtils.cube(3)) // 27

// 静态方法不会被实例继承
const math = new MathUtils()
math.square(3) // TypeError: math.square is not a function

class Config {
  static settings = {}

  static {
    // 类加载时执行
    this.settings.apiKey = "default-key"
    this.settings.timeout = 5000
    console.log("Config initialized")
  }
}

console.log(Config.settings) // { apiKey: 'default-key', timeout: 5000 }

class Person {
  // 公共字段（实例属性）
  name = "Unknown"
  age = 0

  // 私有字段
  #id = Math.random()

  // 静态公共字段
  static species = "Human"

  // 静态私有字段

  // ... 中间省略 ...

const p2 = new Person("Bob", 30)

console.log(p1.name) // 'Alice'
console.log(p1.age) // 25
console.log(Person.species) // 'Human'
console.log(Person.getCount()) // 2

┌────────────────────────────────────────────────┐
│          字段初始化执行顺序                      │
├────────────────────────────────────────────────┤
│                                                │
│  1. 创建新对象                                  │
│     ↓                                          │
│  2. 初始化父类字段（如果有继承）                  │
│     ↓                                          │
│  3. 初始化当前类的字段                          │
│     ↓                                          │
│  4. 执行 constructor 构造函数                   │
│                                                │
└────────────────────────────────────────────────┘

const methodName = "sayHello"
const fieldName = "age"

class Person {
  // 计算属性名
  [fieldName] = 25;

  // 计算方法名
  [methodName]() {
    return "Hello!"
  }

  // 使用 Symbol 作为方法名
  [Symbol.iterator]() {
    let index = 0
    const data = [this[fieldName]]
    return {
      next: () => ({
        value: data[index++],
        done: index > data.length
      })
    }
  }
}

const person = new Person()
console.log(person.age) // 25
console.log(person.sayHello()) // 'Hello!'
console.log([...person]) // [25]

class Animal {
  constructor(name) {
    this.name = name
  }

  speak() {
    console.log(`${this.name} makes a sound`)
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name) // 调用父类构造函数
    this.breed = breed
  }

  speak() {
    console.log(`${this.name} barks`)
  }

  fetch() {
    console.log(`${this.name} fetches the ball`)
  }
}

const dog = new Dog("Buddy", "Golden Retriever")
dog.speak() // "Buddy barks"
dog.fetch() // "Buddy fetches the ball"

class Parent {
  constructor(value) {
    this.value = value
  }

  method() {
    console.log("Parent method")
  }
}

class Child extends Parent {
  constructor(value, extra) {
    super(value) // 调用父类构造函数
    this.extra = extra
  }

  method() {
    super.method() // 调用父类方法
    console.log("Child method")
  }
}

const child = new Child(1, 2)
child.method()
// "Parent method"
// "Child method"

class Shape {
  constructor(color) {
    this.color = color
  }

  getArea() {
    return 0
  }

  describe() {
    return `A ${this.color} shape with area ${this.getArea()}`
  }

  // ... 中间省略 ...


const rect = new Rectangle("red", 4, 5)
const circle = new Circle("blue", 3)

console.log(rect.describe()) // "A red shape with area 20"
console.log(circle.describe()) // "A blue shape with area 28.27..."

// 继承 Array
class PowerArray extends Array {
  isEmpty() {
    return this.length === 0
  }

  first() {
    return this[0]
  }

  last() {
    return this[this.length - 1]

  // ... 中间省略 ...

const map = new ExtendedMap([
  ["a", 1],
  ["b", 2],
  ["c", 3]
])
console.log(map.getOrDefault("d", 0)) // 0

// Mixin 定义
const Serializable = {
  serialize() {
    return JSON.stringify(this);
  },

  static deserialize(json) {
    const data = JSON.parse(json);
    return new this(data);
  }
};


  // ... 中间省略 ...

const user1 = new User('Alice', 'alice@example.com');
const user2 = new User('Alice', 'alice@example.com');

user1.log();                          // "[User] User(Alice, alice@example.com)"
console.log(user1.equals(user2));    // true
console.log(user1.serialize());       // '{"name":"Alice","email":"alice@example.com"}'

┌────────────────────────────────────────────────┐
│            Mixin 使用原则                        │
├────────────────────────────────────────────────┤
│                                                │
│  1. 单一职责：每个 Mixin 只提供一类功能            │
│     ✓ Serializable - 序列化相关                 │
│     ✓ Loggable - 日志相关                       │
│                                                │
│  2. 无状态：Mixin 不应维护实例状态                 │
│     ✗ 避免在 Mixin 中定义数据属性                │
│     ✓ 只定义方法                                │
│                                                │
│  3. 命名约定：Mixin 名称以 -able 或 -ing 结尾     │
│     ✓ Comparable, Serializable                 │
│                                                │
│  4. 避免冲突：注意 Mixin 方法名冲突                │
│     后应用的 Mixin 会覆盖前面的同名方法            │
│                                                │
└────────────────────────────────────────────────┘

class BankAccount {
  // 私有字段
  #balance = 0
  #pin

  constructor(initialBalance, pin) {
    this.#balance = initialBalance
    this.#pin = pin
  }

  // 私有方法
  #validatePin(pin) {

  // ... 中间省略 ...

account.withdraw(200, "1234") // "Withdrew 200, balance: 1300"
account.withdraw(200, "wrong") // "Invalid PIN"

// 无法从外部访问私有字段
console.log(account.balance) // 1300（通过 getter）
console.log(account.#balance) // SyntaxError: Private field

class Counter {
  static #count = 0

  static increment() {
    this.#count++
    console.log(`Count: ${this.#count}`)
  }

  static getCount() {
    return this.#count
  }
}

Counter.increment() // Count: 1
Counter.increment() // Count: 2
console.log(Counter.getCount()) // 2
console.log(Counter.#count) // SyntaxError

class Example {
  #privateField = "secret"
  publicField = "public"

  getPrivate() {
    return this.#privateField
  }
}

const ex = new Example()

// 特点 1: 完全私有

  // ... 中间省略 ...

    return this.getSecret() // ✓ 通过公共方法访问
  }
}

const child = new Child()
console.log(child.showSecret()) // 'parent secret'

class Example {
  #private = "secret"

  static hasPrivate(obj) {
    // 使用 try-catch 检测私有字段
    try {
      obj.#private
      return true
    } catch {
      return false
    }
  }
}

const ex = new Example()
console.log(Example.hasPrivate(ex)) // true
console.log(Example.hasPrivate({})) // false

// 使用 in 操作符检查（ES2022+）
console.log(#private in ex) // true

class Person {
  constructor(name) {
    this.name = name
  }

  sayHello() {
    console.log(`Hello, I'm ${this.name}`)
  }
}

// 等价于
function Person(name) {
  this.name = name
}

Person.prototype.sayHello = function () {
  console.log(`Hello, I'm ${this.name}`)
}

class Animal {}

class Dog extends Animal {}

console.log(typeof Dog) // 'function'
console.log(Dog.prototype.constructor === Dog) // true
console.log(Object.getPrototypeOf(Dog) === Animal) // true
console.log(Dog.prototype.__proto__ === Animal.prototype) // true

// ES5 构造函数
function PersonES5(name, age) {
  this.name = name
  this.age = age
}

// 方法需要手动添加到原型
PersonES5.prototype.sayHello = function () {
  console.log(`Hello, I'm ${this.name}`)
}

// 静态方法

  // ... 中间省略 ...

class StudentES6 extends PersonES6 {
  constructor(name, age, grade) {
    super(name, age)
    this.grade = grade
  }
}

┌────────────────────────────────────────────────┐
│       ES6 类 ⇄ ES5 构造函数 对应关系             │
├────────────────────────────────────────────────┤
│                                                │
│  class Person {                                │
│    constructor() { }  ────→  构造函数本身        │
│                                                │
│    method() { }       ────→  Person.prototype  │
│                                                │
│    static method() { } ───→  Person.method     │
│                                                │
│    get prop() { }     ────→  Object.define-    │
│    set prop(v) { }              Property()     │
│                                                │
│    #private           ────→  WeakMap 实现      │
│                                                │
│  }                                             │
│                                                │
│  class Child extends Parent {                  │
│    super()            ────→  Parent.call()     │
│  }                                             │
│                                                │
│  Child extends Parent ───→  Object.setProto-   │
│                               typeOf(Child,    │
│                                       Parent)  │
│                                                │
└────────────────────────────────────────────────┘

class Person {
  constructor(name) {
    if (new.target === Person) {
      this.name = name
    } else {
      throw new Error("Must be called with new")
    }
  }
}

const p1 = new Person("Alice") // OK
const p2 = Person("Bob") // Error

  // ... 中间省略 ...

    this.radius = radius
  }
}

const circle = new Circle(5) // OK
const shape = new Shape() // Error

class Calculator {
  constructor(value = 0) {
    this.value = value
  }

  add(n) {
    this.value += n
    return this
  }

  subtract(n) {
    this.value -= n

  // ... 中间省略 ...

  }
}

const result = new Calculator(10).add(5).multiply(2).subtract(10).divide(2).getResult()

console.log(result) // 10

class Singleton {
  static #instance

  constructor() {
    if (Singleton.#instance) {
      return Singleton.#instance
    }
    Singleton.#instance = this
  }

  static getInstance() {
    if (!Singleton.#instance) {
      Singleton.#instance = new Singleton()
    }
    return Singleton.#instance
  }
}

const a = new Singleton()
const b = new Singleton()
console.log(a === b) // true

class EventEmitter {
  #events = {}

  on(event, callback) {
    if (!this.#events[event]) {
      this.#events[event] = []
    }
    this.#events[event].push(callback)
    return this
  }

  off(event, callback) {

  // ... 中间省略 ...

}

const emitter = new EventEmitter()

emitter.on("message", (msg) => console.log(`Received: ${msg}`))
emitter.emit("message", "Hello") // "Received: Hello"

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  increment = () => {
    this.setState((prev) => ({ count: prev.count + 1 }))
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>+</button>
      </div>
    )
  }
}

class QueryBuilder {
  #table = ""
  #fields = []
  #conditions = []
  #orderBy = ""
  #limit = null

  select(...fields) {
    this.#fields = fields
    return this
  }


  // ... 中间省略 ...

  .orderBy("created_at")
  .limit(10)
  .build()

console.log(query)
// SELECT id, name, email FROM users WHERE age > 18 AND status = "active" ORDER BY created_at LIMIT 10

// 抽象产品类
class Vehicle {
  constructor(type) {
    this.type = type
  }

  start() {
    throw new Error("start() must be implemented")
  }
}

// 具体产品类

  // ... 中间省略 ...

const motorcycle = VehicleFactory.create("motorcycle")
const truck = VehicleFactory.create("truck")

console.log(car.start()) // Car engine started: Vroom!
console.log(motorcycle.start()) // Motorcycle engine started: Vroom vroom!
console.log(truck.start()) // Truck engine started: Rumble rumble!

class Subject {
  #observers = new Set()

  subscribe(observer) {
    this.#observers.add(observer)
    return () => this.#observers.delete(observer)
  }

  notify(data) {
    this.#observers.forEach((observer) => observer(data))
  }


  // ... 中间省略 ...

// State changed: { user: 'Alice' }

store.setState({ age: 25 })
// State changed: { user: 'Alice', age: 25 }

unsubscribe()

class DatabaseConnection {
  #connected = false

  constructor(url) {
    this.url = url
    this.#connect()
  }

  #connect() {
    console.log(`连接数据库: ${this.url}`)
    this.#connected = true
  }

  // ... 中间省略 ...

async function readFile() {
  await using reader = new AsyncFileReader("data.json")
  await reader.open()
  const content = await reader.read()
  return content
} // 离开作用域时自动调用 [Symbol.asyncDispose]()

// ❌ 错误
const p = new Person() // ReferenceError

class Person {}

class Person {}

// ❌ 错误
Person() // TypeError: Class constructor Person cannot be invoked without 'new'

// ✅ 正确
new Person()

class Parent {
  constructor(value) {
    this.value = value
  }
}

class Child extends Parent {
  constructor(value) {
    // ❌ 错误：必须先调用 super()
    this.extra = value
    super(value)
  }

  // ✅ 正确
  // constructor(value) {
  //   super(value);
  //   this.extra = value;
  // }
}

// 类声明 - 不会提升
class Person1 {}

// 类表达式 - 不会提升
const Person2 = class {}

// 命名类表达式 - 内部名称只在类内部可用
const Person3 = class PersonClass {
  static whoAmI() {
    return PersonClass.name // 'PersonClass'
  }
}

console.log(Person3.whoAmI()) // 'PersonClass'
console.log(typeof PersonClass) // 'undefined' (外部不可见)

class Button {
  constructor(label) {
    this.label = label
  }

  // 普通方法 - 定义在原型上，this 动态绑定
  handleClick() {
    console.log(this.label)
  }

  // 箭头函数 - 定义在实例上，this 永久绑定
  handlePress = () => {
    console.log(this.label)
  }
}

const btn = new Button("Click Me")

const { handleClick, handlePress } = btn

handleClick() // undefined (this 丢失)
handlePress() // 'Click Me' (this 正确绑定)

// 箭头函数方法占用更多内存（每个实例一份）
console.log(Object.keys(btn)) // ['label', 'handlePress']

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  clone() {
    return new this.constructor(this.name, this.age)
  }
}

class Employee extends Person {
  constructor(name, age, position) {
    super(name, age)
    this.position = position
  }

  clone() {
    return new this.constructor(this.name, this.age, this.position)
  }
}

const emp1 = new Employee("Alice", 30, "Developer")
const emp2 = emp1.clone()

console.log(emp2) // Employee { name: 'Alice', age: 30, position: 'Developer' }
console.log(emp1 === emp2) // false

// 方法 1: 使用 new.target
class AbstractClass {
  constructor() {
    if (new.target === AbstractClass) {
      throw new Error("AbstractClass cannot be instantiated")
    }
  }
}

// 方法 2: 私有构造函数
class Utility {
  static #initialized = false

  // ... 中间省略 ...

  }

  method() {
    throw new Error("method() must be implemented")
  }
}

// 使用 Mixin 组合
const CanFly = (Base) =>
  class extends Base {
    fly() {
      console.log("Flying...")
    }
  }

const CanSwim = (Base) =>
  class extends Base {
    swim() {
      console.log("Swimming...")
    }
  }

const CanWalk = (Base) =>
  class extends Base {
    walk() {
      console.log("Walking...")
    }
  }

class Animal {}

class Duck extends CanFly(CanSwim(CanWalk(Animal))) {}

const duck = new Duck()
duck.walk() // Walking...
duck.swim() // Swimming...
duck.fly() // Flying...

// ❌ 不推荐：箭头函数方法在构造函数中创建（每个实例一份）
class Bad {
  constructor() {
    this.method = () => {
      // 每个实例都会创建新的函数对象
    }
  }
}

// ✅ 推荐：普通方法定义在原型上（所有实例共享）
class Good {
  method() {
    // 所有实例共享同一个函数
  }
}

// 性能对比
const createBad = () => new Bad()
const createGood = () => new Good()

console.time("Bad")
for (let i = 0; i < 100000; i++) createBad()
console.timeEnd("Bad") // ~50ms

console.time("Good")
for (let i = 0; i < 100000; i++) createGood()
console.timeEnd("Good") // ~30ms

// 私有字段使用 WeakMap 实现，性能略低于普通字段
class WithPrivate {
  #secret = "data"
}

class WithPublic {
  secret = "data"
}

// 普通字段访问更快
// 但私有字段提供了真正的封装性，性能差异通常可以忽略

// 继承层级过深会影响性能
class A {
  method() {}
}
class B extends A {
  method() {
    super.method()
  }
}
class C extends B {
  method() {
    super.method()
  }
}
class D extends C {
  method() {
    super.method()
  }
}
class E extends D {
  method() {
    super.method()
  }
}

// 保持继承层级在 2-3 层以内最佳
// 超过 3 层应考虑重构

// ✅ 单一职责：一个类只做一件事
class User {
  constructor(name, email) {
    this.name = name
    this.email = email
  }
}

class UserRepository {
  save(user) {
    /* ... */
  }

  // ... 中间省略 ...


class PayPalProcessor extends PaymentProcessor {
  process(amount) {
    // PayPal 实现
  }
}

// ✅ 类名：PascalCase
class ShoppingCart {}
class UserController {}

// ✅ 方法名：camelCase
class Example {
  calculateTotal() {}
  getUserInfo() {}
}

// ✅ 私有字段：#camelCase
class Example {

  // ... 中间省略 ...

  }

  get isAdult() {
    return this.#age >= 18
  }
}

// ✅ 在构造函数中验证参数
class User {
  constructor(name, email) {
    if (!name || typeof name !== "string") {
      throw new TypeError("name must be a non-empty string")
    }
    if (!email || !email.includes("@")) {
      throw new TypeError("email must be a valid email address")
    }

    this.name = name
    this.email = email
  }
}

// ✅ 使用自定义错误类
class ValidationError extends Error {
  constructor(message, field) {
    super(message)
    this.name = "ValidationError"
    this.field = field
  }
}

/**
 * 表示银行账户的类
 * @class BankAccount
 * @example
 * const account = new BankAccount(1000, '1234');
 * account.deposit(500);
 * console.log(account.balance); // 1500
 */
class BankAccount {
  /**
   * 初始余额
   * @type {number}

  // ... 中间省略 ...

      throw new Error("Amount cannot be negative")
    }
    this.#balance += amount
    return this.#balance
  }
}

1. 获取当前方法的 [[HomeObject]]
2. parentProto = [[HomeObject]].[[Prototype]]
3. 创建 SuperReference = { baseValue: parentProto, referencedName: propertyKey, thisValue }
4. 当 super.xxx() 被调用时，xxx 方法中的 this = thisValue（当前实例）

class Parent {
  method() { return 'Parent method' }
}

class Child extends Parent {
  method() {
    return super.method() + ' + Child method'
    // super 的 HomeObject = Child.prototype
    // super.method() 在 Child.prototype.[[Prototype]] = Parent.prototype 上查找
  }
}

const child = new Child()
child.method()  // 'Parent method + Child method'

// 即使将方法提取出来调用，super 仍然有效
const extractedMethod = child.method
extractedMethod()  // 'Parent method + Child method' — HomeObject 不变！

class Base {
  algorithm() {
    return this.step1() + this.step2()  // this 是子类实例
  }
  step1() { return 1 }
  step2() { return 2 }
}

class Extended extends Base {
  step1() { return 10 }  // 重写 step1
  algorithm() {
    return super.algorithm()  // 调用父类的 algorithm
    // 但 algorithm 中的 this.step1() 调用的是子类的 step1！
    // 结果：10 + 2 = 12，而非 1 + 2 = 3
  }
}

const ext = new Extended()
ext.algorithm()  // 12 — 父类方法 + 子类状态 = 开放递归

// 方式一：super.method()
class Child extends Parent {
  method() {
    super.method()
    // HomeObject = Child.prototype
    // 查找：Child.prototype.[[Prototype]] = Parent.prototype
    // this = 当前实例
  }
}

// 方式二：Parent.prototype.method.call(this)
class Child extends Parent {
  method() {
    Parent.prototype.method.call(this)
    // 直接硬编码了 Parent.prototype
    // 如果继承层级改变，需要手动修改
  }
}

const parent = {
  greet() { return 'Hello from parent' }
}

const child = {
  greet() { return super.greet() + ' and child' }
  // [[HomeObject]] = child
  // super = child.[[Prototype]]
}

Object.setPrototypeOf(child, parent)
child.greet()  // 'Hello from parent and child'

class Parent {
  method() { return 'Parent' }
}

class Child extends Parent {
  method() {
    const arrow = () => super.method()  // super 继承自 method()
    return arrow() + ' + Child'
  }
}

new Child().method()  // 'Parent + Child'

class MyClass extends Object {
  constructor() {
    // constructor 的 [[HomeObject]] = MyClass.prototype
    // super.xxx → MyClass.prototype.__proto__ → Object.prototype（查找原型属性）
    // super() → 从调用栈查找当前函数 MyClass → Object（查找构造器）
    // 二者机制不同！
    super()       // SuperCall：通过调用栈查找
    super.keys()  // SuperProperty：通过 HomeObject 查找
  }
}

// === 1. super 在类方法中的行为 ===

class Animal {
  constructor(name) {
    this.name = name
  }
  
  speak() {
    return `${this.name} makes a sound`
  }
  
  describe() {

  // ... 中间省略 ...

  }
}

new DerivedClass()
// constructor: new.target.name = DerivedClass
// super.instanceMethod(): 'instance'