当前位置:首页 > JavaScript

extends实现js

2026-01-31 12:58:50JavaScript

使用 extends 实现 JavaScript 继承

在 JavaScript 中,extends 关键字用于实现类之间的继承。通过 extends,子类可以继承父类的属性和方法,同时可以扩展或重写父类的功能。

基本语法

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

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

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

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

const child = new Child('Alice', 10);
child.greet();

关键点

  • super 关键字用于调用父类的构造函数或方法。
  • 子类的构造函数中必须先调用 super(),才能使用 this
  • 子类可以重写父类的方法,同时通过 super 保留父类的逻辑。

继承内置类

extends 也可以用于继承 JavaScript 的内置类,例如 ArrayError

class CustomArray extends Array {
  getFirstElement() {
    return this[0];
  }
}

const arr = new CustomArray(1, 2, 3);
console.log(arr.getFirstElement()); // 1

注意事项

  • 如果子类没有定义 constructor,JavaScript 会自动调用父类的 constructor
  • 静态方法也会被继承,可以通过 super 调用父类的静态方法。
class Parent {
  static staticMethod() {
    console.log('Parent static method');
  }
}

class Child extends Parent {
  static staticMethod() {
    super.staticMethod();
    console.log('Child static method');
  }
}

Child.staticMethod();

extends实现js

标签: extendsjs
分享给朋友:

相关文章

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https://…

js实现复制

js实现复制

使用document.execCommand方法 在较旧的浏览器中,可以使用document.execCommand('copy')实现复制功能。创建一个临时的textarea或input元素,将需要…

js实现选项卡

js实现选项卡

实现选项卡的基本思路 选项卡通常由一组标签和对应的内容面板组成。点击标签时,显示对应的内容面板,隐藏其他面板。实现这一效果需要结合HTML结构、CSS样式和JavaScript交互逻辑。 HTML…

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…

js防抖和节流实现

js防抖和节流实现

防抖(Debounce)的实现 防抖的核心思想是在事件被触发后,延迟执行回调函数。如果在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口大小调整等场景。 function debounc…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #349…