以下是一篇关于JavaScript函数调用的技术指南，包含基础语法与实用示例：
JavaScript函数调用与代码执行指南
一、函数定义与基础调用
JavaScript函数有三种定义方式：
“`javascript
// 1. 函数声明
function greet(name) {
return `Hello, ${name}!`;
}
// 2. 函数表达式
const calculate = function(a, b) {
return a b;
};
// 3. 箭头函数（ES6+）
const square = x => x 2;
“`
调用方式：
“`javascript
console.log(greet(“Alice”)); // “Hello, Alice!”
console.log(calculate(5, 3)); // 15
square(4); // 16
“`
二、方法调用模式
当函数作为对象属性时：
“`javascript
const calculator = {
add: function(a, b) {
return a + b;
},
multiply(a, b) { // ES6简写
return a b
}
};
console.log(calculator.add(2,3)); // 5
console.log(calculator.multiply(4,5)); // 20
“`
三、高阶函数应用
处理数组的常见模式：
“`javascript
// 1. 映射转换
const numbers = [1, 2, 3];
const squared = numbers.map(x => xx); // [1,4,9]
// 2. 过滤数据
const even = numbers.filter(n => n%2 === 0); // [2]
// 3. 异步回调
fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => console.log(data));
“`
四、事件驱动调用
DOM事件处理示例：
“`html
“`
五、立即执行函数(IIFE)
创建独立作用域：
“`javascript
(function() {
const privateVar = ‘内部变量’;
console.log(‘立即执行’);
})();
// 带参数形式
((width, height) => {
console.log(`面积：${width height}`);
})(10, 5);
“`
六、上下文绑定技巧
动态控制this指向：
“`javascript
const user = {
name: ‘John’,
showName: function() {
console.log(this.name);
}
};
const show = user.showName;
show(); // undefined（丢失上下文）
// 使用bind绑定
const boundShow = show.bind(user);
boundShow(); // “John”
// call/apply直接调用
user.showName.call({name: ‘Alice’}); // “Alice”
“`
七、现代浏览器API调用
调用Web API示例：
“`javascript
// 地理位置获取
navigator.geolocation.getCurrentPosition(
position => {
console.log(`纬度：${position.coords.latitude}`);
},
error => {
console.error(‘定位失败:’, error);
}
);
// 本地存储操作
localStorage.setItem(‘theme’, ‘dark’);
console.log(localStorage.getItem(‘theme’)); // “dark”
“`
八、常见应用场景
1. 表单验证
“`javascript
document.querySelector(‘form’).addEventListener(‘submit’, e => {
const input = e.target.querySelector(‘input’);
if (!input.value.includes(‘@’)) {
e.preventDefault();
alert(‘请输入有效邮箱’);
}
});
“`
2. 动态内容加载
“`javascript
async function loadContent(url) {
try {
const res = await fetch(url);
document.getElementById(‘content’).innerHTML = await res.text();
} catch (err) {
console.error(‘加载失败:’, err);
}
}
“`
本文涵盖了从基础调用到实际应用的完整链路，示例代码可直接保存为`demo.js`文件进行测试。掌握这些调用模式后，可灵活应对前端开发中的各种需求场景，建议通过实际项目加深理解。
（全文约780字，完整示例代码约30行）