浅析一下：JavaScript 中的匿名函数和箭头函数

最新推荐文章于 2024-06-12 11:59:04 发布

前端--小黑

最新推荐文章于 2024-06-12 11:59:04 发布

阅读量410

点赞数 5

文章标签： javascript 开发语言 es6

本文链接：https://blog.csdn.net/m0_69429961/article/details/137670629

版权

JavaScript 提供了多种定义和使用函数的方法。两种常用的函数类型是匿名函数和箭头函数。在这篇博客中，我们浅聊一下这两个函数。

匿名函数

匿名函数是没有任何名称的函数。这些函数通常是内联定义的，并且可以分配给变量或作为参数传递给另一个函数。当您需要快速函数定义并且无意在代码中的其他地方重用它时，匿名函数非常有用。

语法


// Anonymous function assigned to a variable
var myFunction = function() {
  console.log("This is an example of an anonymous function.");
};

// Invoking the anonymous function
myFunction();

在此示例中， myFunction 是分配给变量的匿名函数，您可以使用变量名称调用该函数。

用例

回调函数

 Using an anonymous function as a callbacksetTimeout(function() {  console.log("This is invoked after 2 seconds");}, 2000);
在上面的示例中，匿名函数作为另一个函数的参数给出。

事件处理程序

 Anonymous function as an event handlerdocument.querySelector("Button").addEventListener("click", function() {  console.log("Button clicked!");});
当您想动态附加事件处理程序时，可以使用匿名函数。

立即调用函数表达式 (IIFE)

 IIFE using an anonymous function(function() {  console.log("This is an example of IIFE.");})();
如果您想创建一个函数并在声明后立即执行它，那么您可以使用匿名函数，如上例所示。

数组方法

 Using anonymous function with array map methodconst numbers = [1, 2, 3]const doubledNumbers = numbers.map(function(num) {  return num * 2;});
console.log(doubledNumbers); // [2, 4, 6]
您可以将匿名函数与数组方法一起使用，例如 map、 filter和 reduce。

优点

在函数简单且不会被重用的场景中，匿名函数通常更简洁。
当在 IIFE 模式中使用匿名函数时，它们可以降低全局范围内变量冲突的风险。

局限性

匿名函数会降低代码的可读性。
对于匿名函数，调试可能更具挑战性，因为它们缺乏有意义的名称。
匿名函数有自己的 this 绑定，这可能会导致在某些上下文中出现意外行为。

箭头函数

ECMAScript 6 (ES6) 中引入的箭头函数为编写函数提供了更简洁的语法。它们对于短函数和单行函数特别有用。

语法

Basic arrow functionconst add = (a, b) => {  return a + b;};

如果函数体中有单个表达式，则可以省略大括号 {} 和 return 关键字，如下例所示。

const add = (a, b) => a + b;

如果函数中有单个参数，则可以省略参数两边的括号，如下例所示。

const square = x => x * x;

对于没有参数的函数，您仍然需要包含空括号，如下例所示。

const randomNumber = () => Math.random();

`this` 箭头函数中的词法

箭头函数最重要的特征之一是它们没有自己的 this 绑定。相反，它们 this 从父作用域继承。在使用方法内的事件处理程序或回调时，此行为特别有用。

const obj = {  name: "John",  greet: () => {    console.log(`Hello, ${this.name}`); // Lexical 'this' refers to the global scope, not obj  }};
obj.greet(); // Output: Hello, undefined

在上面的示例中，箭头函数 greet 没有自己的 this 绑定，因此它使用 this 其父作用域（即全局作用域）中的值。由于 name 未全局定义，因此它输出 undefined.

箭头函数的用例

数组操作

const numbers = [1, 2, 3, 4, 5];
Using regular functionconst squared = numbers.map(function (num) {  return num * num;});
Using arrow functionconst squaredArrow = numbers.map(num => num * num);

回调函数

const numbers = [1, 2, 3, 4, 5, 6];
Using regular functionconst evenNumbers = numbers.filter(function(num) {  return num % 2 === 0;});
Using arrow functionconst evenNumbersArrow = numbers.filter(num => num % 2 === 0);

异步操作

const fetchFromAPI = () => {  return new Promise((resolve, reject) => {    fetch('https://api.example.com/data')      .then(response => response.json())      .then(data => resolve(data))      .catch(error => reject(error));  });};
fetchFromAPI().then(data => console.log(data));