《JavaScript 五大常见函数》
JavaScript 作为前端开发的核心语言，其函数体系是开发者必须掌握的基础。从基础操作到复杂逻辑，函数贯穿了整个开发流程。本文将深入解析 JavaScript 中五大常见函数类型，结合实际应用场景与代码示例，帮助开发者系统化理解函数的核心用法。
一、高阶函数：函数作为一等公民
高阶函数是 JavaScript 函数式编程的核心，其特点在于能够接收函数作为参数或返回函数作为结果。这种特性使得代码具备更强的抽象能力和复用性。
1.1 函数作为参数
常见于回调函数场景，例如数组的 `forEach`、`map`、`filter` 等方法。以 `map` 为例：
const numbers = [1, 2, 3];
const doubled = numbers.map(function(num) {
return num * 2;
});
console.log(doubled); // 输出: [2, 4, 6]
箭头函数可进一步简化：
const doubled = numbers.map(num => num * 2);
1.2 函数作为返回值
闭包是实现这一特性的关键。例如创建计数器函数：
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
1.3 实际应用场景
高阶函数在异步编程中尤为重要。`setTimeout` 和 `Promise` 构造函数都依赖高阶函数特性：
function fetchData(callback) {
setTimeout(() => {
callback('Data loaded');
}, 1000);
}
fetchData(data => console.log(data));
二、回调函数：异步编程的基石
回调函数是处理异步操作的经典模式，虽然现代 JavaScript 更推荐使用 Promise/Async-Await，但理解回调机制仍是必要基础。
2.1 基础回调模式
文件系统操作是典型场景（Node.js 示例）：
const fs = require('fs');
fs.readFile('example.txt', 'utf8', (err, data) => {
if (err) throw err;
console.log(data);
});
2.2 回调地狱问题
多层嵌套回调会导致代码难以维护：
fs.readFile('a.txt', (errA, dataA) => {
fs.readFile('b.txt', (errB, dataB) => {
fs.readFile('c.txt', (errC, dataC) => {
// 处理逻辑
});
});
});
2.3 解决方案演进
Promise 链式调用：
function readFilePromise(path) {
return new Promise((resolve, reject) => {
fs.readFile(path, 'utf8', (err, data) => {
err ? reject(err) : resolve(data);
});
});
}
readFilePromise('a.txt')
.then(dataA => readFilePromise('b.txt'))
.then(dataB => readFilePromise('c.txt'))
.then(dataC => console.log(dataC))
.catch(err => console.error(err));
三、Promise 函数：现代异步处理标准
Promise 对象代表一个异步操作的最终完成（或失败）及其结果值，有效解决了回调地狱问题。
3.1 Promise 基础结构
const promise = new Promise((resolve, reject) => {
const isSuccess = true;
setTimeout(() => {
isSuccess ? resolve('Success') : reject('Error');
}, 1000);
});
promise
.then(result => console.log(result))
.catch(error => console.error(error));
3.2 静态方法
`Promise.all` 处理多个并行异步操作：
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve) => {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3])
.then(values => console.log(values)); // [3, 42, "foo"]
`Promise.race` 返回第一个完成的 Promise：
const promise4 = new Promise((resolve) => setTimeout(resolve, 500, 'one'));
const promise5 = new Promise((resolve) => setTimeout(resolve, 100, 'two'));
Promise.race([promise4, promise5]).then(value => console.log(value)); // "two"
3.3 实际应用示例
封装 AJAX 请求：
function fetchData(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
}
fetchData('https://api.example.com/data')
.then(data => JSON.parse(data))
.then(json => console.log(json))
.catch(error => console.error('Error:', error));
四、Async/Await 函数：同步风格的异步编程
Async/Await 是 ES2017 引入的语法糖，基于 Promise 提供更直观的异步代码编写方式。
4.1 基本语法
async function fetchUser() {
try {
const response = await fetch('https://api.example.com/user');
const user = await response.json();
console.log(user);
} catch (error) {
console.error('Fetch error:', error);
}
}
fetchUser();
4.2 并行处理优化
使用 `Promise.all` 优化多个独立请求：
async function fetchMultiple() {
try {
const [user, posts] = await Promise.all([
fetch('https://api.example.com/user'),
fetch('https://api.example.com/posts')
]);
console.log(await user.json(), await posts.json());
} catch (error) {
console.error('Error:', error);
}
}
4.3 错误处理最佳实践
对比回调与 Async/Await 的错误处理：
// 回调方式
function callbackStyle(callback) {
someAsyncOperation((err, data) => {
if (err) callback(err);
else callback(null, data);
});
}
// Async/Await 方式
async function asyncStyle() {
try {
const data = await someAsyncOperation();
return data;
} catch (error) {
console.error('Caught:', error);
throw error; // 可选择重新抛出
}
}
五、构造函数：面向对象编程基础
构造函数用于创建特定类型的对象，是 JavaScript 面向对象编程的核心机制。
5.1 基础构造函数
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
console.log(`Hello, my name is ${this.name}`);
};
}
const john = new Person('John', 30);
john.greet(); // "Hello, my name is John"
5.2 Prototype 继承
优化方法共享：
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name}`);
};
const jane = new Person('Jane', 25);
jane.greet(); // "Hello, my name is Jane"
5.3 ES6 Class 语法
更简洁的面向对象写法：
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog('Rex');
dog.speak(); // "Rex barks."
5.4 实际应用场景
创建可复用的组件系统：
class UIComponent {
constructor(selector) {
this.element = document.querySelector(selector);
}
render(data) {
this.element.innerHTML = data;
}
}
class Button extends UIComponent {
constructor(selector) {
super(selector);
this.element.addEventListener('click', this.handleClick);
}
handleClick = () => {
console.log('Button clicked!');
};
}
const myButton = new Button('#myButton');
六、函数进阶技巧
6.1 柯里化（Currying）
将多参数函数转换为一系列单参数函数：
function curry(fn) {
return function curried(...args) {
if (args.length >= fn.length) {
return fn.apply(this, args);
} else {
return function(...args2) {
return curried.apply(this, args.concat(args2));
}
}
};
}
const add = curry((a, b, c) => a + b + c);
console.log(add(1)(2)(3)); // 6
console.log(add(1, 2)(3)); // 6
6.2 偏函数应用（Partial Application）
固定部分参数：
function partial(fn, ...presetArgs) {
return function(...laterArgs) {
return fn.apply(this, [...presetArgs, ...laterArgs]);
};
}
const greet = (greeting, name) => `${greeting}, ${name}!`;
const greetJohn = partial(greet, 'Hello');
console.log(greetJohn('John')); // "Hello, John!"
6.3 函数组合（Function Composition）
创建数据处理管道：
const compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x);
const toUpperCase = str => str.toUpperCase();
const exclaim = str => `${str}!`;
const shout = compose(exclaim, toUpperCase);
console.log(shout('hello')); // "HELLO!"
关键词：高阶函数、回调函数、Promise函数、Async/Await函数、构造函数、函数式编程、异步处理、闭包、原型继承、柯里化
简介：本文系统解析JavaScript五大核心函数类型：高阶函数实现函数式编程、回调函数处理异步基础、Promise规范异步流程、Async/Await提供同步风格、构造函数支撑面向对象。通过代码示例展示各函数类型的实际应用场景，涵盖从基础到进阶的完整知识体系，帮助开发者构建扎实的函数编程能力。
