ES6中的箭头函数

一.基本用法

1.在ES6 允许使用“箭头” => 定义函数。

//ES6箭头函数写法
const print1=(a,b)=>{
     console.log(a,b); 
}
print1(10,20)
//等同于
function print(a,b){
     console.log(a,b);
}
print(10,20);

2.参数只有一个的时候，可以省略小括号

const print = num => {
     console.log('接收的参数为',num)
}
print(10)

3.如果只有一条返回语句的时候，可以省略{}和return

const isOdd = num => num % 2 != 0;
console.log(isOdd(3))
console.log(isOdd(4))

只有一条返回语句的时候，返回为一个对象是一种特殊情况,加上()成一个表达式

const obj = (a,b) =>  ({a : a,b : b})
console.log(obj(10,20))

4.this的指向

4.1 在js中this指向

• 1.直接调用函数，this指向window
• 2.通过对象的形式调用，this指向该对象
• 3.通过new关键字调用，this指向新创建的对象
• 4.如果是DOM事件函数，this指向事件源
• 5.如果是apply、call、bind调用函数，this指向绑定的对象

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

const func = () => {
     console.log(this) //Window
}
func()

正是因为箭头函数没有this指向，所以导致内部的this就是外层代码块的this，下面的代码中外层代码块method的this指向的是obj的对象，所以箭头函数中的this也是指向的是obj的对象

const obj = {
	method : function(){
	const func = () => {
	console.log(this)  //object
}
func()
}
}
obj.method()

5.箭头函数不能作为构造函数，不能使用new

//构造函数如下：
function Person(p){
    this.name = p.name;
}
//如果用箭头函数作为构造函数，则如下
var Person = (p) => {
    this.name = p.name;
}

由于this必须是对象实例，而箭头函数是没有实例的，此处的this指向别处，不能产生person实例，自相矛盾。

		const obj = {
			// fun : func,
			method : function(){
				const func = () => {
					console.log(this)  //object
				}
				func()
			}
		}
obj.method()
console.log(func.prototype)   //原型为undefined

箭头函数没有原型，占用的空间将会非常小

二.箭头函数的使用场景

• 事件处理函数
• 异步处理函数
• 其他临时处理函数
• this需要指向外层的函数时候
• 在不影响代码前提，保证代码简介，回调函数(ES5)

const arr = [1,854,51,48,763];
const result = arr.filter(num => num % 2 !=0)
				.map(num => num * 2)
				.reduce((a,b) => a + b)
console.log(result);

三面试重点：

3.1.箭头函数没有this，arguments，target，但是你非要使用，里面的this，arguments，target指向外层的函数

3.2箭头函数中的this,arguments,target指向外层的普通函数

喜欢小编的可以关注点一点。

小编虽然不能陪你一生，但能让你的基础知识满满登登。