JavaScript 继承：从原型链到 ES6 类的全方位解析

function Animal(name) {
  this.name = name;
}
// Animal.prototype 是所有 Animal 实例的原型
const cat = new Animal('Mimi');
console.log(Object.getPrototypeOf(cat) === Animal.prototype); // true

// 原型对象：Animal.prototype
Animal.prototype.speak = function() {
  console.log(`${this.name} 发出声音`);
};
 
const cat = new Animal('Mimi');
cat.speak(); // 输出：Mimi 发出声音
// 查找过程：cat → Animal.prototype → Object.prototype → null

console.log(Object.hasOwn(cat, 'name')); // true（自身属性）
console.log(Object.hasOwn(cat, 'speak')); // false（原型属性）
console.log('speak' in cat); // true（原型链中存在）

// 父类：Animal
function Animal(name) {
  this.name = name; // 自身属性：名字
  this.type = '动物'; // 自身属性：类型
}
// 父类原型方法
Animal.prototype.speak = function() {
  console.log(`${this.name} 发出声音`);
};
 
// 子类：Dog
function Dog(name, breed) {
  // 1. 构造函数窃取：继承父类的自身属性
  Animal.call(this, name); 
  this.breed = breed; // 子类自身属性：品种
}
 
// 2. 继承父类原型方法
Dog.prototype = Object.create(Animal.prototype);
// 3. 修复constructor指向（关键！）
Dog.prototype.constructor = Dog;
 
// 子类重写父类方法
Dog.prototype.speak = function() {
  console.log(`${this.name}（${this.breed}）汪汪叫`);
};
 
// 使用示例
const dog = new Dog('Buddy', '金毛寻回犬');
console.log(dog.name); // Buddy（继承自Animal）
console.log(dog.breed); // 金毛寻回犬（Dog自身属性）
dog.speak(); // 输出：Buddy（金毛寻回犬）汪汪叫

// 父类原型：animalProto
const animalProto = {
  speak() {
    console.log(`${this.name} 发出声音`);
  }
};
 
// 子类原型：dogProto（继承自animalProto）
const dogProto = Object.create(animalProto);
// 子类原型方法
dogProto.speak = function() {
  console.log(`${this.name}（${this.breed}）汪汪叫`);
};
 
// 工厂函数：创建Dog实例
function createDog(name, breed) {
  const dog = Object.create(dogProto); // 绑定原型
  dog.name = name; // 初始化自身属性
  dog.breed = breed;
  return dog;
}
 
// 使用示例
const dog = createDog('Buddy', '金毛寻回犬');
dog.speak(); // 输出：Buddy（金毛寻回犬）汪汪叫
console.log(Object.getPrototypeOf(dog) === dogProto); // true

// 父类：Animal
class Animal {
  constructor(name) {
    this.name = name; // 自身属性
    this.type = '动物';
  }
 
  // 原型方法（等价于Animal.prototype.speak）
  speak() {
    console.log(`${this.name} 发出声音`);
  }
}
 
// 子类：Dog（继承自Animal）
class Dog extends Animal {
  constructor(name, breed) {
    // 必须先调用super()，否则无法访问this
    super(name); // 调用父类构造函数，继承name和type
    this.breed = breed; // 子类自身属性
  }
 
  // 重写父类方法
  speak() {
    console.log(`${this.name}（${this.breed}）汪汪叫`);
  }
}
 
// 使用示例
const dog = new Dog('Buddy', '金毛寻回犬');
dog.speak(); // 输出：Buddy（金毛寻回犬）汪汪叫
console.log(dog instanceof Animal); // true（原型链中存在Animal）

