"this指南：掌握JavaScript中的上下文绑定"

this指向"死记硬背"定律

1. 在函数体中，非显示或隐式地简单调用函数时，在严格模式下，函数内的this会被绑定到undefined上，在非严格模式下则会被绑定到全局对象window/global上
2. 一般使用new方法调用构造函数时，构造函数中的this会被绑定到新创建的对象上
3. 显示的通过apply/call/bind绑定this指向指定的参数对象上
4. 一般通过上下文对象调用函数时，函数内部的this绑定到该对象上
5. 在箭头函数中，this指向外层this的指向位置

全局环境中的this

function fn1() {
  console.log(this); // window
}
function fn2() {
  "use strict";
  console.log(this); // undefined
}

fn1();
fn2();

函数在浏览器全局环境中被简单调用，在严格模式下this指向为undefined。在非严格模式下this指向window对象

const obj = {
  bar: 10,
  foo() {
    console.log(this);
  },
};
const fn = obj.foo;
fn(); //window

上述代码运行结果为window对象，因为最终foo函数被简单的在全局环境中被调用，所以this指向window

const obj = {
  bar: 10,
  foo() {
    console.log(this);
  },
};
obj.foo(); // { bar: 10, foo: [Function: foo] }

在不考虑显示绑定的情况下：上述代码通过对象obj调用foo函数，所以函数内部的this指向obj对象，所以如果函数中的this是被上一级的对象调用的，则this指向的就是上一级对象。否则指向window对象

通过bind,apply,call,改变this指向

它们都是用来改变函数this指向,apply,call是直接进行相关函数的调用；bind不会指向相关函数，而是返回一个新的函数，这个函数的this 指向已经绑定，开发者可以手动调用。

const obj = {
  bar: 10,
  foo() {
    console.log(this.bar);
  },
};
const obj1 = {
  bar: 20,
};
obj.foo.call(obj1); // 20

上述代码输出值20,通过call改变了foo函数的this指向

构造函数与this

function Fn() {
  this.bar = 110;
}
const instance = new Fn();
console.log(instance.bar); // 110

上述代码输出值110,表明通过new操作符实例化构造函数，构造函数中的this指向为实例对象。

箭头函数中的this

箭头函数中的this,是由外层函数作用域或者全局作用域决定的。

const obj = {
  bar: 10,
  foo() {
    setTimeout(function () {
      console.log(this.bar);
    });
  },
};
obj.foo(); // undefined

setTimeout函数传入一个匿名函数其this指向为window,作用上述代码打印undefined,如果希望setTimeout中的回调函数中this指向为obj则可以将匿名函数改为箭头函数，因为箭头函数中的this指向是根据其外层函数的this指向所决定。

const obj = {
  bar: 10,
  foo() {
    setTimeout(() => {
      console.log(this.bar);
    });
  },
};
obj.foo(); // 10

this的优先级

显示绑定和隐式绑定的优先级

const obj = {
  bar: 10,
  foo() {
    console.log(this.bar);
  },
};
const obj1 = {
  bar: 20,
};

obj.foo.call(obj1); // 20

上述代码输出为20,可以知道显示绑定优先级高于隐式绑定优先级

new操作符和显示绑定的优先级

function fun(a) {
  this.a = a;
}
const obj3 = {};

const bar = fun.bind(obj3);
bar(100);
console.log(obj3.a); // 100

const baz = new bar(300);
console.log(baz.a); // 300
console.log(obj3); // { a: 100 }

上述代码可以看出，new 操作符在 fun.bind()之后绑定到obj3上之后，通过new bar()之后改变了barh函数的this指向。所以new操作符的优先级高于显示绑定优先级

注意:如果显示绑定的函数为箭头函数，箭头函数中的this不会被改变，按照其规则进行指向，这里我们将上例进行修改：

fun = (a) => {
  this.a = a;
};
const obj3 = {};

const bar = fun.bind(obj3);
bar(100);
console.log(obj3.a); // undefined
console.log(window.a); // 100