es6中箭头函数用法

最新推荐文章于 2022-04-26 01:40:44 发布

原创最新推荐文章于 2022-04-26 01:40:44 发布 · 324 阅读

1 ·

CC 4.0 BY-SA版权

es6 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了JavaScript中箭头函数的基本语法及其与传统函数表达式的区别，重点解释了箭头函数中this关键字的行为特点。

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

箭头函数表达式的语法比函数表达式更短，并且没有自己的this，arguments，super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。

第一种情况:形参的情况，没有形参的时候()不能省略

let fun = ()=>console.log("箭头函数")
fun()

相当于es5中

var fun = function(){
    console.log("箭头函数")
}
fun()

第二种情况:只有一个形参的时候，()可以省略

1.let fun2 = a=>console.log(a)
fun2(100)

2.let fun2 = (a)=>console.log(a)
fun2(100)

第三种情况：两个以及两个以上的形参的时候()不能省略

let fun3 = (a,b)=>console.log(a,b)

fun3(10,20)

第四种函数体内的情况，函数体内只有一条语句或者是表达式{}可以省略

let fun4 = (a,b)=>console.log(a,b)
fun4("你好","世界")

第五种函数体内的情况，内部执行了return 语句不可以加{}自动返回，如果加了{}就必须手动返回return

let fun5 = (a,b)=> return a+b
console.log(fun5(1,2))

let fun5 = (a,b)=> {
            return a+b
        }
console.log(fun5(1,2)

第五种函数不止一条语句或者是表达式的情况{}不可以省略

let fun6 = (a,b)=>{
    console.log(a,b)
    return a+b
}
fun6 (10,20)

关于箭头函数中的this问题，
普通函数中的this:
this指向的是执行环境中的this
箭头函数中的this
我们要认识到箭头函数中没有自己的this，它是继承下来，默认的指向在定义它所在的对象，而不是执行的对象。没有找到对象，默认执行window
那么我们来看下以下几种情景：
HTML

        <button id="btn1">按钮1</button>
        <button id="btn2">按钮2</button>

javascript

let btn1 = document.getElementById("btn1")
let btn2 = document.getElementById("btn2")
let obj = {
        getAcion:function(){
                console.log(this) //第一行 this=>obj
                btn2.onclick =()=>{
                    console.log(this)//第二行 this=>obj
                }
            }
        }
        obj.getName()

我们来思考以上这上面的代码,我们在”第一行”输出的this是obj这个应该没有问题吧。那么在箭头函数中定义的是没有自己this,它只能是继承下来,那么”第二行”中的this就继承了第一行的this,所以指向的obj

let btn1 = document.getElementById("btn1")
let btn2 = document.getElementById("btn2")
let obj = {
        getAcion:()=>{
                console.log(this) //第三行 this=>window
                btn2.onclick =()=>{
                    console.log(this)//第四行 this=>widown
                }
            }
        }
        obj.getName()

我们来看下以上的代码,这个getAcion变成了一个箭头函数,同理它没有自己的this，只能向上找，它并没有找到function这种单独的作用域，那么这个时候它的this指向的就是window，在”第四行”就继承了”第三行”的this，所以这个时候this=>window。

那么我们现在来看下，网上比较流行的版本和案例：

//定义一个对象
    var obj = {
        x:100,//属性x
        show(){
            //延迟500毫秒，输出x的值
            console.log(this) //第五行 this=>obj
            setTimeout(
               //不同处：箭头函数
               () => { console.log(this.x)}, 第六行 this=>obj
               500
            );
        }
    };
    obj.show();//打印结果：100