还在受JS的this指向问题困扰?来看看Es6的箭头函数

2022-09-08 14:51:26 浏览数 (1)

箭头函数

基本语法

代码语言:javascript复制
(x,y)=>{
    ...函数体

}
代码语言:javascript复制
//es6
let res = (x,y)=>{
    console.log(x,y)
}
res(2,3);

//es5
let res2 = function(x,y){
    console.log(x,y)

}
res2(2,3)

上面两种输出的结果是相等的,箭头函数相对于es6之前的function更加简洁,除了简洁这一点,箭头函数还有一个很重要的特性,箭头函数内部的this是由上下文决定的,什么意思? 看下示例

代码语言:javascript复制
let person = {
    name:'tz',
    sex:'m',
    age:14,
    show:function(){
             console.log(this.sex);
    }
}
person.show();//m

正常调用对象方法返回m 此时给show方法加上一个定时器的话

代码语言:javascript复制
show:function(){
        setTimeout(function(){
             console.log(this.sex);
        }, 2000)
        
    }
person.show();//undefind

结果返回undefind,设置因为普通函数会改变this指向的问题,我们在打印this看是否是这样

代码语言:javascript复制
show:function(){
        console.log(this)
        setTimeout(function(){
             console.log(this)
             console.log(this.sex);
        }, 2000)    
    }
person.show();//undefind

可以看到this由person变成了window所以最后结果是undefind

没有接触Es6之前我们或许会这样解决this指向的问题

代码语言:javascript复制
show:function(){
        console.log(this)
        var that = this
        setTimeout(function(){
             console.log(that)
             console.log(that.sex);
        }, 2000)    
    }

我们通过this保留了上一步的this结果正常输出

而在es6你只需要将function变成“=>”即可

代码语言:javascript复制
show:function(){
        console.log(this)
        // var that = this
        setTimeout(()=>{
             console.log(this)
             console.log(this.sex);
        }, 2000)    
    }

箭头函数语法

基本

代码语言:javascript复制
(args)=>{
  //函数体
}

括号代表要传递的参数 =>后面代表函数的执行体 如果参数只有一个是可以省略括号的

代码语言:javascript复制
args=>{
}

没有参数时必须加括号

代码语言:javascript复制
()=>{
  //函数体
}

当函数体只有一行语句并且为return时可以省略{}

代码语言:javascript复制
//省略写法
let res = (x,y)=>x y;

//正常写法
let res2 = (x,y)=>{
    return x y;
}
console.log(res(2,3));//5
console.log(res2(2,3));//5

总结

箭头函数没有自己的this,箭头函数的this不是在调用时决定的,而是在定义的时候处在的对象就是他的this 箭头函数看外出是否有函数,如果有外出函数的this就是箭头函数的this 如果没有this指向window

0 人点赞