箭头函数,通过 =>
语法实现的函数简写形式,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 bodiesvar odds = evens.map(v => v + 1);var nums = evens.map((v, i) => v + i);// Statement bodiesnums.forEach(v => { if (v % 5 === 0) fives.push(v);});// Lexical thisvar bob = { _name: "Bob", _friends: ['jim'], printFriends() { this._friends.forEach(f => console.log(this._name + " knows " + f)); // Bob knows jim }};bob.printFriends();// Lexical argumentsfunction 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:
本文作者,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:有问题欢迎与我讨论,共同进步。