es6-箭头函数

 

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

语法：
(参数1, 参数2, …, 参数N) => { 函数声明 }

单一参数可省略小括号；没有参数或者多个参数不能省略小括号
单一的函数声明，可省略大括号

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}
在一个简写体中，只需要一个表达式，并附加一个隐式的返回值。在块体中，必须使用明确的return语句。

sample
var func = x => x * x;
// 简写函数 省略return
var func = (x, y) => { return x + y; };

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

sample1:
var arr=[
"apple",
"banana",
"orang"
]
// 匿名函数
arr.map(function(fruit){
return fruit.length
});
//箭头函数-简写
arr.map(fruit => fruit.length)

//箭头函数-
arr.map((fruit)=>{return fruit.length})

 

注意事项：
a.返回对象字面量，用圆括号把对象字面量包起来
sample：
var func = () => { foo: 1 };
// Calling func() returns undefined!
var func = () => { foo: function() {} };
// SyntaxError: function statement requires a name

正确写法：
var func = () => ({foo: 1});

b.箭头函数在参数和箭头之间不能换行。
var func = ()
=> 1;
// SyntaxError: expected expression, got '=>'

sample:
var fact = (x) => ( x==0 ? 1 : x*fact(x-1) );
fact(5);

c.不能用new，箭头函数不能用作构造器

d.箭头函数不能用做生成器，不能使用yield 关键字，

箭头函数中的this，词法层面完成绑定，
1.call／apply 传入的上下文会被忽略
sample
var adder = {
base : 1,

add : function(a) {
var f = v => v + this.base;
return f(a);
},

addThruCall: function(a) {
var f = v => v + this.base;
var b = {
base : 2
};

return f.call(b, a);
}
};

console.log(adder.add(1)); // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2（而不是3 ——译者注）
2.不绑定arguments

3.this 作用域
箭头函数不会创建自己的this；它使用封闭执行上下文的this值。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：

//比较箭头函数和常规函数
function Person() {
// Person() 构造函数定义 `this`作为它自己的实例.
this.age = 0;

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

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

setTimeout(
// 在非严格模式, growUp()函数定义 `this`作为全局对象,
// 与在 Person()构造函数中定义的 `this`并不相同.
()=> {//return this.age;
console.log(this.age);}
, 1000);
}
var p = new Person();

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

5.对象字面量特殊的作用域
var obj={
num:1,
arrFun:()=>this.num,
f:function(){
return this.num;
}
}
obj.arrFun();//undefined
obj.f();//1

箭头函数实例：

var obj = {
  i: 10,
  b: () => console.log(this.i),
  c: function() {
    console.log( this.i);
  }
}
obj.b(); //undefined

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f;
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};
console.log(adder.add(1)(1));         // 输出 2


var obj = {
  i: 10,
  b: () => console.log(this.i),
  c: ()=>()=>console.log( this.i),
  d:function(){
    return ()=>console.log(this.i)
  },
  e:function(){
    console.log(this.i);
  }
}
obj.b(); //undefined
obj.c()(); //undefined
obj.d()(); //10
obj.e(); //10


var fact = (x) => ( x==0 ?  1 : x*fact(x-1) );
fact(5);       // 120