箭头函数

发表于 | 分类于 | 阅读次数:

箭头函数表达式的语法比函数表达式更短，并且不绑定自己的this，arguments，super或 new.target。这些函数表达式最适合用于非方法函数，并且它们不能用作构造函数。

基础语法

1
2
3
4
5
6
(param1,param2,...,paramN)=>{retrun expression}
//只有一个参数时，括号可以选择不加
（singleParam）=>{statements}
 singleParam=>{statements}
//当没有参数时，括号是必须的
（）=>{statements}

高级语法

1
2
3
4
5
6
7
8
9
10
//加括号的函数体返回对象字面表达式：
param => ({foo: bar})

//支持剩余参数和默认参数
(参数1, 参数2, ...rest) => {函数声明}
(参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}

//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

描述

引入箭头函数的作用：更简短的函数并且不绑定this

  • 更短的函数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var materials = [
     'Hydrogen',
      'Helium',
      'Lithium'
      ];
      materials.map(function(materials){
          return materials.lemght
      }); //[8,6,7]
      materials.map(maters=>{
          return materials.length
      }); //[8,6,7]
      materials.map(masters=>materials.length);
      // [8,6,7]

注：{}里表达式，需要 return,才会有返回值

  • 不绑定this
    在箭头函数出现之前，每一个新创建的函数都有自己的this（在构造函数中是一个新对象，在严格模式的函数调用中是undefined，如果该函数被称为‘对象方法’则是基础对象）
    1
    2