Javascript箭头函数详解（最全面）

轩辰q

已于 2024-11-28 16:50:19 修改

阅读量1k

点赞数 23

文章标签：前端 javascript 开发语言

于 2024-11-28 16:49:40 首次发布

本文链接：https://blog.csdn.net/xuanfather/article/details/144115388

版权

Javascript箭头函数

箭头函数（Arrow Function）是 JavaScript 在 ES6 中引入的一种简化函数定义的语法。它使用 => 符号，提供了一种更简洁的方式来编写函数表达式。

在javascript当中，创建函数有四种基本方式：

函数声明
函数表达式
箭头函数

首先我们先来介绍一下js当中创建函数的三种方式；

函数声明

使用函数声明创建函数，格式如下：

 function name(parameter1, parameter2, ... parameterN) {
   ...body...
 }
   
 function showMessage() {
   alert( 'Hello everyone!' );
 }
     
 showMessage();

全局函数声明对于整个脚本来说都是可见的，不管函数定义在脚本的什么位置
函数提升：在代码执行时，解释器会寻找函数声明将其提升到当前作用域的顶部，并创建这些函数。这样便可以在函数定义之前调用。

函数表达式

由于js当中函数就是一个对象（Object），因此我们可以通过赋值的方式将函数存储在一个变量内，这种方式被称为函数表达式。

 let func = function(){
     ...body...
 };
     
 let sayHi = function() {
   alert( "Hello" );
 };
     
 sayHi()

函数表达式的function关键字没有函数名
函数表达式允许没有函数名，这类函数一般称为匿名函数
函数表达式声明函数需要在表达式末尾加上;,表示这是一个表达式而不是函数声明。
与函数声明不同的是，函数表达式不存在函数提升的特性，函数表达式是在代码执行到达时被创建，并且仅从那一刻起可用

由此再回到我们的箭头函数的定义，箭头函数提供了一种更简洁的方式来编写函数表达式。因此函数表达及的所有形式都可以通过箭头表达式来简化。

箭头表达式

箭头表达式基本语法：

 (param1, param2, ..., paramN) => expression

如果只有一个参数，括号可以省略：param => expression
如果没有参数，需要用空括号：() => expression
如果expression包含多行，则需要使用大括号{}，且需要一个显示的return语句

三种函数定义转换

由于函数声明可以和函数表达式互相转变，函数表达式又可以简化为箭头表达式，因此函数声明和函数表达式都可以转变为箭头表达式

// 函数声明写法
 function add(a, b) {
     return a + b;
 }
 
 // 函数表达式写法
 let add = function(a, b){
     return a + b;
 }
 
 // 箭头函数写法
 let add = (a, b) => a + b;
 
 console.log(add(2, 3)); // 输出 5

函数表达式与箭头函数转换

函数表达式简化为箭头函数

function ask(question, yes, no) {
   if (confirm(question)) yes();
   else no();
 }
 
 ask(
   "Do you agree?",
   function() { alert("You agreed."); },
   function() { alert("You canceled the execution."); }
 );
 
 // 简化为箭头函数
 ask(
   "Do you agree?",
   () => alert("You agreed."),
   () => alert("You canceled the execution.")
 );

当函数表达式只使用一次且不需要重复使用时，可以简化函数名，这种函数也被称为匿名函数。

如数组当中的filter函数，需要传入一个函数由于过滤规则：

let results = arr.filter(function(item, index, array) {
   // 如果 function返回true item 被 push 到 results，迭代继续
   // 如果什么都没找到，则返回空数组
 });

item 是元素。
index 是它的索引。
array 是数组本身。

函数声明和函数表达式创建过滤函数：

// 函数声明
 function filters(item, index, array) {
     return item >= 1 && item <= 4 // 大于1小于4过滤规则
 }
 // 函数表达式
 let filters = function (item, index, array) {
     return item >= 1 && item <= 4
 }
 
 let results = arr.filter(filters) // 传入回调函数filter

将函数表达式采用箭头函数替换。

 // 函数表达式
 let filters = function (item, index, array) {
     return item >= 1 && item <= 4
 }
 // 箭头函数
 let filters = (item, index, array) => item >= 1 && item <= 4
 
 let results = arr.filter(filters) // 传入回调函数filter

用于该函数function只需要在filter函数内使用无需被外部调用,因此我们可以使用匿名函数实现

let results = arr.filter(function (item, index, array) { // 函数表达式表示匿名函数
     return item >= 1 && item <= 4
 })
 // 箭头函数表示匿名函数
 let results = arr.filter((item,index,array)=>item >= 1 && item <= 4)

综上所述，箭头函数的使用场景是可以简化匿名函数和简化函数表达式

函数表达式和箭头函数区别

共同点

都可以表示匿名函数。
都可以用作回调函数、赋值给变量、立即执行等。

不同点

语法简洁性：箭头函数更简洁。
this 绑定：
- 函数表达式有自己的 this，会根据调用方式动态绑定。
- 箭头函数没有自己的 this，它会继承外层作用域的 this。

this区别案例：

// 使用函数表达式
 const obj1 = {
     name: "Alice",
     greet: function () {
         setTimeout(function () {
             console.log(this.name); // 输出 undefined 或引发错误
         }, 1000);
     },
 };
 
 // 使用箭头函数
 const obj2 = {
     name: "Alice",
     greet: function () {
         setTimeout(() => {
             console.log(this.name); // 输出 Alice
         }, 1000);
     },
 };
 
 obj1.greet();
 obj2.greet();