js函数的执行怎么写

JS函数的执行怎么写

JS函数的执行可以通过多种方式实现，主要包括：直接调用函数、通过事件触发函数、通过定时器调用函数、立即执行函数表达式（IIFE）。其中，直接调用函数是最常见和基础的方法，通过简单的函数名和括号来调用函数。下面将详细解释这一点并提供具体示例。

一、直接调用函数

直接调用函数是最常见的方法，定义一个函数，然后通过函数名加括号的方式来调用它。这种方式适用于绝大多数场景，尤其是当需要在代码中明确调用某个功能时。

// 定义函数
function sayHello() {
  console.log("Hello, World!");
}
// 直接调用函数
sayHello(); // 输出：Hello, World!

1、函数定义

在JavaScript中，函数可以通过函数声明或函数表达式来定义。

函数声明：使用 function 关键字定义函数。

function add(a, b) {
  return a + b;
}

函数表达式：将函数赋值给变量。

const add = function(a, b) {
  return a + b;
};

2、函数调用

函数调用的基本形式是使用函数名加上括号。

// 函数声明调用
console.log(add(2, 3)); // 输出：5
// 函数表达式调用
console.log(add(2, 3)); // 输出：5

二、通过事件触发函数

事件触发是JavaScript中常见的一种函数执行方式，特别是在处理用户交互时。例如，点击按钮、鼠标悬停等事件都可以用来触发函数执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Trigger</title>
</head>
<body>
    <button id="myButton">Click Me!</button>
    <script>
        // 定义函数
        function showAlert() {
            alert("Button clicked!");
        }
        // 获取按钮并添加事件监听器
        document.getElementById("myButton").addEventListener("click", showAlert);
    </script>
</body>
</html>

1、常见事件类型

点击事件：click
鼠标悬停事件：mouseover
键盘事件：keydown, keyup
表单事件：submit, change

2、事件监听器

通过 addEventListener 方法，可以将事件与函数关联起来。

document.getElementById("myButton").addEventListener("click", showAlert);

三、通过定时器调用函数

定时器调用函数主要有两种方式：setTimeout 和 setInterval，用于在一定延迟后或重复执行某个函数。

// setTimeout: 延迟执行函数
setTimeout(function() {
  console.log("Executed after 2 seconds");
}, 2000);
// setInterval: 每隔一定时间重复执行函数
setInterval(function() {
  console.log("Executed every 2 seconds");
}, 2000);

1、`setTimeout`

setTimeout 用于在指定时间后执行一次函数。

setTimeout(() => {
  console.log("This message is shown after 3 seconds");
}, 3000);

2、`setInterval`

setInterval 用于每隔指定时间重复执行函数。

const intervalId = setInterval(() => {
  console.log("This message is shown every 3 seconds");
}, 3000);
// 停止定时器
clearInterval(intervalId);

四、立即执行函数表达式（IIFE）

立即执行函数表达式（IIFE）是一种在定义函数后立即执行的方式，常用于创建局部作用域以避免变量污染全局作用域。

(function() {
  console.log("This is an IIFE");
})();

1、IIFE 语法

IIFE 的语法是在函数表达式外面加上括号，然后再加一对括号来执行它。

(function() {
  console.log("This is an immediately executed function expression");
})();

2、IIFE 的应用场景

IIFE 常用于模块化代码、避免全局变量污染以及初始化代码。

(function() {
  const privateVar = "I am private";
  console.log(privateVar);
})();
// privateVar is not accessible here

五、函数参数与返回值

函数可以接受参数并返回值，参数用于接收外部输入，返回值用于输出处理结果。

function multiply(a, b) {
  return a * b;
}
const result = multiply(3, 4); // 返回值 12
console.log(result); // 输出：12

1、参数默认值

ES6 引入了参数默认值，可以在函数定义时为参数指定默认值。

function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}
greet(); // 输出：Hello, Guest
greet("Alice"); // 输出：Hello, Alice

2、剩余参数

