深入探讨JavaScript函数（一）https://developer.aliyun.com/article/1430135
异步函数
JavaScript中的异步函数是非常重要的，因为它们允许您处理延迟执行的任务，如网络请求、文件读取和定时器。
1. 回调函数
回调函数是最常见的异步操作处理方式，用于在异步操作完成后执行相应的操作。
function fetchData(callback) { setTimeout(function() { const data = "Data received"; callback(data); }, 1000); } function processReceivedData(data) { console.log("Processing: " + data); } fetchData(processReceivedData);
在这个示例中，fetchData函数使用回调函数来处理异步获取的数据。
2. Promise
ES6引入了Promise，它是一种更强大的异步处理机制，用于处理异步操作的成功或失败状态。
function fetchData() { return new Promise(function(resolve, reject) { setTimeout(function() { const random = Math.random(); if (random < 0.5) { const data = "Data received"; resolve(data); } else { const error = "Error occurred"; reject(error); } }, 1000); }); } fetchData() .then(function(data) { console.log("Success: " + data); }) .catch(function(error) { console.error("Error: " + error); });
Promise允许您更好地管理异步操作的状态，包括成功和失败情况。
3. async/await
ES2017引入了async和await关键字，使异步代码看起来更像同步代码，从而提高可读性。
function fetchData() { return new Promise(function(resolve, reject) { setTimeout(function() { const data = "Data received"; resolve(data); }, 1000); }); } async function processAsyncData() { try { const data = await fetchData(); console.log("Success: " + data); } catch (error) { console.error("Error: " + error); } } processAsyncData();
使用async和await关键字，您可以在异步操作完成后继续执行同步代码，而无需嵌套回调。
函数式编程
函数式编程是一种编程范式，强调使用纯函数、不可变性和高阶函数来处理数据。JavaScript天然支持函数式编程，因为它是一门多范式的语言。
1. 纯函数
纯函数是指输入相同，输出也相同，没有副作用的函数。纯函数不会修改传递给它的参数，也不会更改全局状态。
function add(a, b) { return a + b; } const result = add(3, 4); // 结果为 7，没有副作用
纯函数在函数式编程中非常重要，因为它们可预测、可测试，且易于组合。
2. 不可变性
不可变性是指数据一旦创建就不能被修改。在JavaScript中，字符串和数字等基本数据类型是不可变的，而数组和对象等复杂数据类型是可变的。
const numbers = [1, 2, 3]; const newNumbers = [...numbers, 4]; // 创建新数组，而不是修改原数组 console.log(numbers); // [1, 2, 3] console.log(newNumbers); // [1, 2, 3, 4]
使用不可变性可以减少错误，提高代码可维护性。
3. 高阶函数
高阶函数是函数式编程的核心。它们可以接受其他函数作为参数，或者返回一个函数。
const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = numbers.map(function(number) { return number * 2; }); console.log(doubledNumbers); // [2, 4, 6, 8, 10]
在这个示例中，map是一个高阶函数，接受一个函数作为参数，用于对数组中的每个元素执行操作。
继承和闭包
JavaScript中的继承是通过原型链和闭包来实现的。原型链允许对象继承其他对象的属性和方法，而闭包允许创建私有变量和方法。
1. 原型链继承
在JavaScript中，每个对象都有一个原型（prototype）。原型是一个对象，包含该对象的属性和方法。当您访问对象的属性或方法时，JavaScript引擎会沿着原型链查找，以找到匹配的属性或方法。
function Animal(name) { this.name = name; } Animal.prototype.speak = function() { console.log(this.name + " makes a sound"); }; function Dog(name) { Animal.call(this, name); } Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog; Dog.prototype.bark = function() { console.log(this.name + " barks"); }; const dog = new Dog("Buddy"); dog.speak(); // 输出 "Buddy makes a sound" dog.bark(); // 输出 "Buddy barks"
在这个示例中，Dog继承了Animal的属性和方法，通过原型链实现。
2. 闭包
闭包是指函数可以访问其定义外部作用域的变量。这使得函数可以保留对外部变量的引用，即使外部作用域已经结束执行。
function counter() { let count = 0; return function() { count++; console.log(count); }; } const increment = counter(); increment(); // 输出 1 increment(); // 输出 2
在这个示例中，counter函数返回一个闭包，它可以访问外部作用域中的count变量。
this关键字
JavaScript中的this关键字表示当前执行上下文中的对象。this的值取决于函数是如何被调用的。
1. 默认绑定
默认情况下，this关键字在全局作用域中指向全局对象（在浏览器中是window对象）。
function greet() { console.log("Hello, " + this.name); } const person = { name: "Alice", sayHello: greet }; person.sayHello(); // 输出 "Hello, Alice"
在这个示例中，this在person.sayHello被调用时指向person对象。
2. 显式绑定
您可以使用函数的call、apply或bind方法来显式绑定this的值。
function greet() { console.log("Hello, " + this.name); } const person = { name: "Alice" }; greet.call(person); // 输出 "Hello, Alice"
使用call方法，您可以将this关键字绑定到person对象。
3. 箭头函数
箭头函数不会改变this的值，它会捕获外部函数的this值。
function greet() { console.log("Hello, " + this.name); } const person = { name: "Alice", sayHello: greet }; const greetArrow = () => { console.log("Hello, " + this.name); }; person.sayHello(); // 输出 "Hello, Alice" greetArrow.call(person); // 输出 "Hello, Alice"
在这个示例中，greetArrow的this值与person.sayHello中的this值相同。
4. 构造函数
当使用new关键字调用函数时，this关键字指向新创建的对象。
function Person(name) { this.name = name; } const alice = new Person("Alice"); console.log(alice.name); // 输出 "Alice"
Person函数使用this关键字来创建新的alice对象，并将name属性赋值给它。
ES6模块系统
ES6引入了模块系统，使JavaScript可以轻松地管理和导入/导出模块。模块系统提供了一种更好的方式来组织和重用代码。
1. 导出模块
在一个模块中，您可以使用export关键字将变量、函数、类或对象导出到其他模块。
// math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b;
2. 导入模块
在另一个模块中，您可以使用import关键字导入模块中的导出内容。
// app.js import { add, subtract } from './math.js'; console.log(add(3, 4)); // 输出 7 console.log(subtract(5, 2)); // 输出 3
使用模块系统，您可以更轻松地将代码拆分为多个文件，以提高可维护性和可读性。
结论
JavaScript中的函数是一项强大的特性，可以用于多种任务，包括创建模块化的代码、处理数据、控制流程、实现继承和闭包，以及处理异步操作。深入理解和熟练使用函数是成为一名优秀的JavaScript开发者的关键。希望本文中的内容能够帮助您更好地理解和利用JavaScript中的函数。
![[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635463/20241109/c55917b4a28342b78633c9da58d86e30.png?x-oss-process=image/resize,h_160,m_lfit)