当前位置:首页 > JavaScript

extends实现js

2026-04-05 05:07:55JavaScript

使用 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); // 调用父类的构造函数
    this.age = age;
  }

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

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

关键点说明

  • super 关键字:在子类的构造函数中必须调用 super(),否则会报错。super 用于调用父类的构造函数或方法。
  • 方法重写:子类可以重写父类的方法,同时通过 super.methodName() 调用父类的原始方法。
  • 继承链extends 支持多级继承,子类可以进一步被其他类继承。

继承内置对象

extends 也可以用于继承 JavaScript 内置对象(如 ArrayError 等)。

extends实现js

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

  getLast() {
    return this[this.length - 1];
  }
}

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

注意事项

  • 子类的 constructor 必须调用 super(),否则会抛出错误。
  • 静态方法也会被继承,可以通过 super 调用父类的静态方法。
  • extends 右侧可以是任何具有 prototype 属性的表达式(如函数、类等)。

标签: extendsjs
分享给朋友:

相关文章

css3结合js制作

css3结合js制作

CSS3 结合 JavaScript 制作动态效果 CSS3 和 JavaScript 结合可以实现丰富的动态效果,包括动画、交互和响应式设计。以下是几种常见的实现方式: CSS3 动画与 Java…

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

js实现延迟

js实现延迟

实现延迟的方法 在JavaScript中,实现延迟操作有多种方式,以下是几种常见的方法: 使用setTimeout函数 setTimeout是JavaScript中最常用的延迟执行方法。它接受一个回…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…

js实现视口

js实现视口

js实现视口检测的方法 使用JavaScript检测元素是否进入视口(viewport)可以通过Intersection Observer API或手动计算元素位置实现。以下是两种常见方法: Int…