this

为什么有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属性，实际上是以下面的形式保存的。

image.png

var obj = { foo: function () {} };

引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性。

image.png

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

image.png

image.png

obj.foo()是通过obj找到foo，所以就是在obj环境执行。一旦var foo = obj.foo，变量foo就直接指向函数本身，所以foo()就变成在全局环境执行。

image.png

这张图就可以很清晰的看出来了，因为函数是一个独立的地址，那么执行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