为什么有this
假设一个对象
var person = {
name: 'aaa',
age: 18,
myName: function(){
},
myAge: function(){
}
}
调用两个函数输出name和age
实现
var person = {
...
myName: function(name){
console.log(' ${name}')
},
myAge: function(age){
console.log(' ${age}')
}
}
person.myName(person.name)
person.myAge(person.age)
改进
var person = {
...
myName: function(self){
console.log(' ${self.name}')
},
myAge: function(self){
console.log(' ${self.age}')
}
}
person.myName(person)
person.myAge(person)
进一步简化是否可以写成person.myName()
方法1：依然把第一个参数 self 当做 person，这样形参就会永远比实参多出一个 self
方法2：隐藏 self，然后用关键字 this 来访问 self。
JS 选择了方法2，用 this 访问 self。Python 选择了方法1，留下 self 作为第一个参数。
myName: function(){
console.log(' ${this.name}')
}
person.myName()
this是隐藏的形参，调用person.myName()时，this就是person
由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。
this和call
无语法糖的call
person.myName.call(person) === person.myName()
.call 的第一个参数是对象
person.myName虽然是 person 的方法，但是是可以调用在任何对象上的。
可以通过obj.fn.call(null,1,2,3)传null禁用this，更易懂
this的原理
this指的是函数运行时所在的环境
函数运行的环境是怎么改变的？
var obj = { foo: 5 };
上面的代码将一个对象赋值给变量obj，js引擎会先在内存里面，生成一个对象{ foo: 5 }，然后把这个对象的内存地址赋值给变量obj。
也就是说，变量obj是一个地址（reference）。后面如果要读取obj.foo，引擎先从obj拿到内存地址，然后再从该地址读出原始的对象，返回它的foo属性。
原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。举例来说，上面例子的foo属性，实际上是以下面的形式保存的。
var obj = { foo: function () {} };
引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性。
var f = function () {
console.log(this.x);
}
var x = 1;
var obj = {
f: f,
x: 2,
};
var bar = obj.f
// 单独执行
f() // 1
// obj 环境执行
obj.f() // 2
bar()
// 1
obj.foo()是通过obj找到foo，所以就是在obj环境执行。一旦var foo = obj.foo，变量foo就直接指向函数本身，所以foo()就变成在全局环境执行。
这张图就可以很清晰的看出来了，因为函数是一个独立的地址，那么执行var say = obj.say时，其实是把函数的地址赋值给了say，那么say就可以独立运行了，当执行say时，引擎可以直接拿到函数的地址而不再通过obj的内存了。
this的使用
多层调用
var f = function () {
console.log(this.x);
}
var x = 1;
var obj1 = {
f: f,
x: 2,
};
var obj2 = {
f1: obj1,
x:3,
bar2:bar2
};
obj2.f1.f()
//2
var bar = obj2.f1.f
bar()
// 1 赋值给bar的是f函数
var bar2 = obj1.f
obj2.bar2()
// 3
obj1.f.call(obj2)
//3
箭头函数
1.箭头函数作为函数的一种形式,对于this的处理和普通函数有所区别,其没有自己的this上下文,也就是说通过bind/call/apply函数方法设置this值时无效的，会被忽略
2.因为箭头函数没有自己的this上下文，那么当它作为对象的方法函数运行时，this并不指向这个对象
3.箭头函数的的函数体中出现的this在运行时绑定到最近的作用域上下文对象
4.可以认为箭头函数的this和调用者无关，只和其定义时所在的上下文相关
var a = 'window'
var foo2 = () => console.log(this.a)
var obj2 = {
a: 'obj2',
foo: foo2
}
obj2.foo()
var f= function objWrapper(){
var a=10;
var obj = {
foo: () => console.log(this.a)
};
obj.foo();
}
var wrapper ={
a:20,
f:f
}
f();//window
wrapper.f()
引用：
阮一峰 JavaScript 的 this 原理
http://www.ruanyifeng.com/blog/2018/06/javascript-this.html
方应杭 JS 里为什么会有 this
https://zhuanlan.zhihu.com/p/30164164
