正文

掌握JS，轻松实现计算器：面向对象编程从入门到精通

/0 浏览量
0811

引言

面向对象编程（OOP）是JavaScript编程语言的核心概念之一。通过学习OOP，我们可以写出更加模块化、可重用和易于维护的代码。在这个教程中，我们将一起动手实现一个简单的计算器，通过这个项目，你可以逐步掌握JavaScript中的面向对象编程技巧。

第一节：JavaScript基础回顾

在开始之前，让我们快速回顾一下JavaScript的基础知识，包括变量、数据类型、运算符、函数等。

变量和数据类型

let age = 25; // number
let name = "Alice"; // string
let isStudent = true; // boolean

运算符

let a = 10;
let b = 5;

console.log(a + b); // 加法
console.log(a - b); // 减法
console.log(a * b); // 乘法
console.log(a / b); // 除法

函数

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

greet("Alice"); // 输出：Hello, Alice!

第二节：面向对象编程简介

面向对象编程的核心思想是将数据和操作数据的方法封装在一起，形成一个整体——对象。

类（Class）

在JavaScript中，我们使用class关键字来定义一个类。

class Calculator {
  constructor() {
    // 初始化计算器
  }

  // 定义方法
  add(a, b) {
    return a + b;
  }

  subtract(a, b) {
    return a - b;
  }

  // ... 其他方法
}

实例化对象

let calc = new Calculator();
let result = calc.add(10, 5);
console.log(result); // 输出：15

第三节：实现计算器功能

现在，我们来一步步实现计算器的功能。

设计计算器类

class Calculator {
  constructor() {
    this.reset();
  }

  reset() {
    this.current = 0;
    this.runningTotal = 0;
    this.operation = null;
    this.floating = null;
  }

  add(number) {
    this.startOperation(number, '+');
  }

  subtract(number) {
    this.startOperation(number, '-');
  }

  // ... 其他运算方法

  startOperation(number, operation) {
    if (this.runningTotal === 0) {
      this.runningTotal = this.current;
    }
    this.current = number;
    this.operation = operation;
  }

  equals() {
    switch (this.operation) {
      case '+':
        this.runningTotal += this.current;
        break;
      case '-':
        this.runningTotal -= this.current;
        break;
      // ... 其他运算
    }
    this.reset();
  }
}

使用计算器

let calc = new Calculator();

calc.add(10);
calc.subtract(5);
calc.add(3);
calc.equals();

console.log(calc.runningTotal); // 输出：8

第四节：扩展功能

为了使计算器更加实用，我们可以添加以下功能：

  • 支持更多运算符，如乘法、除法、百分比等。
  • 支持清除、删除等操作。
  • 支持显示历史记录。

扩展运算符

class Calculator {
  // ... 其他方法

  multiply(number) {
    this.startOperation(number, '*');
  }

  divide(number) {
    this.startOperation(number, '/');
  }

  // ... 其他扩展方法
}

使用扩展功能

let calc = new Calculator();

calc.add(10);
calc.multiply(2);
calc.subtract(5);
calc.divide(2);
calc.equals();

console.log(calc.runningTotal); // 输出：15

结语

通过本教程，我们学习了JavaScript中的面向对象编程，并实现了一个小型的计算器。在这个过程中，我们不仅掌握了类的定义、对象的实例化，还学习了如何扩展功能。希望这个教程能帮助你更好地理解面向对象编程，并在实际项目中发挥它的优势。

-- 展开阅读全文 --