JavaScript 类继承详解:extends 与 super 关键字用法
作者:闭包旅人时间:2026-10-23 19:10:29浏览:496
本文详细介绍 JavaScript 中类的继承机制,重点解析 extends 关键字如何用于继承父类普通函数与构造函数,以及 super 关键字在调用父类构造方法和普通方法时的具体用法。文章强调子类构造函数中 super 必须置于 this 之前,并深入讲解继承中属性与方法查找的就近原则,通过代码示例展示子类扩展自身方法时的实现细节。
类的继承概述
类的继承
1 子承父业
使用 extends 继承父类方法
使用 extends 关键字实现继承,即让子类继承父类的普通函数(方法)。
class Father {
constructor() {
}
money() {
console.log(100);
}
}
class Son extends Father {
}
class sunzi extends Son {
}
var yxf = new Father;
var lbw = new Son;
var bb = new sunzi;
console.log(yxf.money());
console.log(lbw.money());
console.log(bb.money());
super 关键字的基本用法
super 关键字的用法
该关键字用于访问和调用对象父类上的函数。它既可以用于调用父类的构造函数,也可以用于调用父类的普通函数(方法)。
class Father1 {
constructor(x,y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
class Son1 extends Father1 {
constructor(x,y){
super(x,y);
}
}
var yxf = new Son1(1,2);
yxf.sum();
super 调用的就近原则
super 关键字调用遵循就近原则。
<script>
//super关键字调用父类普通函数
class Father {
say() {
return '我是爸爸';
}
}
class Son extends Father {
say() {
// return '我是儿子';
console.log( super.say());
}
}
var yxf = new Son();
yxf.say();//返回结果:我是儿子 就近原则
//继承中的属性或方法查找原则:就近原则
//1.继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类;
//2.继承中,如果子类里面没有,就去查找父类有没有如果有就用父类
</script>
子类扩展自身方法
子类在继承父类的基础上,可以同时扩展自己的方法。
注意:在子类构造函数中使用 super 时,必须将其放在 this 关键字之前。这意味着必须先调用父类的构造方法,然后再执行子类的构造逻辑,父亲的角色永远优先。
<script>
class Father {
constructor(x,y){
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
// 子类继承父类加法 同时扩展减法
class Son extends Father {
constructor(x,y) {
//利用super调用父类的构造函数
//super 必须在子类this之前调用
super(x,y);
this.x = x;
this.y = y;
}
sub() {
console.log(this.x - this.y);
}
}
var son = new Son(1,2);
son.sum();
son.sub();
</script>
<script>
//super关键字调用父类普通函数
class Father {
say() {
return '我是爸爸';
}
}
class Son extends Father {
say() {
// return '我是儿子';
console.log( super.say());
}
}
var yxf = new Son();
yxf.say();//返回结果:我是儿子 就近原则
//继承中的属性或方法查找原则:就近原则
//1.继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类;
//2.继承中,如果子类里面没有,就去查找父类有没有如果有就用父类
</script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
作者最新文章
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38
