es6 箭头函数【箭头表达式】

箭头函数，通过 => 语法实现的函数简写形式，C#/JAVA8/CoffeeScript 中都有类似语法。与函数不同，箭头函数与其执行下文环境共享同一个 this。如果一个箭头函数出现在一个函数对象内部，它会与这个函数共享 arguments 变量。

箭头表达式用来声明匿名函数，消除传统匿名函数的this指针问题。

应用：

var myArray = [1, 2, 3, 4, 5];//挑出来双数
console.log(myArray.filter(value => value % 2 == 0));

优势：消除了this关键字的问题

function getStock(name: string) {
    this.name = name;
    setInterval(() => {
        console.log("name is: "+this.name)
    }, 1000);
}

var stock = new getStock("IBM");//name is: IBM

 

1、函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象。

原理：this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正因为它没有this，所以也就不能用作构造函数。

例1：

function foo(){
    setTimeout(()=>{
        console.log("id:",this.id);
    },100);
}
foo.call({id:42}); //id: 42

setTimout的参数是一个箭头函数，100毫秒后执行。如果是普通函数，执行时this应该指向全局对象，

但是箭头函数导致this总是指向函数所在的对象。

例2：

var handler={
    id:"123456",
    init:function(){
        document.addEventListener("click",event=>this.doSomething(event.type),false);
    },
    doSomething:function(type){
        console.log("Handling "+type+" for "+this.id);
    }
}
handler.init();//Handling click for 123456

例3：chrome可能还不支持，

function Timer(){
    this.seconds=0;
    setInterval(()=>this.seconds++,1000);
}
var timer=new Timer();
setTimeout(console.log(timer.seconds),3100);//3

2、箭头函数没有this，没有arguments,没有super,没有new.target

例：箭头函数内部的arguments其实就是foo函数的arguments

    function foo(){
        setTimeout(()=>{
            console.log("args:",arguments);
        },100);
    }
    foo(2,4,6,8);//args: [2, 4, 6, 8]

3、箭头函数不可以当作构造函数。也就是说，不可以使用new命令，否则会抛出一个错误。

4、箭头函数不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。

5、箭头函数不可以用yield命令，因此箭头函数不能用作Generator函数。

 

其它例子

// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);

// Statement bodies
nums.forEach(v => {
  if (v % 5 === 0)
    fives.push(v);
});

// Lexical this
var bob = {
  _name: "Bob",
  _friends: ['jim'],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f)); // Bob knows jim
  }
};
bob.printFriends();

// Lexical arguments
function square() {
  let example = () => {
    let numbers = [];
    for (let number of arguments) {
      numbers.push(number * number);
    }

    return numbers;
  };

  return example();
}

square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]

 

More: 

https://egghead.io/courses/learn-es6-ecmascript-2015

 

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/6950083.html有问题欢迎与我讨论，共同进步。