一、基本用法
特点:保证上下文this指针一致 ES6 允许使用“箭头”(=>)定义函数。 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
var f = ( ) => 5 ;
console. log ( f ( ) ) ;
var f = function ( ) { return 5 ; }
console. log ( f ( ) ) ;
var sum = ( num1, num2 ) => num1+ num2;
console. log ( sum ( 1 , 2 ) ) ;
var sum = function ( num1, num2 ) {
return num1+ num2;
}
console. log ( sum ( 1 , 2 ) ) ;
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。 由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
let obj = ( ) => ( { a: 1 , b: 2 } ) ;
console. log ( obj ( ) ) ;
let obj = ( ) => { a: 1 , b: 2 } ;
console. log ( obj ( ) ) ;
二、箭头函数的写法
1. 没有返回值
(1)不带参数
let data = ( ) => {
}
(2)带参数
let data1 = function ( a ) {
}
let data2 = a => {
}
let data3 = function ( a, b ) {
}
let data2 = ( a, b ) => {
}
2. 有返回值
let d1 = ( ) => {
return 123 ;
}
let d2 = ( ) => 123 ;
let d3 = ( ) => ( { a: 1 , b: 2 } ) ;
console. log ( d3 ( ) ) ;
let d3 = ( ) => { a: 1 , b: 2 } ;
console. log ( d3 ( ) ) ;
3. 对象上的函数es6缩写
let stus = {
eat ( ) {
}
}
三、箭头函数可以与变量解构结合使用
const obj= { first: 1 , last: 2 } ;
const full = ( { first, last} ) => first+ ' ' + last;
console. log ( full ( obj) ) ;
function full ( person ) {
return person. first+ ' ' + person. last;
}
console. log ( full ( obj) ) ;
四、箭头函数简化回调函数
[ 1 , 2 , 3 ] . map ( function ( x ) {
return x* x;
} ) ;
[ 1 , 2 , 3 ] . map ( x => x* x) ;
五、rest 参数与箭头函数
const numbers = ( ... nums) => nums;
console. log ( numbers ( 1 , 2 , 3 , 4 , 5 ) ) ;
const a = ( head, ... tail ) => [ head, tail] ;
console. log ( a ( 1 , 2 , 3 , 4 , 5 ) ) ;
六、计时器里面的箭头函数的使用
let obj = {
sleep : function ( ) {
console. log ( this ) ;
setTimeout ( function ( ) {
console. log ( this ) ;
} , 1000 ) ;
}
} ;
obj. sleep ( ) ;
计时器里面的this指针指的是window,那么怎样让this指针指向当前对象呢?
let obj = {
sleep : function ( ) {
console. log ( this ) ;
setTimeout ( ( ) => {
console. log ( this ) ;
} , 1000 ) ;
}
} ;
obj. sleep ( ) ;
可以使用箭头函数来实现,因为箭头函数可以保证上下文this指针一致。
七、箭头函数使用注意点
(1)箭头函数没有自己的this对象。 (2)不可以当作构造函数,也就是说,不可以对箭头函数使用new命令,否则会抛出一个错误。 (3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。 (4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。 对于普通函数来说,内部的this指向函数运行时所在的对象,但是这一点对箭头函数不成立。它没有自己的this对象,内部的this就是定义时上层作用域中的this。也就是说,箭头函数内部的this指向是固定的,相比之下,普通函数的this指向是可变的。
八、箭头函数不适用场景
(1)第一个场合是定义对象的方法,且该方法内部包括this。
let stu = {
sleep : ( ) => {
console. log ( this ) ;
}
}
stu. sleep ( ) ;
}
(2)第二个场合是需要动态this的时候,也不应使用箭头函数。
var button = document. getElementById ( 'press' ) ;
button. addEventListener ( 'click' , ( ) => {
this . classList. toggle ( 'on' ) ;
} ) ;
上面代码运行时,点击按钮会报错,因为button的监听函数是一个箭头函数,导致里面的this就是全局对象。如果改成普通函数,this就会动态指向被点击的按钮对象。
九、箭头函数嵌套问题
let fun= {
sleep ( ) {
console. log ( this ) ;
return ( ) => {
console. log ( this ) ;
}
}
}
fun. sleep ( ) ( ) ;