js super作用
在 JavaScript 中,super
关键字有两个主要用途:
-
在子类的构造函数中调用父类的构造函数:
- 使用
super()
来调用父类的构造函数,并继承父类的属性。
- 使用
-
在子类的方法中调用父类的方法:
- 使用
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
详细解释
-
在构造函数中调用父类的构造函数:
在子类的构造函数中,必须调用
super()
,以便调用父类的构造函数。这是因为子类没有自己的this
对象,而是从父类继承的this
对象。class Parent { constructor(name) { this.name = name; } } class Child extends Parent { constructor(name, age) { super(name); // 调用父类的构造函数 this.age = age; } }
-
在子类的方法中调用父类的方法:
在子类的方法中,可以使用
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();
详细解释
-
构造函数和实例属性:
- 在类中,使用
constructor
方法来定义构造函数,并使用super(name)
调用父类构造函数。 - 在函数构造函数中,使用
Parent.call(this, name)
调用父类构造函数。
- 在类中,使用
-
原型方法:
- 在类中,定义方法不使用
static
关键字的方法,这些方法添加到类的原型对象上。 - 在函数构造函数中,使用
Parent.prototype.methodName
来定义原型方法。
- 在类中,定义方法不使用
-
静态方法:
- 在类中,使用
static
关键字定义静态方法。 - 在函数构造函数中,直接在构造函数对象上添加静态方法。
- 在类中,使用
-
调用父类的方法和静态方法:
- 在类中,使用
super.methodName()
调用父类的方法。 - 在函数构造函数中,使用
Parent.prototype.methodName.call(this)
调用父类的方法,以及使用Parent.staticMethod.call(this)
调用父类的静态方法。
- 在类中,使用
通过这种方式,所有使用 class
和 super
的功能在使用函数构造函数和原型链的代码中得到了保留和实现。
前端工程师、程序员