Do you know JavaScript function expressions?
函数表达式是 JavaScript 中定义函数的一种方式,与函数声明不同,函数表达式不会在解析代码时提升(hoist),而是在执行到该表达式时才会被创建。函数表达式有多种形式,本文将详细介绍各种函数表达式及其特点。
匿名函数表达式是没有名字的函数表达式,常用于将函数赋值给变量:
const sayHello = function() {
console.log("Hello, world!");
};
sayHello(); // 输出 "Hello, world!"
在这个例子中,function() 定义了一个匿名函数,并将其赋值给变量 sayHello。
命名函数表达式是带有名字的函数表达式,这个名字只能在函数内部使用:
const factorial = function fac(n) {
return n <= 1 ? 1 : n * fac(n - 1);
};
console.log(factorial(5)); // 输出 120
在这个例子中,fac 是函数的名字,但只能在函数体内部使用,外部通过变量 factorial 来调用。
立即执行函数表达式是一种特殊的函数表达式,定义之后立即执行:
(function() {
console.log("This function runs immediately!");
})();
或
(function(name) {
console.log("Hello, " + name + "!");
})("world");
IIFE 通常用于创建一个新的作用域,以避免变量污染全局命名空间。
箭头函数是 ES6 引入的一种更简洁的函数表达式,没有自己的 this,arguments,super 或 new.target 绑定,常用于简化代码:
const add = (a, b) => a + b;
console.log(add(2, 3)); // 输出 5
const sayHello = () => {
console.log("Hello, world!");
};
sayHello(); // 输出 "Hello, world!"
高阶函数是接收一个或多个函数作为参数,或返回一个函数的函数:
const multiply = (x) => (y) => x * y;
const double = multiply(2);
console.log(double(5)); // 输出 10
在这个例子中,multiply 是一个高阶函数,它返回一个新的函数。
回调函数是作为参数传递给另一个函数的函数,通常用于异步操作:
function doSomething(callback) {
console.log("Doing something...");
callback();
}
doSomething(() => {
console.log("Callback executed!");
});
在这个例子中,doSomething 函数接收一个回调函数 callback 并在其内部调用。
生成器函数是使用 function* 关键字定义的,可以通过 yield 关键字生成一系列的值:
const generator = function* () {
yield 1;
yield 2;
yield 3;
};
const gen = generator();
console.log(gen.next().value); // 输出 1
console.log(gen.next().value); // 输出 2
console.log(gen.next().value); // 输出 3
生成器函数表达式可以是匿名的或命名的,用于生成迭代器对象。
异步函数是使用 async 关键字定义的,返回一个 Promise 对象,可以使用 await 关键字等待异步操作完成:
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
};
fetchData().then(data => console.log(data));
在这个例子中,fetchData 是一个异步函数,用于执行异步操作并返回结果。