【JS】this机制

this指向什么？this是在函数被执行时，指向调用它的对象。
用代码来理解这句话:

var a = 2
function fn() {
  console.log(this.a);
}

fn()			// 2

这种情况下，函数fn是直接加在全局对象上，this指向全局对象（这里是window），变量a也是window的属性，因此打印出来是2

---

var a = 2

var o = {
  a: 4,
  fn: function() {
    console.log(this.a);
  }
}

o.fn()			// 4

这一次函数的调用是发生在对象o上面的，存在上下文对象的情况，因此，this指向的对象o里的变量a，打印结果是4。

---

var a = 2

var o = {
  a: 4,
  fn: function() {
    console.log(this.a);
  }
}

var f = o.fn;
f()			// 2

这里f保存了o对象的fn函数，调用还是在全局环境中，因此打印结果是2。

---

如果我们想改变调用函数的那个对象，该怎么改变？我们可以使用call或者apply方法。

var a = 2

function fn() {
  console.log(this.a);
}

var o = {
  a: 4
}

fn.call(o);				// 4

这一次我们在全局环境中调用fn函数，我们显示的改变了调用他的对象，因此打印结果是对象o里的变量a的值。

---

在箭头函数中的this又有点不同，this 的值取决于该函数外部非箭头函数的 this 的值

var fn = () => {
  console.log(this.a);
}

var a = 2;

var o = {
  a: 4,
  fn: fn
}

o.fn()				// 2
fn.call(o);			// 2

上述代码显示:改变调用对象对箭头函数并不生效，fn外层为全局对象，因此打印出来是全局对象的a的值。
再来一段代码

function fn() {
  return () => {
    console.log(this.a);
  }
}

var a = 2;

var o = {
  a: 4,
  fn: fn
}

var f = o.fn()
f()					// 4

这里箭头函数的外层环境为fn函数，fn函数又在o对象里，this指向o对象，打印结果为4。