ES6的super关键字如何调用父类方法

class Animal {
  constructor(name) {
    this.name = name;
    console.log(`Animal ${this.name} created.`);
  }
  speak() {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类Animal的constructor，传入name参数
    this.breed = breed;
    console.log(`Dog ${this.name} of breed ${this.breed} created.`);
  }
  speak() {
    const parentSound = super.speak(); // 调用父类Animal的speak方法
    return `${parentSound} Woof! I'm a ${this.breed}.`;
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
// 输出:
// Animal Buddy created.
// Dog Buddy of breed Golden Retriever created.
console.log(myDog.speak()); // 输出: Buddy makes a sound. Woof! I'm a Golden Retriever.

class Parent {
  greet() {
    return `Hello from Parent.`;
  }
  showThis() {
    return `Parent's this is: ${this.constructor.name}`;
  }
}

class Child extends Parent {
  greet() {
    // 调用父类的greet方法，并在此基础上添加内容
    return `${super.greet()} Hello from Child.`;
  }
  showChildThis() {
    // 即使调用父类方法，父类方法内部的this仍然指向Child实例
    return `Child calling parent's showThis: ${super.showThis()}`;
  }
}

const childInstance = new Child();
console.log(childInstance.greet()); // 输出: Hello from Parent. Hello from Child.
console.log(childInstance.showChildThis()); // 输出: Child calling parent's showThis: Parent's this is: Child

class BaseComponent {
  constructor(props) {
    this.props = props;
    console.log('BaseComponent initialized with props:', this.props);
  }
}

class CustomButton extends BaseComponent {
  constructor(props, label) {
    // 在这里使用this会报错，因为super()尚未被调用
    // console.log(this); // ReferenceError
    super(props); // 必须先调用父类构造函数
    this.label = label; // 现在可以安全地使用this了
    console.log('CustomButton initialized with label:', this.label);
  }

  render() {
    return `<button>${this.label} - ${this.props.theme}</button>`;
  }
}

const myButton = new CustomButton({ theme: 'dark' }, 'Click Me');
// 输出:
// BaseComponent initialized with props: { theme: 'dark' }
// CustomButton initialized with label: Click Me
console.log(myButton.render()); // <button>Click Me - dark</button>

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
  getDescription() {
    return `${this.name} costs $${this.price}.`;
  }
  // 父类方法中使用this
  getFormattedPrice() {
    return `$${this.price.toFixed(2)}`;
  }
}

class DiscountedProduct extends Product {
  constructor(name, price, discount) {
    super(name, price);
    this.discount = discount;
  }
  getDescription() {
    // 调用父类的getDescription方法，并在此基础上添加折扣信息
    const baseDescription = super.getDescription();
    const discountedPrice = this.price * (1 - this.discount); // 使用子类实例的price
    return `${baseDescription} With a ${this.discount * 100}% discount, it's now $${discountedPrice.toFixed(2)}.`;
  }
  // 演示父类方法中this指向子类实例
  getDiscountedFormattedPrice() {
    // super.getFormattedPrice() 内部的 this 依然指向 DiscountedProduct 实例
    return `Original: ${super.getFormattedPrice()}, Discounted: $${(this.price * (1 - this.discount)).toFixed(2)}`;
  }
}

const laptop = new DiscountedProduct('Laptop', 1200, 0.15);
console.log(laptop.getDescription());
// 输出: Laptop costs $1200. With a 15% discount, it's now $1020.00.
console.log(laptop.getDiscountedFormattedPrice());
// 输出: Original: $1200.00, Discounted: $1020.00 (父类方法中的this.price实际上是子类实例的price)

class Calculator {
  static add(a, b) {
    return a + b;
  }
  static multiply(a, b) {
    return a * b;
  }
  static getOperationName() {
    return `${this.name} operations`; // 这里的this指向调用者
  }
}

class AdvancedCalculator extends Calculator {
  static subtract(a, b) {
    return a - b;
  }
  static performCalculations(x, y) {
    // 调用父类的静态方法
    const sum = super.add(x, y);
    const product = super.multiply(x, y);
    const sub = this.subtract(x, y); // 调用自身的静态方法
    return `Sum: ${sum}, Product: ${product}, Subtraction: ${sub}`;
  }
  static getAdvancedOperationName() {
    // 调用父类静态方法，父类方法中的this指向AdvancedCalculator
    return `${super.getOperationName()} (Advanced)`;
  }
}

console.log(AdvancedCalculator.performCalculations(10, 5));
// 输出: Sum: 15, Product: 50, Subtraction: 5

console.log(AdvancedCalculator.getAdvancedOperationName());
// 输出: AdvancedCalculator operations (Advanced)
// (因为super.getOperationName()内部的this指向AdvancedCalculator)