ES6-箭头函数

最新推荐文章于 2025-08-05 17:45:20 发布

原创最新推荐文章于 2025-08-05 17:45:20 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #javascript #前端

文章目录

1. 普通函数和箭头函数的定义
2.箭头函数的特殊之处

1. 普通函数和箭头函数的定义

        //普通函数
        var fn1 = function(){console.log('我是fn1函数')}
        fn1()
        //箭头函数（删掉function）
        var fn2 = function(){console.log('我是fn2函数')}

2.箭头函数的特殊之处

箭头函数某些时候可以省略（）

        var fn1 = ()=>{console.log('我没有形参')}
        fn1()
        var fn2 = a=>{console.log('我一个形参：',a)} //可以不写
        fn2(100)
        var fn3 = (a,b)=>{console.log('我两个形参：',a, b)}
        fn3(100,200)

箭头函数某些时候可以省略{ }
当代码只有一句话的时候，可以不写{ }
并且会自动把这一句话的结果当作函数的返回值

var fn2 = ( a , b) => a+b
console.log(fn1(10,20))

箭头函数没有arguments

		//箭头函数
        var fn1 = () =>{
            console.log(arguments) //arguments is not defined
        }
        fn1(100,200,300)
       //普通函数
        var fn2 =function (){
            console.log(arguments) //正确
        }
        fn2(100,200,300)

箭头函数没有this
箭头函数内的this就是外部作用域的this

        var obj = {
            fn:function(){console.log(this)},
            fn2:()=>{console.log(this)}
        }
        obj.fn()//this因为fn函数被obj调用，所以this是obj
        obj.fn2()//因为是箭头函数，内部没有this，就是外部作用域的this（window）