JavaScript 函数调用实战：经典算法与四种调用模式详解
本文详细解析 JavaScript 函数的四种调用模式及实际应用。通过实现闰年判断、质数检查和日期验证等经典算法，展示如何将逻辑封装为独立函数并规范调用。内容涵盖方法调用、函数调用、构造器调用以及 apply/call 上下文绑定技巧，帮助开发者构建结构化且易维护的 JS 代码。
JavaScript 函数调用的经典实战
在开发过程中，将业务逻辑封装为独立的函数是提高代码复用性和可读性的关键。以下案例展示了如何在 HTML 页面中引入外部 JS 文件，并调用自定义的判断函数来实现功能。
第1步：准备 HTML 结构与外部脚本引入
目的：建立输入交互界面并加载包含核心逻辑的 JS 库。
操作：
- 创建两个
<input>文本框，分别用于显示闰年和质数的判断结果。 - 使用
<script src="../js/tools_practice.js"></script>引入编写好的工具函数文件。
<body>
<span>是否为闰年</span>
<input type="text" id='inp1'>
<br>
<span>是否为质数</span>
<input type="text" id="inp2">
<br>
<!-- 外部引入js 文件 -->
<script src="../js/tools_practice.js"></script>
</body>第2步：实现核心判断函数
目的：编写通用的数学判断逻辑，包括获取 DOM 元素、生成随机数、闰年检测及质数检测。
关键代码说明：
- 获取对象：封装
get(id)简化document.getElementById调用。 - 闰年判断：满足“能被4整除且不能被100整除”或“能被400整除”的条件。
- 随机数生成：利用
Math.random()生成指定范围内的整数。 - 质数判断：从 2 遍历至 n-1，若存在能整除 n 的数则返回 false。
// 获取DOM元素
function get(id) {
return document.getElementById(id);
}
// 判断某年是否为闰年
function leap_year(x) {
if (x % 4 === 0 && x % 100 !== 0 || x % 400 === 0) {
return true;
}
return false;
}
// 产生某个范围内的随机整数
function rand(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
// 判断一个数是否为质数
function isZhi(n) {
for (var i = 2; i < n; i++) {
if (n % i === 0) {
return false;
}
}
return true;
}第3步：执行调用并输出结果
目的：在 HTML 的 <script> 标签中调用上述函数，并将结果反馈给页面元素。
操作流程：
- 调用
leap_year(2004)判断特定年份，根据返回值修改inp1的 value。 - 调用
rand(1000, 2000)生成随机年份，再次调用判断函数并输出日志。 - 对质数判断执行相同流程，测试固定值
14和随机数。
<script>
var oInp1 = get('inp1');
// 判断是否为闰年
var year = leap_year(2004);
if(year){
oInp1.value = '是闰年';
} else {
oInp1.value = '不是闰年';
}
// 随机数判断示例
var y = rand(1000, 2000);
var res = leap_year(y);
if(res){
document.write('随机数' + y + '是闰年');
} else {
document.write('随机数' + y + '不是闰年');
}
var oInp2 = get('inp2');
var n = isZhi(14);
if(n){
oInp2.value = '是质数'
} else {
oInp2.value = '不是质数'
}
</script>第4步：封装复杂的日期合法性验证
目的：处理更复杂的逻辑判断，确保输入的年月日符合日历规则，特别是针对月份天数差异和闰年二月天数的特殊处理。
实现逻辑：
- 校验年份范围（如 1000-2000）。
- 校验月份范围（1-12）。
- 根据月份确定当月最大天数（大月31天，小月30天，二月按闰年29/平年28天处理）。
- 最后校验日期是否在允许范围内。
function data(y, m, d) {
// 先判断年
if (y >= 1000 && y <= 2000 && y % 1 === 0) {
// 再判断月
if (m >= 1 && m <= 12 && m % 1 === 0) {
var maxDay;
if ([1,3,5,7,8,10,12].includes(m)) {
maxDay = 31;
} else if ([4,6,9,11].includes(m)) {
maxDay = 30;
} else if (m === 2) {
// 判断二月天数
if (y % 4 === 0 && y % 100 != 0 || y % 400 === 0) {
maxDay = 29;
} else {
maxDay = 28;
}
}
// 最后判断日期
if(d >= 1 && d <= maxDay && d % 1 === 0){
return true;
}
}
}
return false;
}
// 调用示例
var da = data(2024, 2, 29); // 返回 true
if(da){
document.write('日期合法');
} else {
document.write('日期不合法');
}JS 函数的定义与四种调用模式
理解 JavaScript 中 this 的指向是掌握函数调用的核心。JS 提供了四种主要的调用方式，每种方式决定了 this 绑定到哪个对象。
1. 方法调用模式 (Method Invocation Pattern)
机制：将函数赋值给对象的属性，通过对象访问该属性来调用。
特征：this 指向调用该方法的对象本身。
示例：
var blogInfo = {
blogId: 123,
blogName: "myblog",
showBlog: function() {
alert(this.blogId); // this 指向 blogInfo
}
};
blogInfo.showBlog(); // 弹出 1232. 函数调用模式 (Function Invocation Pattern)
机制：直接调用函数，不通过对象调用。
特征：this 在非严格模式下指向全局对象（浏览器环境中为 window），严格模式下为 undefined。
示例：
var myfunc = function(a, b) {
return a + b;
};
alert(myfunc(3, 4)); // 输出 7，this 指向 window3. 构造器调用模式 (Constructor Invocation Pattern)
机制：使用 new 关键字调用函数。
特征：this 指向新创建的实例对象。通常配合原型链（Prototype）扩展实例方法。
示例：
var MyFunc = function(a) {
this.a = a;
};
MyFunc.prototype = {
show: function() {
alert(this.a);
}
};
var newObj = new MyFunc("123");
newObj.show(); // 弹出 123，this 指向 newObj4. Apply/Call 调用模式
机制：通过函数的 call 或 apply 方法显式指定调用时的上下文（即 this 的值）。
区别：call 接收参数列表，apply 接收参数数组。
示例：
var myObject = {};
var sum = function(a, b) {
// 此时 this 指向传入的第一个参数 myObject
// 虽然这里没用到 this，但展示了上下文切换能力
return a + b;
};
var result1 = sum.call(myObject, 10, 30); // 参数分开传
var result2 = sum.apply(myObject, [10, 30]); // 参数以数组形式传
alert(result1); // 输出 40总结
掌握函数调用的基础语法只是第一步，理解不同调用模式下的 this 行为对于解决复杂的前端逻辑至关重要。通过封装如闰年判断、质数检测等基础算法，可以将通用逻辑模块化，使代码结构更加清晰。同时，灵活运用 apply 和 call 可以实现更高级的对象复用和行为控制。以上就是 JavaScript 函数调用经典实例与模式的详细内容，更多关于 JavaScript 编程基础的资料请关注本站其它相关文章！
本站声明
本文内容仅供参考，不代表本站观点。转载或引用请注明出处。如发现内容问题，请通过联系我们页面反馈。
