箭头函数
一.基本用法
-
箭头函数 =>
var f = v => v;
上边的箭头函数等同于
var f = function(v){ retrun v; }
-
如果箭头函数不需要参数或需要多个参数,就用一个圆括号代表参数部分.
var f = () => 5; //等同于 var f = function(){ return 5 }; var sum = (num1, num 2) => num1 + num2; //等同于 var sum = function(num1, num2){ return num1 + num2; };
-
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回.
var sum = (num1, num2) => { return num1 + num2;}
-
由于大括号被解析成代码块,所以如果箭头函数直接返回一个对象,必须在对象外边加上括号.
var getTempItem = id => ({ id: id, name: "Temp"});
-
箭头函数可以与变量解构结合使用.
const full = ({ first, last }) => first + ' ' + last; //等同于 function full(person){//person为对象 return person.first + ' ' + person.last; }
-
箭头函数使得表达式更加简洁
const square = n => n * n;
-
箭头函数的一个用处是简化回调函数
//正常函数写法 [1,2,3].map(function(x){ return x * x; }); //箭头函数写法 [1,2,3].map(x => x * x);
-
rest参数与箭头函数结合的例子
const numbers = (...nums) => nums; numbers(1,2,3,4,5); //[1,2,3,4,5] const headAndTail = (head, ...tail) => [head, tail]; headAndTail(1, 2, 3, 4, 5); //[1,[2,3,4,5]]
二.注意点
-
函数体内的
this
对象,就是定义时所在的对象, 而不是使用时所在的对象. 简单理解,this指代当前箭头函数父级函数内部的thisfunction foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; foo.call({ id: 42 }); // id: 42
setTimeout
的参数是一个箭头函数,这个箭头函数的定义生效是在foo
函数生成时, 而他的真正执行要等到100毫秒后. 如果是普通函数, 执行时this
应该指向全局对象window
,这时应该输出21
. 但是, 箭头函数导致this
总是指向函数定义生效时所在的对象({id: 42}), 所以输出的是42
. -
箭头函数不能使用new来构建对象(构造函数),箭头函数不能作为构造函数来使用.
-
不可以使用
arguments
对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。 -
不可以使用
yield
命令,因此箭头函数不能用作Generator函数。 -
除了
this
,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:arguments
、super
、new.target
。