es6白话系列之白话箭头函数

es6之白话箭头函数

在学习TS的过程中，重新又理解了一遍箭头函数，ts目前还是小白

先附上阮一峰老师的箭头函数

箭头函数重要的一点，也是面试中经常会问到的一点，就是绑定this的问题
牢记1点：

1. 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
从这句话，对于理解不到位的人，会产生误解

例1：

let num = 200
let obj = {
	num: 100,
	fn: () => {
		console.log(this.num)
	}
}
console.log(obj.fn()) // undefined

大写的懵逼，逗我呢，就算不是100，也得是200啊，undefined什么鬼
这普及个es6声明变量的知识点

顶层对象：浏览器环境中顶层对象是window，Node中是global对象。
ES5中，顶层对象的属性等价于全局变量。
ES5声明变量只有两种方式：var和function。
ES6有let、const、import、class再加上ES5的var、function共有六种声明变量的方式。
ES6中，有所改变：var、function声明的全局变量，依然是顶层对象的属性；let、const、class声明的全局变量不属于顶层对象的属性，也就是说ES6开始，全局变量和顶层对象的属性开始分离、脱钩

为了方便与描述，以下所用例子说明，都用于浏览器环境下执行
把例1变量声明方式改写成es5格式

例2：

var num = 200
var obj = {
	num: 100,
	fn: () => {
		console.log(this.num)
	}
}
console.log(obj.fn()) // 200

为什么是 200
不是说 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
其实这句话，需要多看一些文档，或者自己多进行一些练习，才能理解，
说专业点，就是箭头函数是词法作用域决定的。
说白点就是箭头函数，this是指向声明这个函数环境，也就是箭头函数上一层的this决定了箭头函数的this
说白了，就是

var obj = {
	num: 100,
	fn: () => {
		console.log(this.num)
	}
}
//现在箭头函数是在obj对象内声明的
//那obj的this指向哪里，obj这个对象内没有对任何this说明，
//不用想太复杂了，obj是在window下声明的
//所以这个this指向的是window,即顶层对象

再看这个例2，就明白为什么输出的是200了，就是因为箭头函数绑定的this，指向的是window，所以window.num 就是200

到这里，可能对箭头函数有了新的理解，接下来我们需要想，那我们怎么即用箭头函数又输出100呢
先用es5简单实现以下

var obj = {
	num: 100,
	fn: function(){
		console.log(this.num)
	}
}
obj.fn()//100

虽然es5写法更容易实现，但是es6很多语法就是为了在项目或者逻辑复杂时，使代码简单化，逻辑清晰化。

var obj = {
	num: 100,
	fn: function(){
		return () => {
			console.log(this.num)
		}
	}
}
obj.fn()()//200

可能到这，又会懵，为什么return 一个箭头函数就可以了
分析如下：

1. 上面说过了，箭头函数this 是上一层环境this决定的
2. 只需要确定obj里，fn这个函数内的this，就可以知道return里箭头函数的this了
3. obj.fn()调用时,fn内部this指向的是obj这个环境，所以箭头函数this,自然就绑定为obj这个环境
   所以现在知道为什么是200了吧。

说下这么写的优点
有类似的面试题如下
注意是es5写法

//注意是es5写法
var num = 99
var obj = {
	num: 100,
	fn: function(){
			console.log(this.num)
	}
}
var foo = obj.fn
foo() // 输出多少？？

对this机制不是很懂的，往往都会认为是100
由于这个是es5写法，this没有绑定，所以当 foo = obj.fn 的时候，相当于重新声明了一个foo函数，这个新函数this时指向window的，所以执行的时候输出99
新函数foo 和obj.fn 是完全相等的，因为都指向同一个引用地址，但函数重新赋值给foo，在调用foo()的过程中，this，指向的是window，可以理解为是window.foo()，所以执行时候输出99

翻回来看箭头函数

var obj = {
	num: 100,
	fn: function(){
		return () => {
			console.log(this.num)
		}
	}
}
var foo = obj.fn() //此时foo = ()=>{console.log(this.num)}
foo()// 输出100，
//尽管foo为重新声明的函数，
//但在执行obj.fn()生成函数赋值给foo的时候，箭头函数已经绑定死了this，指向为obj

重复一句话，箭头函数的this，取决于它上层this环境，
在这里，虽然obj.fn()是生成一个新函数，但在这个新函数生成的时候，执行环境的this，为obj，自然新函数中this 被箭头函数绑定，指向为obj

这种this绑定，还可以理解为this的传递过程，
以后有合适的例子，会放上来
–The End–