箭头函数

箭头函数

函数声明

箭头函数可以说是 ES6 很大的福利了，不管你是函数式爱好者还是面向对象开发者，函数是必须要用到的东西。之前声明函数需要使用 function，如下：

function hello() {
    console.log('say hello')
}

// 或

let hello = function() {
    console.log('say hello')
}

现在可以这样做了：

let hello = () => {
    console.log('say hello')
}

如果带参数该怎么做呢？

let hello = (name) => {
    console.log('say hello', name)
}

// 或者

l

et hello = name => {
    console.log('say hello', name)
}

TIP
如果只有一个参数，可以省略括号，如果大于一个参数一定要记得带括号

函数的声明和参数写的很清楚了，那么对于返回值有什么要注意的地方呢？

如果返回值是表达式

如果返回值是表达式可以省略 return 和 {}

  let pow = x => x * x

如果返回值是字面量对象

如果返回值是字面量对象，一定要用小括号包起来

  let person = (name) => ({
      age: 20,
      addr: 'Beijing City'
  })

其他

其他情况就要中规中矩的写好啦！

拓展（箭头函数中的this）

看上去箭头函数真的很漂亮，可是它有什么神秘之处吗？this，对，就是它。普通函数和箭头函数对 this 的处理方式是截然不同的。

let foo = {
    name: 'es',
    say: function() {
        console.log(this.name)
    }
}

console.log(foo.say()) // es

这是用普通函数的写法，say 在被调用之后，this 指向的是调用 say 方法的对象，显示是 foo 对象，所以 this === foo this.name 也就是 foo.name。

let foo = {
    name: 'es',
    say: () => {
        console.log(this.name, this)
    }
}
console.log(foo.say()) // undefined

因为箭头函数中对 this 的处理是定义时，this 的指向也就是 foo 外层的所指向的 window，而 window 没有 name 属性，所以结果是 undefined。
再举个例子

let oBtn=document.querySelector("#btn")
oBtn.addEventListener("click",function(){
	/*setTimeout(function(){
		console.log(this);//返回window对象
	},1000)*/
	/*setTimeout(function(){
		console.log(this);//返回oBtn对象(ES5中的做法)
	}.bind(this),1000)*/
	setTimeout(()=>{
		console.log(this);//返回oBtn对象(ES6中的做法)
	},1000)
})

总结

1、箭头函数中this指向定义时所在的对象，而不是调用时所在的对象

2、箭头函数不可以当作构造函数

3、箭头函数不可以使用arguments对象