function Dog(name, breed) {
  // 未窃取父类构造函数
  this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
 
const dog = new Dog('Buddy', '金毛寻回犬');
console.log(dog.name); // undefined（未继承父类的name属性）

class Dog extends Animal {
  speak() {
    // 先调用父类的speak方法
    super.speak(); 
    // 再执行子类逻辑
    console.log(`它是一只${this.breed}，汪汪叫`);
  }
}
 
const dog = new Dog('Buddy', '金毛寻回犬');
dog.speak(); 
// 输出：
// Buddy 发出声音
// 它是一只金毛寻回犬，汪汪叫

// 一级父类：Animal
class Animal { /* ... */ }
 
// 二级父类：Mammal（继承自Animal）
class Mammal extends Animal {
  constructor(name, hasFur) {
    super(name);
    this.hasFur = hasFur; // 哺乳动物特征：有毛
  }
  nurse() {
    console.log(`${this.name} 哺乳幼崽`);
  }
}
 
// 子类：Dog（继承自Mammal）
class Dog extends Mammal {
  constructor(name, breed) {
    super(name, true); // 哺乳动物有毛
    this.breed = breed;
  }
}
 
const dog = new Dog('Buddy', '金毛寻回犬');
dog.nurse(); // 输出：Buddy 哺乳幼崽
// 原型链：dog → Dog.prototype → Mammal.prototype → Animal.prototype → Object.prototype → null

Dog.prototype = Object.create(Animal.prototype);
console.log(Dog.prototype.constructor); // Animal（错误，应指向Dog）
const dog = new Dog('Buddy', '金毛寻回犬');
console.log(dog.constructor === Dog); // false（错误）

Dog.prototype = Object.create(Animal.prototype);
// 手动设置constructor指向
Dog.prototype.constructor = Dog;
console.log(dog.constructor === Dog); // true（正确）

const dog = new Dog('Buddy', '金毛寻回犬');
// 后期修改父类原型
Animal.prototype.walk = function() {
  console.log(`${this.name} 走路`);
};
dog.walk(); // 输出：Buddy 走路（已创建的实例也能访问新方法）

Dog.prototype = null; // 断裂原型链
const dog = new Dog('Buddy', '金毛寻回犬');
dog.speak(); // 报错：dog.speak is not a function

const dog = new Dog('Buddy', '金毛寻回犬');
dog.__proto__ = Cat.prototype; // 不推荐

const dog = new Dog('Buddy', '金毛寻回犬');
Object.setPrototypeOf(dog, Cat.prototype); // 推荐（但性能低，尽量避免）

// 独立行为模块：说话
const SpeakBehavior = {
  speak(sound) {
    console.log(`${this.name} ${sound}`);
  }
};
 
// 独立行为模块：走路
const WalkBehavior = {
  walk() {
    console.log(`${this.name} 走路`);
  }
};
 
// 类：Dog（组合行为模块）
class Dog {
  constructor(name, breed) {
    this.name = name;
    this.breed = breed;
    // 混入行为模块（将方法添加到实例）
    Object.assign(this, SpeakBehavior, WalkBehavior);
  }
}
 
const dog = new Dog('Buddy', '金毛寻回犬');
dog.speak('汪汪叫'); // 输出：Buddy 汪汪叫
dog.walk(); // 输出：Buddy 走路

// 基础组件：BaseComponent
class BaseComponent {
  constructor(el) {
    this.el = el; // 组件根元素
    this.state = {}; // 组件状态
  }
 
  // 通用方法：更新状态并重新渲染
  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.render();
  }
 
  // 抽象方法：子类必须实现
  render() {
    throw new Error('子类必须实现render方法');
  }
}
 
// 子类组件：Button（继承自BaseComponent）
class Button extends BaseComponent {
  constructor(el, text) {
    super(el);
    this.text = text;
    this.render(); // 初始化渲染
  }
 
  // 实现render方法
  render() {
    this.el.innerHTML = `<button>${this.text}</button>`;
    this.el.addEventListener('click', () => {
      this.setState({ clicked: true });
      console.log('按钮被点击');
    });
  }
}
 
// 使用示例
const buttonEl = document.getElementById('btn');
const button = new Button(buttonEl, '点击我');

// 移动行为
const MoveBehavior = {
  move(direction) {
    console.log(`${this.name} 向${direction}移动`);
  }
};
 
// 攻击行为
const AttackBehavior = {
  attack(target) {
    console.log(`${this.name} 攻击${target.name}`);
  }
};
 
// 角色：战士（组合移动+攻击）
class Warrior {
  constructor(name) {
    this.name = name;
    Object.assign(this, MoveBehavior, AttackBehavior);
  }
}
 
// 角色：法师（组合移动+法术攻击）
class Mage {
  constructor(name) {
    this.name = name;
    Object.assign(this, MoveBehavior);
    this.castSpell = function(target) {
      console.log(`${this.name} 对${target.name}释放法术`);
    };
  }
}
 
// 使用示例
const warrior = new Warrior('Arthur');
warrior.move('前'); // 输出：Arthur 向前移动
warrior.attack({ name: 'Goblin' }); // 输出：Arthur 攻击Goblin
 
const mage = new Mage('Merlin');
mage.move('后'); // 输出：Merlin 向后移动
mage.castSpell({ name: 'Dragon' }); // 输出：Merlin 对Dragon释放法术