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日

相关文章

  • js 定义对象数组(结合)多维数组方法

    JS中对象数组是一种常用的数据结构,用于存储一组具有相同特征的数据。当多个对象数组需要结合起来使用,就需要使用多维数组。 定义多维数组的方法: var multiArray = []; // 定义一个空的多维数组 // 定义一个含有两个元素的一维数组,每个元素是一个对象数组 multiArray[0] = [{name: ‘张三’, age: 20}, {n…

    JavaScript 2023年5月27日
    00
  • JavaScript仿京东实现秒杀倒计时案例详解

    下面是关于“JavaScript仿京东实现秒杀倒计时案例详解”的完整攻略。 1. 准备工作 在开始仿京东实现秒杀倒计时案例之前,我们需要做一些准备工作。具体如下: 在HTML文件中引入所需的CSS文件和JavaScript文件; 创建一个用于显示倒计时的HTML标签,并设置其id属性; 在JavaScript文件中获取该HTML标签的id属性值,利用docu…

    JavaScript 2023年6月11日
    00
  • jQuery Ajax 全局调用封装实例代码详解

    jQuery Ajax全局调用封装实例代码详解 在前端开发中,Ajax作为异步通信技术已经得到了广泛的应用。而通过jQuery库封装的Ajax则在开发中变得更加方便,让我们更加容易地处理数据请求和响应。本文将会详细介绍如何将jQuery的Ajax进行全局封装调用,以及如何实现Ajax的参数传递和数据处理。 前置知识 在进行本文讲解前,需要了解一些JavaSc…

    JavaScript 2023年6月11日
    00
  • Javascript 虚拟 DOM详解

    Javascript 虚拟 DOM 详解 什么是虚拟 DOM 虚拟 DOM(Virtual DOM)是 Javascript 中最重要的概念之一。虚拟 DOM 是由 React 和 Vue 等框架广泛采用的一种技术,用于提高应用程序性能和整体用户体验。 虚拟 DOM 是 DOM 在内存中的一种表示形式,用 Javascript 对象模拟了真实的 DOM 树,…

    JavaScript 2023年6月10日
    00
  • event.srcElement+表格应用

    Sure! 什么是 event.srcElement? event.srcElement是一种废弃的DOM属性,用于获取触发事件的元素。目前更推荐使用 event.target属性来代替它。event.target返回事件发生时的元素,而event.srcElement在特定情况下返回与event.target相同的值。但是有一些情况下event.srcEl…

    JavaScript 2023年6月10日
    00
  • ion content 滚动到底部会遮住一部分视图的快速解决方法

    当使用ionic开发应用时,有时会遇到一个问题:在使用ion-content组件时,在底部出现的内容可能会被底部导航栏或者浏览器的地址栏所遮挡。这个问题可能会影响应用的用户体验,因此需要进行修复。下面是解决这个问题的一些方法。 方法一:增加scroll-padding-bottom 通过为ion-content添加scroll-padding-bottom属…

    JavaScript 2023年6月11日
    00
  • 使用javascript实现json数据以csv格式下载

    使用JavaScript实现JSON数据以CSV格式下载的完整攻略如下: 步骤一:准备要导出为CSV的JSON数据 首先,需要准备一个JSON数据,该数据将被转换为CSV格式。以下是一个示例的JSON数据: [ { "name": "John Smith", "age": 28, "ema…

    JavaScript 2023年5月27日
    00
  • Javascript新手入门之字符串拼接与变量的应用

    Javascript中字符串拼接与变量的应用是初学者入门时需要掌握的重要内容,本文将详细讲解其攻略。首先,我们需要理解什么是字符串和变量。 字符串和变量 字符串 字符串是指在双引号或单引号中包含的一组字符。例如: var str = "hello javascript"; console.log(str); 上面这段代码声明了一个字符串类…

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