ES6学习---箭头函数

Posted hzhjxx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6学习---箭头函数相关的知识,希望对你有一定的参考价值。

1语法和格式

语法非常简洁,箭头就是这个样:=>

原来的函数写法:

function show(){

  return 1;

}

 

变成箭头函数:

let show=()=>1; 

 

箭头左边的括号就是这个括号:

 技术图片 

1就是return1

技术图片

 

说白了,就是箭头左边是参数,右边是返回值。函数名用变量表示。

例:

let show=(a,b)=>a+b;

console.log(show(1,2));

技术图片

 

如果有多条语句:

()=>{

  语句;

  return

}

 

例:

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

技术图片

 

2需要注意的几点

2.1 this问题

let json={
    id:1,
    show:function(){
        alert(this.id);
    }
}
json.show();

技术图片

 

如果加个延迟:

let json={
    id:1,
    show:function(){
        setTimeout(function(){
            alert(this.id);
        },2000);        
    }
}
json.show();

技术图片

 

这是因为setTimeout是由window执行的,所以里面的this就是windowwindow没有定义id(在全局中用var定义的才属于window,用letconst不属于),所以是undefined

 

用箭头函数就可以解决这个问题:

let json={
    id:1,
    show:function(){
        setTimeout(()=>{
            alert(this.id);
        },2000);
    }
}
json.show();

技术图片

 

结论:

箭头函数中的this表示定义函数所在的对象,不再是运行时所在的对象。

 

2.2箭头函数中没有arguments

function fun1(){
    console.log(arguments);
}
fun1(1,2,3);

技术图片

 

let show=()=>{
    console.log(arguments);
}
show(1,2,3);

技术图片

 

可以用剩余参数...来解决:

let show=(...args)=>{
    console.log(args);
}
show(1,2,3);

技术图片

 

2.3箭头函数不能当作构造函数

function show(){
    this.name=‘abc‘;
}
let fun=new show();
console.log(fun.name);

技术图片

 

let show=()=>{
    this.name=‘abc‘;
}
let fun=new show();
console.log(fun.name);

技术图片

以上是关于ES6学习---箭头函数的主要内容,如果未能解决你的问题,请参考以下文章

es6学习笔记--箭头函数

ES6学习--箭头函数

ES6学习笔记之箭头函数

ES6学习笔记之箭头函数

ES6-11学习笔记--箭头函数

js学习笔记04-ES6函数(箭头函数与this),class