基于JavaScript 类的使用详解

基于 JavaScript 类的使用详解

JavaScript 的 Class 定义是一种专门为对象的构建提供的语法糖。在ES6之前,JavaScript没有类(class)的概念,只能通过构造函数和原型对象来实现。

类的定义和语法

定义一个类可以使用 class 关键字,后面跟着类名和一对大括号 {}。 大括号内部可以定义类的属性和方法。使用 constructor 方法来定义当对象实例化时所执行的构造函数。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greeting() {
    console.log(`My name is ${this.name} and I'm ${this.age} years old.`);
  }
}

以上是一个最基本的类的定义。在类的构造函数上,接收了两个参数,分别为 nameage,类实例化时需传入这两个参数。在类中,我们还定义了一个 greeting() 方法用来向控制台输出类实例的信息。

实例化一个类

实例化类时,需要使用 new 操作符来调用类的构造函数,并返回一个类的实例。

const person1 = new Person('John', 30);
person1.greeting();

以上代码将会输出:

My name is John and I'm 30 years old.

类的继承

类的继承是一种面向对象编程中非常重要的概念,它允许我们创建一个新的类,从一个已经存在的类上继承属性和方法。

class Customer extends Person {
  constructor(name, age, balance) {
    super(name, age);
    this.balance = balance;
  }
  getInfo() {
    return `${this.name} owes ${this.balance}.00`;
  }
}

在以上示例中,我们创建了一个 Customer 类,并将其从 Person 类上继承下来。Customer 类比 Person 类更加具体,包含额外的 balance 属性,并修改了 getInfo() 方法以反映出这个新增的属性。super() 方法调用了父类的构造器,因此在 Customer 类中,我们可以直接调用 this.namethis.age

接下来,我们可以通过 new 操作符来实例化一个 Customer 对象。

const customer1 = new Customer('Tom', 35, 200);
console.log(customer1.greeting()); // My name is Tom and I'm 35 years old.
console.log(customer1.getInfo()); // Tom owes 200.00

输出结果为:

My name is Tom and I'm 35 years old.
Tom owes 200.00

示例 1:使用类定义一个矩形对象,并计算其面积和周长

我们可以创建一个用于计算矩形面积和周长的类。

class Rectangle {
  constructor(length, width) {
    this.length = length;
    this.width = width;
  }

  // 计算矩形的周长
  perimeter() {
    return 2 * (this.length + this.width);
  }

  // 计算矩形的面积
  area() {
    return this.length * this.width;
  }
}

在以上示例中,声明了一个 Rectangle 类,其构造函数接收两个参数 lengthwidth。我们也声明了两个方法 perimeter()area(),以分别计算矩形的周长和面积。

接下来,我们可以实例化一个 Rectangle 对象,并使用其 perimeter()area() 方法来计算矩形的周长和面积。

const rectangle1 = new Rectangle(5, 10);

console.log(rectangle1.perimeter()); // 30
console.log(rectangle1.area()); // 50

输出的结果为:

30
50

示例 2:用一个类管理一个 TODO 列表

我们也可以使用类来管理一个简单的 Todo List。在以下示例中,我们创建了一个 Todo 类,每个 Todo 实例都包含两个属性:textisCompleted。我们可以通过 addTodo() 方法将待办事项添加到列表中。我们还实现了 deleteTodo() 方法,以便从列表中删除已完成的任务。

class Todo {
  constructor() {
    this.list = [];
  }

  // 添加待办事项
  addTodoItem(text) {
    const todo = {
      text: text,
      isCompleted: false
    };
    this.list.push(todo);
  }

  // 删除已完成的任务
  deleteCompletedItems() {
    this.list = this.list.filter(todo => !todo.isCompleted);
  }

  // 设置任务为已完成
  setTodoItemComplete(index) {
    this.list[index].isCompleted = true;
  }

  // 输出任务列表
  displayTodoList() {
    console.log(this.list);
  }
}

以上代码创建了一个 Todo 类,其构造函数定义了一个空的 list 数组,其中 addTodoItem() 方法以待办事项的名字作为参数,将一个代办事项添加到列表中。我们还实现了 deleteCompletedItems() 方法,以便从列表中删除已完成的任务;setTodoItemComplete() 方法,以将任务标记为已完成;displayTodoList() 方法,以将所有待办任务输出到控制台。

以下是如何实例化 Todo 类,并向其列表中添加、删除和完成任务的示例。

const todoList = new Todo();

todoList.addTodoItem('Buy milk');
todoList.addTodoItem('Learn JavaScript');
todoList.displayTodoList(); // 输出两个待办事项对象

// 将第1项任务标记为已完成
todoList.setTodoItemComplete(0);
todoList.displayTodoList(); // 输出两个待办事项对象,但第1项任务被标记为已完成

