js学习笔记之class类、super和extends关键词

JS学习笔记之Class类、super和extends关键词攻略

介绍

在ES6之前,JavaScript是一门纯粹的面向对象语言,而没有类的概念,而是采用基于原型的继承方式。在ES6之后,JavaScript引入了Class类、super和extends关键词,使得JavaScript的面向对象变得更加完善。Class语法让JavaScript的对象声明,操作和继承更加直观。

  • Class:定义一个包含特定属性和方法的对象模板,通过new实例化或者extends继承使用
  • super:super关键字用于调用父类的构造函数,或者调用父类中的方法和属性
  • extends:用来继承某个类,可以在一个子类中使用 extends关键字后接父类名,然后在构造函数中调用super方法来调用父类的构造函数

Class类

创建一个类

在JavaScript中创建一个类很简单,只需要使用class关键字就可以定义一个类,然后使用new关键字进行实例化

class Person{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  greeting(){
    console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
  }
}
let person1 = new Person('John', 30);
person1.greeting(); //输出:Hello, my name is John, I'm 30 years old.

类的继承

继承是面向对象编程中的一个重要概念,ES6提供了Class关键字来实现类的继承,也就是子类可以继承父类的属性和方法

class Student extends Person{
  constructor(name, age, major){
    super(name, age);
    this.major = major;
  }
  introduce(){
    console.log(`My major is ${this.major}.`);
  }
}
let student1 = new Student('Lucy', 20, 'Math');
student1.greeting(); //输出:Hello, my name is Lucy, I'm 20 years old.
student1.introduce(); //输出:My major is Math.

super

super关键字是一种引用父类方法的方式,它可以用来调用父类方法或者构造函数。在子类的构造函数中,如果要使用父类的构造函数,就需要使用super方法。 当我们需要继承父类的方法时,也可以通过super关键字调用父类的方法,并且可以带上相关的参数

class Animal{
  constructor(name){
    this.name = name;
  }
  run(){
    console.log(`${this.name} is running.`);
  }
}
class Dog extends Animal{
  constructor(name, breed){
    super(name);
    this.breed = breed;
  }
  run(){
    super.run();
    console.log(`A ${this.breed} dog is running.`);
  }
}
let dog1 = new Dog('Mike', 'Husky');
dog1.run(); //输出:Mike is running. A Husky dog is running.

在子类的run()方法中调用父类的run()方法,打印出“Mike is running.”。之后,又打印出了“`A Husky dog is running.”

extends

extends关键字用于类之间的继承,在一个子类中使用extends关键字继承父类的属性和方法。利用继承,可以使用父类进行代码共享,并且可以更容易地扩展类的功能,同时也可以更好地维护代码

class Animal{
  constructor(name){
    this.name = name;
  }
  run(){
    console.log(`${this.name} is running.`);
  }
}
class Dog extends Animal{
  constructor(name, breed){
    super(name);
    this.breed = breed;
  }
  shout(){
    console.log(`A ${this.breed} dog is barking.`);
  }
}
let dog1 = new Dog('Mike', 'Husky');
dog1.run(); //输出:Mike is running.
dog1.shout(); //输出:A Husky dog is barking.

在上面的代码中,我们定义了一个Animal类来创建一个动物对象和一个Dog类来创建一个狗对象。通过extend关键字,Dog类可以继承自Animal类,并且扩展了一个新的方法shout()

结论

在JavaScript中Class类、super和extends关键词被广泛使用,使得JavaScript的面向对象编程变得更加直观。使用Class类可以方便的创建实例化对象,使用继承可以共享代码,并且更容易地维护代码。super关键字则能够方便地调用父类的方法或构造函数,从而避免了重复性的代码。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js学习笔记之class类、super和extends关键词 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • yepnope.js 异步加载资源文件

    yepnope.js是一个轻量级的异步资源加载工具,可以帮助我们在加载网页中的资源文件时,进行更灵活高效的操作。下面我为大家介绍一下如何使用yepnope.js进行异步加载资源文件的操作。 安装yepnope.js yepnope.js可以通过npm安装,也可以直接在HTML文件中通过CDN链接引入。 <!DOCTYPE html> <ht…

    JavaScript 2023年5月27日
    00
  • JS中的异常处理方法分享

    JS中的异常处理是一个重要的主题,因为JS是一门弱类型、动态语言,如果没有健壮的异常处理机制,程序就会出现各种意外的运行错误。在这里,我将分享一些JS中异常处理的方法。 try-catch try-catch是JS中处理异常的最常用方法,可以在try代码块中放置可能会抛出异常的代码块,如果有异常被抛出,就会被catch代码块捕获,并进行相应的处理。例如: t…

    JavaScript 2023年5月27日
    00
  • 深入分析javascript中console命令

    下面是深入分析JavaScript中console命令的攻略。 1. console命令的基本用法 console 在 JavaScript 中是一个非常有用的工具,它可以帮助我们在调试时打印各种信息,比如变量、数组、对象、函数等。在控制台中使用 console 命令是很简单的,只需要在我们需要调试的地方加上 console.log() 即可。 以下是一个简…

    JavaScript 2023年6月11日
    00
  • JS实现导出Excel的五种方法详解【附源码下载】

    这里我来详细讲解一下“JS实现导出Excel的五种方法详解【附源码下载】”这篇文章。 一、背景介绍 文章首先对导出Excel的重要性进行了介绍,并指出了常见的几种导出Excel的场景,如表格报表、数据分析等。 二、五种导出Excel的方法 接着,文章依次介绍了五种导出Excel的方法,并附上了详细的源码和演示效果。 1.使用table2excel插件导出Ex…

    JavaScript 2023年6月11日
    00
  • checkbox勾选判断代码分析

    针对“checkbox勾选判断代码分析”,我会从以下几个方面进行详细讲解: checkbox的勾选状态判断 checkbox的点击事件绑定 checkbox状态改变时的处理逻辑 checkbox的勾选状态判断 在HTML中,可以通过以下代码创建一个checkbox: <input type="checkbox" id="m…

    JavaScript 2023年6月11日
    00
  • JS实现简单网页倒计时器

    下面我将详细讲解一下如何通过JS实现简单网页倒计时器。 1. 首先,我们需要创建一个HTML页面 在HTML文件中,我们需要定义一个显示倒计时的区域,并为它设置一个id,例如: <div id="countdown"></div> 2. 然后,在JavaScript代码中,我们需要定义倒计时的时间和计时器函数 例如…

    JavaScript 2023年5月27日
    00
  • Javascript循环删除数组中元素的几种方法示例

    针对 “Javascript循环删除数组中元素的几种方法示例” 这个主题,我会给出详细的讲解。下面是本次攻略的完整目录: 目录 前言 常规方法:for循环+splice 优化方法1:倒序循环+splice 优化方法2:将要删除的元素移动到末尾+pop 总结 前言 Javascript是一种弱类型的脚本语言,最大的特点就是非常灵活。但是在生产环境中,我们不仅要…

    JavaScript 2023年5月28日
    00
  • javascript实现发送短信倒计时

    为在网页上实现发送短信倒计时,需要使用JavaScript编写代码。具体实现过程如下。 HTML文件中,需要加入一个用于显示验证码的按钮。按钮的初始状态为“发送验证码”,点击后会触发发送验证码的函数。 <button id="send">发送验证码</button> 在JavaScript文件中,需要定义一个计时器…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部