JS的this指向理解

参考： http://www.ruanyifeng.com/blog/2018/06/javascript-this.html

this在非箭头函数下始终指向当前调用的对象。

1、为什么函数内部要设置this？

解释如下：https://zhuanlan.zhihu.com/p/30164164

var obj = {
  foo: function () { console.log(this.bar) },
  bar: 1
};

var foo = obj.foo;
var bar = 2;

obj.foo() // 1
foo() // 2

this指的是函数运行时所在的环境，那么函数的运行环境到底是怎么决定的？为什么obj.foo()就是在obj环境执行，而一旦var foo = obj.foo，foo()就变成在全局环境执行？主要和数据在内存中存储有关。

var obj = { foo:  5 };

上面的代码将一个对象赋值给变量obj。JS引擎会先在堆内存里生成一个对象{ foo: 5 }，然后把这个对象的内存地址赋值给变量obj。如果要读取obj.foo，引擎先从obj拿到内存地址，然后再从该地址读出原始的对象，返回它的foo属性。

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

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

此时，由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行。

var f = function () {
  console.log(x);
};

JS允许在函数体内部，引用当前环境的其他变量。
现在问题就来了，由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。 所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

var f = function () {
  console.log(this.x);
}

上面代码中，函数体里面的this.x就是指当前运行环境的x。

var foo = function () {
  console.log(this.x);
}
var x = 1;
var obj = {
  foo: foo,
  x: 2,
};

foo() // 1
obj.foo() // 2

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

2、JS函数不同调用方式时this指向问题

函数调用方式主要分为以下：

• 作为对象方法调用（指向当前的调用对象，具体看上面部分）
• 作为函数调用（非严格模型this指向window，严格模型指向undefined）
• 作为构造函数调用（this指向其实例）
• 使用call或者applay调用（this指向第一个参数）

当函数作为构造函数时，new一个构造函数的实例有以下几个步骤：

• 创建一个空对象obj
• 设置原型链：obj.proto = 构造函数名.prototype
• 让构造函数内部的this指向obj（默认returnt为当前this，构造函数renturn一个对象时，this指向return的对象）调用构造函数中的属性，执行函数中的代码，为obj添加属性。
• 返回对象obj的地址

setTimeout有两个参数，第一个是对象，第二个是间隔时间。由于setTimeout是window下的方法，那么在函数内this指向window。

3、箭头函数下的this

es6箭头函数没出现之前，this的指向不是函数被创建时绑定，而是被怎么样的方式调用时绑定的（执行时绑定）。而箭头函数刚好相反，箭头函数的this指向是函数被创建时绑定的，它的指向就是当前词法作用域中的this（即在定义时上一层所在的作用域），并且不会因为被怎么样的方式调用改变绑定。
箭头函数中this对象就是定义时上一层所在的作用域，也就是说箭头函数本身没有this，内部的this就是外层代码块中的this（即往上找this）。

var a = 0
var obj = {
    a: 1,
    foo: ()=> {
        console.log(this.a)
    }
}
obj.foo()  //0

这里箭头函数中没有this，就往上找this，此时首个this只有window。