箭头函数

基础语法:

(参数1,参数2,参数3,...参数n) =>{函数声明}

//相当于:(参数1,参数2,参数3,...,参数n) =>{return表达式;}

(参数1,参数2,参数3,...)=> 表达式(单一)

//当只有一个参数时,圆括号是可选的:

(单一参数) = >{函数声明}

单一参数 =>{函数声明}

//没有参数的函数应该写成一对圆括号

() =>{函数声明}

 

高级语法:

//加括号的函数体返回对象字面量表达式

参数=>({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

 

更短的函数

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];
elements.map(fucntion(element){return element.length});
elements.map((element)=>{return element.lemgth});
elements.map(element =>{return element.length;});
element.map(element =>element.length) //如果只有一个return语句可以省略reutrn
如果我们只是需要length属性,我们可以使用参数解构
需要注意的是length 是我们想要获得的属性的名称,而lengthFootBArX 则是一个变量名
//可以替换成任何和达的变量名
elements.map(({"length":lengthFooBArx})=> lengthFooBArX);

在剪头含糊出现之前,每个新定义的函数都有自己的额this值(在构造函数的情况下一个新对象,在严格模式的函数调用中为undeinfed
如果该函数被作为"对象方法调用"则为基础对象等).

不绑定this 

function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age = 0;

  setInterval(function growUp() {
    // 在非严格模式, growUp()函数定义 `this`作为全局对象, 
    // 与在 Person()构造函数中定义的 `this`并不相同.
    this.age++;
  }, 1000);
}

var p = new Person();

function Person() {
  var that = this;
  that.age = 0;//在ECMAScript 3/5中，通过将this值分配给封闭的变量，可以解决this问题。

  setInterval(function growUp() {
    //  回调引用的是`that`变量, 其值是预期的对象. 
    that.age++;
  }, 1000);
}

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：
  }, 1000);
}

var p = new Person();

与严格模式的关系

鉴于 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略。

function Person() {
  this.age = 0;
  var closure = "123"
  setInterval(function growUp() {
    this.age++;
    console.log(closure)
  }, 1000);
}

var p = new Person();

function PersonX() {
  'use strict'
  this.age = 0;
  var closure = "123"
  setInterval(()=>{
    this.age++;
    console.log(closure)
  }, 1000);
}

var px = new PersonX();