ES6 引入了剩余参数，可以将不定数量的参数收集为一个数组。

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 输出：10

六、函数作用域与闭包

函数作用域与闭包是JavaScript中重要的概念，函数作用域决定了变量的可访问范围，闭包允许函数访问其定义时的作用域。

1、函数作用域

在JavaScript中，函数内部定义的变量只能在函数内部访问。

function outer() {
  const outerVar = "I am outside!";
  function inner() {
    const innerVar = "I am inside!";
    console.log(outerVar); // 可以访问外部变量
  }
  inner();
  console.log(innerVar); // 无法访问内部变量
}
outer();

2、闭包

闭包是指函数能够记住并访问其定义时的作用域，即使在函数执行结束后。

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
const counter = createCounter();
console.log(counter()); // 输出：1
console.log(counter()); // 输出：2

七、箭头函数

ES6 引入了箭头函数，箭头函数提供了一种更简洁的函数定义方式，并且不绑定自己的 this。

// 普通函数
const add = function(a, b) {
  return a + b;
};
// 箭头函数
const add = (a, b) => a + b;
console.log(add(2, 3)); // 输出：5

1、箭头函数语法

箭头函数的基本语法是 (参数) => { 函数体 }。

const greet = (name) => {
  console.log(`Hello, ${name}`);
};
greet("Alice"); // 输出：Hello, Alice

2、箭头函数与 `this`

箭头函数不绑定自己的 this，它会捕获定义时的 this 值。

const person = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`);
    }, 1000);
  }
};
person.greet(); // 输出：Hello, Alice

八、递归函数

递归函数是指函数自己调用自己，常用于解决分治问题或处理嵌套数据结构。

function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}
console.log(factorial(5)); // 输出：120

1、递归的基本结构

递归函数必须包含两个部分：基准情况和递归情况。

function recursiveFunction(param) {
  if (baseCondition) { // 基准情况
    return result;
  } else { // 递归情况
    return recursiveFunction(modifiedParam);
  }
}

2、递归函数示例

下面是一个计算斐波那契数列的递归函数。

function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(6)); // 输出：8

九、回调函数

回调函数是指作为参数传递给另一个函数的函数，常用于异步操作。

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: "Alice" };
    callback(data);
  }, 2000);
}
function handleData(data) {
  console.log(data);
}
fetchData(handleData); // 输出：{ name: "Alice" }

1、回调函数的定义

回调函数可以是匿名函数或预先定义的函数。

// 匿名函数
fetchData(function(data) {
  console.log(data);
});
// 预先定义的函数
function handleData(data) {
  console.log(data);
}
fetchData(handleData);

2、回调函数的应用

回调函数广泛应用于事件处理、异步编程、数组方法等场景。

// 事件处理
document.getElementById("myButton").addEventListener("click", function() {
  console.log("Button clicked!");
});
// 异步编程
setTimeout(function() {
  console.log("Executed after 2 seconds");
}, 2000);
// 数组方法
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled); // 输出：[2, 4, 6, 8]

十、异步函数与Promise

异步函数是指不会阻塞代码执行的函数，通常用于处理异步操作，如网络请求、定时器等。Promise 是一种用于处理异步操作的 JavaScript 对象。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: "Alice" };
      resolve(data);
    }, 2000);
  });
}
fetchData().then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});

1、Promise 语法

Promise 提供了 then 和 catch 方法，用于处理成功和失败的情况。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (success) {
    resolve(result);
  } else {
    reject(error);
  }
});
promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

2、异步函数（async/await）

ES8 引入了 async 和 await 关键字，使得异步代码看起来更像同步代码。

async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  return data;
}
fetchData().then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});

综上所述，JavaScript 提供了多种方式来执行函数，包括直接调用、事件触发、定时器调用、立即执行函数表达式（IIFE）等。了解这些不同的方式和相关概念，如函数参数与返回值、作用域与闭包、递归函数、回调函数、异步函数与 Promise，对于编写高效、可维护的 JavaScript 代码至关重要。