js class super的作用

js super作用

在 JavaScript 中，super 关键字有两个主要用途：

1. 在子类的构造函数中调用父类的构造函数：

   • 使用 super() 来调用父类的构造函数，并继承父类的属性。

2. 在子类的方法中调用父类的方法：

   • 使用 super.methodName() 来调用父类的方法。

示例解释

使用类

class Parent {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);  // 调用父类的构造函数
    this.age = age;
  }

  greet() {
    super.greet();  // 调用父类的方法
    console.log(`I am ${this.age} years old`);
  }
}

const childInstance = new Child('Alice', 30);
childInstance.greet();
// 输出:
// Hello, my name is Alice
// I am 30 years old

详细解释

1. 在构造函数中调用父类的构造函数：

   在子类的构造函数中，必须调用 super()，以便调用父类的构造函数。这是因为子类没有自己的 this 对象，而是从父类继承的 this 对象。

   class Parent {
     constructor(name) {
       this.name = name;
     }
   }
   
   class Child extends Parent {
     constructor(name, age) {
       super(name);  // 调用父类的构造函数
       this.age = age;
     }
   }
   

2. 在子类的方法中调用父类的方法：

   在子类的方法中，可以使用 super.methodName() 来调用父类的方法。这允许子类在扩展或重写父类方法时仍然能够调用父类的方法。

   class Parent {
     greet() {
       console.log(`Hello, my name is ${this.name}`);
     }
   }
   
   class Child extends Parent {
     constructor(name, age) {
       super(name);
       this.age = age;
     }
   
     greet() {
       super.greet();  // 调用父类的方法
       console.log(`I am ${this.age} years old`);
     }
   }
   

使用静态方法

super 也可以用在静态方法中，调用父类的静态方法。

class Parent {
  static greet() {
    console.log('Hello from Parent');
  }
}

class Child extends Parent {
  static greet() {
    super.greet();  // 调用父类的静态方法
    console.log('Hello from Child');
  }
}

Child.greet();
// 输出:
// Hello from Parent
// Hello from Child

说明

• super() 只能在构造函数中使用，必须在使用 this 之前调用。
• super.methodName() 可以在子类的任何方法中使用，用于调用父类的方法。
• 在静态方法中，super.methodName() 调用父类的静态方法。

通过这种方式，super 关键字在 JavaScript 中提供了一种在子类中访问和调用父类构造函数和方法的机制，使得继承和代码复用更加简单和直观。

js class super编译成es5语法等同于

为了将 class 和 super 关键字转换为等价的函数和原型语法，我们需要详细地理解它们的行为，并确保在转换过程中保留其功能。

以下是一个完整的例子，展示了如何将使用 class 和 super 的代码转换为等效的使用函数构造函数和原型链的代码。

使用 class 和 super 的代码

class Parent {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }

  static staticMethod() {
    console.log('This is a static method in Parent class.');
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);  // 调用父类的构造函数
    this.age = age;
  }

  greet() {
    super.greet();  // 调用父类的方法
    console.log(`I am ${this.age} years old`);
  }

  static staticMethod() {
    super.staticMethod();  // 调用父类的静态方法
    console.log('This is a static method in Child class.');
  }
}

const childInstance = new Child('Alice', 30);
childInstance.greet();
Child.staticMethod();

编译为使用函数和原型链的代码

function Parent(name) {
  this.name = name;
}

Parent.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

Parent.staticMethod = function() {
  console.log('This is a static method in Parent class.');
};

function Child(name, age) {
  Parent.call(this, name);  // 调用父类的构造函数
  this.age = age;
}

// 继承 Parent 的原型方法
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

Child.prototype.greet = function() {
  Parent.prototype.greet.call(this);  // 调用父类的方法
  console.log(`I am ${this.age} years old`);
};

// 继承 Parent 的静态方法
Child.staticMethod = function() {
  Parent.staticMethod.call(this);  // 调用父类的静态方法
  console.log('This is a static method in Child class.');
};

const childInstance = new Child('Alice', 30);
childInstance.greet();
Child.staticMethod();

详细解释

1. 构造函数和实例属性：

   • 在类中，使用 constructor 方法来定义构造函数，并使用 super(name) 调用父类构造函数。
   • 在函数构造函数中，使用 Parent.call(this, name) 调用父类构造函数。

2. 原型方法：

   • 在类中，定义方法不使用 static 关键字的方法，这些方法添加到类的原型对象上。
   • 在函数构造函数中，使用 Parent.prototype.methodName 来定义原型方法。

3. 静态方法：

   • 在类中，使用 static 关键字定义静态方法。
   • 在函数构造函数中，直接在构造函数对象上添加静态方法。

4. 调用父类的方法和静态方法：

   • 在类中，使用 super.methodName() 调用父类的方法。
   • 在函数构造函数中，使用 Parent.prototype.methodName.call(this) 调用父类的方法，以及使用 Parent.staticMethod.call(this) 调用父类的静态方法。

通过这种方式，所有使用 class 和 super 的功能在使用函数构造函数和原型链的代码中得到了保留和实现。