本文详细介绍在JavaScript中实现简易计算器的三种常见方式。首先通过普通函数封装加减乘除逻辑，其次利用对象属性与方法进行封装，最后深入解析使用构造函数配合new关键字创建实例的过程。文章涵盖基础数据类型处理、switch语句交互及内存对象创建原理，帮助开发者理解不同代码组织形式的差异与适用场景。
在JavaScript开发中，处理基本数据类型与使用对象创建是两种核心的编程思路。本文将基于这两种思路，展示构建简易计算器的不同实现路径。
第一种方法采用最基础的函数调用方式。通过定义独立的函数来处理具体的数学运算，逻辑直观且易于理解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var str = '欢迎使用简易计算器:\n1. 加法运算;\n2. 减法运算;\n3. 乘法运算;\n4. 除法运算;\n5. 退出:\n请输入您的选项';
var option = parseInt(prompt(str))
switch (option) {
case 1:
var str1 = parseInt(prompt("请输入第一个数"))
var str2 = parseInt(prompt("请输入第二个数"))
alert(str1 + str2)
console.log("加法运算");
break
case 2:
var str1 = parseInt(prompt("请输入第一个数"))
var str2 = parseInt(prompt("请输入第二个数"))
alert(str1 - str2)
console.log("减法运算");
break
case 3:
var str1 = parseInt(prompt("请输入第一个数"))
var str2 = parseInt(prompt("请输入第二个数"))
alert(str1 * str2)
console.log("乘法运算");
break
case 4:
var str1 = parseInt(prompt("请输入第一个数"))
var str2 = parseInt(prompt("请输入第二个数"))
alert(str1 / str2)
console.log("除法运算");
break
case 5:
console.log("退出");
break
}
</script>
</body>
</html>第二种方法侧重于函数的模块化创建。我们将加法、减法、乘法和除法分别封装为独立的函数，通过函数名直接调用，实现代码的复用与清晰分离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function jiafa(num1, num2) {
return num1 + num2
}
function jianfa(num1, num2) {
return num1 - num2
}
function chengfa(num1, num2) {
return num1 * num2
}
function chufa(num1, num2) {
return num1 / num2
}
var str = '欢迎使用简易计算器:\n1. 加法运算;\n2. 减法运算;\n3. 乘法运算;\n4. 除法运算;\n5. 退出:\n请输入您的选项';
var option = parseInt(prompt(str))
switch (option) {
case 1:
var str1 = parseInt(prompt("请输入第一个数"))
var str2 = parseInt(prompt("请输入第二个数"))
result = jiafa(str1, str2)
alert(result)
console.log("加法运算");
break
case 2:
var str1 = parseInt(prompt("请输入第一个数"))
var str2 = parseInt(prompt("请输入第二个数"))
result = jianfa(str1, str2)
alert(result)
console.log("减法运算");
break
case 3:
var str1 = parseInt(prompt("请输入第一个数"))
var str2 = parseInt(prompt("请输入第二个数"))
result = chengfa(str1, str2)
alert(result)
console.log("乘法运算");
break
case 4:
var str1 = parseInt(prompt("请输入第一个数"))
var str2 = parseInt(prompt("请输入第二个数"))
result = chufa(str1, str2)
alert(result)
console.log("除法运算");
break
case 5:
console.log("退出");
break
}
</script>
</body>
</html>第三种方法引入面向对象的思想，使用构造函数来创建计算器实例。这种方式能够封装状态与方法，更符合复杂应用的结构需求。
在使用new关键字执行构造函数时，内部经历了一个标准的对象创建流程。理解这一过程有助于掌握JavaScript的原型链与this指向机制。
第一步，new关键字会在内存中分配空间，创建出一个全新的空对象。
第二步，函数内部的this关键字会被绑定，指向刚才创建的这个空对象。
第三步，执行构造函数体内的代码，将定义的属性和方法添加到这个空对象上，完成对象的初始化。
第四步，构造函数默认返回这个新创建的对象。因此，在标准的构造函数实现中，通常不需要显式编写return语句。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Counter(num1, num2) {
this.num1 = num1
this.num2 = num2
this.jiafa = function () {
return num1 + num2
}
this.jianfa = function () {
return num1 - num2
}
this.chengfa = function () {
return num1 * num2
}
this.chufa = function () {
return num1 / num2
}
}
var str = '欢迎使用简易计算器:\n1. 加法运算;\n2. 减法运算;\n3. 乘法运算;\n4. 除法运算;\n5. 退出:\n请输入您的选项';
var option = parseInt(prompt(str))
switch (option) {
case 1:
var str1 = parseInt(prompt("请输入第一个数"))
var str2 = parseInt(prompt("请输入第二个数"))
result = new Counter(str1, str2).jiafa()
alert(result)
console.log("加法运算");
break
case 2:
var str1 = parseInt(prompt("请输入第一个数"))
var str2 = parseInt(prompt("请输入第二个数"))
result = new Counter(str1, str2).jianfa()
alert(result)
console.log("减法运算");
break
case 3:
var str1 = parseInt(prompt("请输入第一个数"))
var str2 = parseInt(prompt("请输入第二个数"))
result = new Counter(str1, str2).chengfa()
alert(result)
console.log("乘法运算");
break
case 4:
var str1 = parseInt(prompt("请输入第一个数"))
var str2 = parseInt(prompt("请输入第二个数"))
result = new Counter(str1, str2).chufa()
alert(result)
console.log("除法运算");
break
case 5:
console.log("退出");
break
default:
console.log("输入错误")
break
}
</script>
</body>
</html>
通过对比这三种实现方式，我们可以根据项目复杂度选择最合适的代码组织形式。从简单的函数调用到面向对象的构造函数，JavaScript提供了灵活的工具来满足不同的开发需求。
至此，关于使用JavaScript实现简易计算器的三种方法介绍完毕。如需了解更多JS简易计算器相关内容，建议查阅本站过往文章或继续浏览后续系列教程，感谢支持。