当前位置:首页 > JavaScript

js原型链实现计算器

2026-03-02 01:38:19JavaScript

使用原型链实现计算器

在JavaScript中,可以通过原型链实现一个基础的计算器功能。以下是一个基于原型链的计算器实现示例:

js原型链实现计算器

定义构造函数

function Calculator() {
  this.currentValue = 0;
}

添加原型方法

Calculator.prototype.add = function(num) {
  this.currentValue += num;
  return this;
};

Calculator.prototype.subtract = function(num) {
  this.currentValue -= num;
  return this;
};

Calculator.prototype.multiply = function(num) {
  this.currentValue *= num;
  return this;
};

Calculator.prototype.divide = function(num) {
  this.currentValue /= num;
  return this;
};

Calculator.prototype.getValue = function() {
  return this.currentValue;
};

Calculator.prototype.clear = function() {
  this.currentValue = 0;
  return this;
};

使用方法示例

const calc = new Calculator();
calc.add(5).multiply(2).subtract(3).divide(2);
console.log(calc.getValue()); // 输出: 3.5

实现链式调用

通过在每个方法中返回this,可以实现链式调用。每个方法都会修改currentValue,然后返回计算器实例本身,以便继续调用其他方法。

扩展功能

可以继续扩展计算器的功能,例如添加幂运算、平方根等:

Calculator.prototype.power = function(num) {
  this.currentValue = Math.pow(this.currentValue, num);
  return this;
};

Calculator.prototype.sqrt = function() {
  this.currentValue = Math.sqrt(this.currentValue);
  return this;
};

注意事项

  • 所有方法都会修改currentValue的状态
  • 除法操作需要注意除数为0的情况
  • 浮点数运算可能存在精度问题
  • 可以通过添加历史记录功能来增强计算器

这种实现方式展示了JavaScript原型链的基本用法,通过原型共享方法可以节省内存,同时保持实例间的独立性。

js原型链实现计算器

标签: 原型计算器
分享给朋友:

相关文章

vue实现拖拽计算器

vue实现拖拽计算器

Vue实现拖拽计算器的步骤 创建Vue项目 使用Vue CLI创建一个新项目,确保已安装Vue和必要的依赖项。通过命令行初始化项目并安装依赖。 vue create drag-calculator…

php实现计算器

php实现计算器

基本计算器实现 使用PHP创建一个简单的计算器可以通过HTML表单接收用户输入,PHP处理计算逻辑。以下是一个基础实现示例: HTML表单部分 (calculator.html) <form…

php实现计算器代码

php实现计算器代码

以下是一个简单的PHP计算器实现代码示例,支持加减乘除运算: 基础实现代码 <?php $result = 0; if ($_SERVER["REQUEST_METHOD"] == "POST…

实现一个计算器Php

实现一个计算器Php

基础PHP计算器实现 创建一个简单的PHP计算器需要处理用户输入并执行基本数学运算。以下是一个完整的实现示例: <!DOCTYPE html> <html> <hea…

js实现简单计算器

js实现简单计算器

实现基础功能 创建一个HTML文件,包含数字按钮、运算符按钮和显示结果的输入框。基本结构如下: <!DOCTYPE html> <html> <head>…

js实现计算器代码

js实现计算器代码

以下是一个简单的JavaScript计算器实现代码示例,包含基本运算功能(加、减、乘、除)和清除功能: HTML结构 <div class="calculator"> <in…