当前位置:首页 > JavaScript

js原型链实现计算器

2026-01-31 10:23:15JavaScript

原型链实现计算器的基本思路

使用JavaScript的原型链机制可以实现一个计算器功能。原型链允许对象继承另一个对象的属性和方法,通过这种方式可以构建一个具有基本计算功能的对象,并通过原型扩展更复杂的计算功能。

创建基础计算器对象

定义一个基础计算器构造函数,包含加、减、乘、除等基本方法:

js原型链实现计算器

function BasicCalculator() {}

BasicCalculator.prototype.add = function(a, b) {
    return a + b;
};

BasicCalculator.prototype.subtract = function(a, b) {
    return a - b;
};

BasicCalculator.prototype.multiply = function(a, b) {
    return a * b;
};

BasicCalculator.prototype.divide = function(a, b) {
    if (b === 0) throw new Error("Division by zero");
    return a / b;
};

扩展高级计算功能

通过原型链扩展更高级的计算功能,例如平方、开方等:

function AdvancedCalculator() {}

// 继承BasicCalculator的原型
AdvancedCalculator.prototype = Object.create(BasicCalculator.prototype);

AdvancedCalculator.prototype.square = function(x) {
    return this.multiply(x, x);
};

AdvancedCalculator.prototype.sqrt = function(x) {
    if (x < 0) throw new Error("Square root of negative number");
    return Math.sqrt(x);
};

使用计算器对象

创建实例并调用方法:

js原型链实现计算器

const calc = new AdvancedCalculator();

console.log(calc.add(5, 3));       // 8
console.log(calc.subtract(5, 3));  // 2
console.log(calc.square(4));       // 16
console.log(calc.sqrt(16));        // 4

原型链的验证

可以通过instanceof或检查原型链验证继承关系:

console.log(calc instanceof BasicCalculator);    // true
console.log(calc instanceof AdvancedCalculator);  // true

动态扩展原型

原型链允许动态扩展功能,例如添加百分比计算:

AdvancedCalculator.prototype.percentage = function(value, total) {
    return this.divide(this.multiply(value, 100), total);
};

console.log(calc.percentage(25, 200));  // 12.5

注意事项

  • 原型链继承可能导致方法覆盖问题,需注意方法命名冲突。
  • 使用Object.create确保原型链正确建立,避免直接修改prototype导致问题。
  • 错误处理(如除零或负数开方)应提前检查并抛出异常。

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

相关文章

react实现计算器

react实现计算器

React 实现计算器的步骤 创建 React 项目 使用 create-react-app 或 Vite 初始化项目: npx create-react-app calculator # 或 np…

css制作计算器界面

css制作计算器界面

CSS制作计算器界面 基本结构 使用HTML创建计算器的基本结构,包含显示屏和按钮区域。显示屏用于显示输入和结果,按钮区域包含数字、运算符和功能键。 <div class="calculat…

php实现计算器

php实现计算器

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

php实现计算器程序

php实现计算器程序

实现基础计算器功能 使用PHP创建一个简单的计算器程序,可以处理基本的加减乘除运算。以下是一个基于表单提交的实现方式: <?php $result = ''; if ($_SERVER["R…

实现一个计算器Php

实现一个计算器Php

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

js实现计算器功能

js实现计算器功能

实现基础计算器功能 使用HTML、CSS和JavaScript创建一个基础计算器,支持加减乘除运算。以下是核心代码示例: HTML结构 <div class="calculator"&g…