JavaScript有哪些钩子函数

在JavaScript开发中，钩子函数扮演着十分重要的角色，它们为开发者提供了在特定阶段介入并执行自定义代码的能力。理解和运用这些钩子函数，能极大地提升代码的灵活性与可维护性。

首先要说的是window.onload。这是一个经典的钩子函数，当页面的所有资源（包括图片、脚本等）加载完成后触发。在实际应用中，我们常常需要在页面完全准备好之后执行一些操作，比如初始化页面元素的交互效果、获取服务器数据填充页面等。例如：

window.onload = function() {
    const btn = document.getElementById('myButton');
    btn.addEventListener('click', function() {
        alert('按钮被点击了');
    });
};

还有DOMContentLoaded事件。与window.onload不同，它在页面的DOM结构加载完成后就会触发，而不必等待图片等资源加载完毕。这意味着能更快地开始操作DOM，提升页面响应速度。

document.addEventListener('DOMContentLoaded', function() {
    const element = document.createElement('p');
    element.textContent = 'DOM已准备好';
    document.body.appendChild(element);
});

在JavaScript的异步编程中，then和catch是Promise对象的钩子函数。then在Promise被成功解决（resolved）时执行，catch则在Promise被拒绝（rejected）时触发。通过它们，我们可以优雅地处理异步操作的结果和错误。

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功啦');
    }, 1000);
});

myPromise.then((result) => {
    console.log(result);
}).catch((error) => {
    console.error(error);
});

另外，在函数式编程中，map、filter和reduce等数组方法也可看作钩子函数。map会对数组中的每个元素执行提供的函数，并返回一个新数组；filter根据条件过滤数组元素；reduce则对数组元素进行累加操作。

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map((num) => num * num);
const even = numbers.filter((num) => num % 2 === 0);
const sum = numbers.reduce((acc, num) => acc + num, 0);

JavaScript的钩子函数为开发者在不同场景下提供了强大的编程控制能力，熟练掌握它们，能让我们在开发中更加得心应手。