ES6 【箭头】函数

今天，我们从几个问题入手，了解ES6箭头函数

• ES6箭头函数是什么？
• ES6箭头函数怎么用？
• ES6的箭头函数的this指向？
• ES6箭头函数面试题。

一 ，ES6箭头函数是什么？

ES6中允许使用=>来定义函数。箭头函数相当于匿名函数，并简化了函数的定义，其好处有 简明的语法,隐式返回，不绑定this

二，ES6箭头函数怎么用？

箭头函数的语法:

（参数一，参数二 ...）=>{函数体}

Tips:

• 如果形参只有一个时，可以省略小括号
• 函数体如果只有一条语句时，则花括号可以省略，函数的返回值为该条语句的执行结果。
  形参只有一个，省略小括号的情况

	//当形参只有一个参数时，注意，当没有参数时，小括号不可省略
	let demo = num =>{
		return num +1;
	}
	console.log(demo(1));//返回结果为 2；

函数体只有一条语句的情况

	let demo = (a,b) =>  a + b;//此时，a+b默认为return的值，可省略return
	console.log(demo(1,2));//输出结果为 3;

两种情况都存在时

	let demo = a => a + 1;
	console.log(demo(1));//输出结果为 1;

三，ES6的箭头函数的this指向？

箭头函数，不仅仅是为了让函数更加优美简洁，还有一个作用是与this的指向有关

ES6之前的普通函数中：this的指向是函数被调用的对象，谁调用了函数，this就会指向谁。

ES6的箭头函数中：箭头函数本身不绑定this,this的指向是箭头函数定义位置的this。比如this箭头函数在哪个位置定义的，this就和这个位置的this指向相同。

代码举例

	const demo = {name:'西城辉'};
	function fn1(){
		console.log(this);//第一个 this,输出结果:{name:'西城辉'}
		return () => {
			console.log(this);//第二个 this ,输出结果:{name:'西城辉'}
		};
	}
	
	const demo2 = fn1.call(demo);// 改变fn1的指向至demo 

代码解释:上面代码我们可以看到，箭头函数是在fn1()函数里面定义的，所以，第二个this和第一个this的指向是同一个位置。且，我们通过 fn2 将this指向demo,所以**第一个this和第二个this*指向的都是demo。

四，ES6箭头函数面试题

代码

var name = '西城辉';
var obj = {
		name:'胡歌',
			hello:() =>{
				console.log(this.name);
			}
	}
	
	obj.hello();

问：上面箭头函数输出的名字是谁的？

答案：上面的打印结果是西城辉，为什么呢？因为obj这个对象并不产生作用域，所以hello() 这个箭头函数仍然是定义在window中的,所以这里的this 指向是window.