ES6 - 箭头函数this

https://zhuanlan.zhihu.com/p/57204184

一、普通函数里面的this

JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

1、在方法中，this 表示该方法所属的对象。
2、如果单独使用，this 表示全局对象。
3、在函数中，this 表示全局对象。
4、在事件中，this 表示接收事件的元素。
5、类似 call() 和 apply() 方法可以将 this 引用到任何对象。

　　来看例子：

//示例1
var name = '小王',age=17;
var obj={
	name:'小张',
	objAge:this.age,
	myFun:function(){
		console.log(this.name + "年龄" + this.age);
	}
}
运行后：
obj.Age;//17
obj.myFun()//小张年龄 undefined

//示例2
var fav = '盲僧';
function show(){
	console.log(this.fav);
}
运行后：
shows()//盲僧

比较一下这两者 this 的差别，第一个打印里面的 this 指向 obj，第二个全局声明的 shows() 函数 this 是 window ；

二、箭头函数里面的this：

定义：

函数执行上下文环境中，箭头函数没有this 并不会绑定一个 this 变量，它的作用域会如同寻常所做的一样一层层地去往上查找，可以在箭头函数外层 打印 this 逐层打印 直到有值。注意只有函数才有作用域

什么是作用域

 一般情况下，变量取值到 创建 这个变量 的函数的作用域中取值。

但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

作用域有上下级关系，上下级关系的确定就看函数是在哪个作用域下创建的。如上，fn作用域下创建了bar函数，那么“fn作用域”就是“bar作用域”的上级。

作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。

变量取值：到创建 这个变量 的函数的作用域中取值

来看例子：

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: () => {
      console.log(this.name)
   }
}

A.sayHello();// 还是以为输出A ? 错啦，其实输出的是window

分析原因：

“该函数所在的作用域指向的对象”，作用域是指函数内部，这里的箭头函数，也就是sayHello，所在的作用域其实是最外层的js环境，因为没有其他函数包裹；然后最外层的js环境指向的对象是window对象，所以这里的this指向的是window对象。

那如何改造成永远绑定A呢：

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: function(){
      var s = () => console.log(this.name)
      return s//返回箭头函数s
   }
}

var sayHello = A.sayHello();
sayHello();// 输出A 

var B = {
   name: 'B';
}

sayHello.call(B); //还是A
sayHello.call(); //还是A

OK，这样就做到了永远指向A对象了，我们再根据“该函数所在的作用域指向的对象”来分析一下：

该函数所在的作用域：箭头函数s 所在的作用域是sayHello,因为sayHello是一个函数。
作用域指向的对象：A.sayHello指向的对象是A。
所以箭头函数s 中this就是指向A啦 ～～

接着来看一下 setTimeout 情况：

const person = {
　　name: 'tom',
　　sayHiAsync: function () {
　　　　setTimeout(() => {
　　　　　　console.log(`hi, my name is ${this.name}`);
　　　　}, 1000);
　　}
}
person.sayHiAsync(); // hi, my name is tom

setTimeout中的function函数体中的this指向的是上层函数体中的this，即sayHiAsync: function() {}中的this，而这里的this取决于谁调用了它，person调用了sayHiAsync，那么相当于person.name

箭头函数里面的this定义时会继承自外部的this，普通函数中的this并不会向上继续找对象，箭头函数中会往上寻找this，直到找到所代表的this为止。