// 删除已完成过的任务
todoList.deleteCompletedItems();
todoList.displayTodoList(); // 输出1个待办事项,即“Learn JavaScript”

输出的结果为:

[
  { text: 'Buy milk', isCompleted: false },
  { text: 'Learn JavaScript', isCompleted: false }
]
[
  { text: 'Buy milk', isCompleted: true },  // 自动标记
  { text: 'Learn JavaScript', isCompleted: false }
]
[{ text: 'Learn JavaScript', isCompleted: false }]

综上所述,JavaScript 类是在现代 JavaScript 中非常重要的一个概念。类让我们能够更好地组织代码、增加代码的可读性,也让我们的代码更加符合面向对象的编程范式。同时,也有利于我们更好地复用和维护代码。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:基于JavaScript 类的使用详解 - Python技术站

(0)
上一篇 2023年5月18日
下一篇 2023年5月18日

相关文章

  • Javascript实现异步编程的过程

    Javascript 是一种单线程语言,它只能同时执行一个任务,当程序执行 I/O 操作、等待网络请求或者等待定时事件时,程序不能阻塞等待,必须异步执行。所以,Javascript 实现异步编程是必备技能。 下面是 Javascript 实现异步编程的过程: 1. 回调函数 回调函数是 Javascript 中异步编程的最基本的方式。回调函数实现方式为,将需…

    JavaScript 2023年6月11日
    00
  • 让alert不出现弹窗的两种方法

    下面我来详细讲解“让alert不出现弹窗的两种方法”。 方式一:使用 console.log 在 JavaScript 中,除了 alert 还有一个常用的调试工具就是 console.log。它可以在浏览器的控制台打印输出信息,便于我们查看函数的执行情况和数据的变化情况。 示例代码如下: function showMessage() { console.l…

    JavaScript 2023年6月11日
    00
  • JavaScript日期工具类DateUtils定义与用法示例

    JavaScript日期工具类DateUtils定义与用法示例 介绍 JavaScript中提供了Date对象进行日期相关操作,但是有些常用的日期操作并没有提供相应的方法,因此可以使用自定义的DateUtils类来扩展Date对象的方法。 定义 下面是DateUtils的定义: class DateUtils { /** * 格式化日期 * @param {…

    JavaScript 2023年5月27日
    00
  • JS判断表单输入是否为空(示例代码)

    JS判断表单输入是否为空是前端开发中常用的一种技巧,可以通过JS代码来判断用户是否填写了表单输入框,从而提高用户体验和数据输入的准确性。下面将详细讲解如何使用JS判断表单输入是否为空,以及一些示例代码和注意事项。 判断表单输入是否为空 JS判断表单输入是否为空的核心代码如下所示: var input = document.getElementById(&qu…

    JavaScript 2023年6月10日
    00
  • JavaScript输出斐波那契数列的实现方法

    下面是详细的讲解“JavaScript输出斐波那契数列的实现方法”的完整攻略。 什么是斐波那契数列 斐波那契数列是指:1、1、2、3、5、8、13、21、34、……在数学上,斐波那契数列以递归的方式定义:f(0)=0,f(1)=1,f(n)=f(n-1)+f(n-2)(n>=2,n∈N*>)。 实现方法 方法一:递归实现 递归实现斐波那契数列非常…

    JavaScript 2023年5月28日
    00
  • JavaScript实现按键精灵的原理分析

    JavaScript实现按键精灵的原理分析 按键精灵是一种自动化测试工具,可以通过记录和回放用户在网页上的操作,以缩短测试时间和提高测试效率。JavaScript可以实现按键精灵的功能,下面是具体的攻略。 一、原理分析 按键精灵的功能实现主要需要以下三个步骤: 记录用户的操作。当用户在网页上进行操作时,通过JavaScript代码记录下来,包括点击、输入和滚…

    JavaScript 2023年6月11日
    00
  • JS连接SQL数据库与ACCESS数据库的方法实例

    下面我来详细讲解JS连接SQL数据库与ACCESS数据库的方法实例的完整攻略。 一、连接SQL数据库 1. 安装node-mssql依赖 可以通过在命令行中输入以下命令安装: npm install mssql –save 2. 连接SQL Server数据库 在node.js中,需要使用mssql模块连接SQL Server数据库。下面是一个简单的示例:…

    JavaScript 2023年6月11日
    00
  • 将JavaScript的jQuery库中表单转化为JSON对象的方法

    将JavaScript的jQuery库中表单转化为JSON对象的方法可以使用jQuery中的serializeArray()方法实现。 第一步:选择表单元素 首先需要使用jQuery的选择器选择表单元素,例如: var $form = $(‘form’); 第二步:使用serializeArray()方法将表单数据序列化为数组 var formArray =…

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