ES6箭头函数

最新推荐文章于 2025-07-30 16:36:32 发布

原创最新推荐文章于 2025-07-30 16:36:32 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #前端

本文介绍了ES6的箭头函数，包括其不同语法形式，如单参数、无参数、多参数的情况，以及如何返回值。特别强调了箭头函数没有自己的this，它的this会从上一层作用域继承。此外，还探讨了箭头函数在事件处理和不同调用模式下this的指向问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

回顾:函数的字面量声明

var test = function(x){
               return x=2;
           }

箭头函数语法

语法1

(参数1, 参数2, …, 参数N) => { 函数体 }

var fn1 = (x,y)=>{return x+y;}
       console.log(fn1(2,3));//5

语法2

单个表达式省略{}

(参数1, 参数2, …, 参数N) => 表达式（单一）

相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

语法3

单个参数省略()

单一参数 => {函数声明}

(单一参数) => {函数声明} // 当只有一个参数时，圆括号是可选的

注意

1 没有参数的函数应该写成一对圆括号------() => {函数声明}

    let fn4=()=>{
            alert("没有参数")
        }

2 没有{}的箭头函数,相当于使用了return

3 有{}必须return 外面才能接收到返回的值

4 箭头函数如果要返回一个JSON对象，必须用小括号包起来 var test = ()=>({id:3, val=20}),箭头函数的花括号不要省略

例

1 函数体多条语句需要用到大括号

   //例如
   let fn3=(x,y)=>{
            if(typeof x=='number'&&typeof y=='number'){
                return x+y;
            }else{
                return 0
            }
        }
        console.log(fn3(2,"*"));//0
        console.log(fn3(2,7));//9

2 直接作为事件handler,给click绑定箭头函数

document.addEventListener('click', ev => {
    console.log(ev)
})

箭头函数的this

一般this的指向

1. 函数调用模式 this ---> window 函数名()

2. 方法调用模式 this ---> 调用方法的对象对象.方法名() obj ={say:function(){console.log(this)}}

3. 构造函数调用模式 this ---> 创建出来的实例 new 函数名()

4. 在元素事件中this----->指向当前节点对象

5. 箭头函数中this没有明确指向,会向上一级(宿主对象)寻找

箭头函数中的this

箭头函数中的this没有明确的指向.

如果在箭头函数中使用this, 会向上一级作用域中进行查找this,即宿主对象中查找

//箭头函数中对象的this指向
        let obj = {
            name: "张三",
            fn() {
                let fn1 = () => {
                    console.log(this);
                }
                fn1();
            }
        }

        obj.fn();//{name: '张三', fn: ƒ}