1.首先先明确，this会出现在哪里。
this出现在全局作用域中，或函数作用域中（普通函数、箭头函数）。
对象是不产生作用域的，对象的{}和函数的{}不一样，this并不会直接出现在对象或类中，只会出现在对象/类的函数中。
2.this指向哪里
this在全局作用域下指向的是window。
this在函数中指向的比较复杂， 满足以下四点：
1.函数在调用时，JavaScript会默认给this绑定一个值；
2.this的绑定和定义的位置（编写的位置）没有关系；
3.this的绑定和调用方式以及调用的位置有关系；
4.this是在运行时被绑定的；
3.this的绑定规则
以下指的规则都是普通函数中的，不包括箭头函数。
1.默认绑定
如果一个函数调用是直接调用，比如fn()这样，没有对象.fn()，就说它是默认绑定的，通常默认绑定时，函数中的this指向全局对象（window）；
且要找到函数真正的调用位置，看它是否是独立函数直接调用。
function foo() {
console.log(this); // window
}
foo();
2.隐式绑定
通过某个对象进行调用的。比如对象.fn()。通过某个对象发起的函数调用。这时候this会被绑定在该对象身上
function foo() {
console.log(this); // obj对象
}
var obj = {
name: "why",
foo: foo
}
obj.foo();
上面提到要找到函数真正的调用位置，看它是否是独立函数直接调用。
下面举个例子，这个实际的调用位置其实是直接调用的。
function foo() {
console.log(this);
}
var obj1 = {
name: "obj1",
foo: foo
}
// 讲obj1的foo赋值给bar
var bar = obj1.foo;
bar();
3.显式绑定
通过apply、call、bind进行绑定就是显式绑定
function foo() {
console.log(this);
}
foo.call(window); // window
foo.call({name: "why"}); // {name: "why"}
foo.call(123); // Number对象,存放时123
4.new绑定
使用new，这个新对象会绑定到函数调用的this上。
绑定的this是这个类/构造函数的实例对象。
// 创建Person
function Person(name) {
console.log(this); // Person {}
this.name = name; // Person {name: "why"}
}
var p = new Person("why");
console.log(p);
4.特殊的this
1.setTimeout
setTimeout内部如果传的是普通函数，那这个this指向的是window。
这和setTimeout源码的内部调用有关，记住就好了。
setTimeout(function() {
console.log(this); // window
}, 1000);
2.forEach
内部传普通函数，this指向的也是window。
var names = ["abc", "cba", "nba"];
names.forEach(function(item) {
console.log(this); // 三次window
});
3.dom节点
this指向的是绑定事件的节点。
var box = document.querySelector(".box");
box.onclick = function() {
console.log(this); // box对象
}
4.箭头函数
箭头函数没有this，也就是不绑定this，如果在箭头函数中使用this，则是根据外层作用域来决定this。
所以与上面的setTimeout、forEach特点结合，经常在setTimeout、forEach中使用箭头函数。
var obj = {
data: [],
getData: function() {
setTimeout(() => {
// 模拟获取到的数据
var res = ["abc", "cba", "nba"];
this.data.push(...res);
}, 1000);
}
}
obj.getData();
这里，setTimeout中通过箭头函数调用this，这个this与外层作用域相同，也就是和在getData函数中使用this的指向相同。
但如果getData也是个箭头函数，那么getData函数中使用this的指向 与 外层作用域相同，也是与全局作用域中的this一致，window。
var obj = {
data: [],
getData: () => {
setTimeout(() => {
console.log(this); // window
}, 1000);
}
}
obj.getData();
5.规则优先级
new绑定 > 显式绑定（bind）> 隐式绑定 > 默认绑定
1.new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高
但new绑定优先级高于bind
function foo() {
console.log(this);
}
var obj = {
name: "obj"
}
// var foo = new foo.call(obj);
var bar = foo.bind(obj);
var foo = new bar(); // 打印foo, 说明使用的是new绑定
2.new绑定优先级高于隐式绑定
function foo() {
console.log(this);
}
var obj = {
name: "why",
foo: foo
}
new obj.foo(); // foo对象, 说明new绑定优先级更高
3.显式绑定优先级高于隐式绑定
function foo() {
console.log(this);
}
var obj1 = {
name: "obj1",
foo: foo
}
var obj2 = {
name: "obj2",
foo: foo
}
// 隐式绑定
obj1.foo(); // obj1
obj2.foo(); // obj2
// 隐式绑定和显式绑定同时存在
obj1.foo.call(obj2); // obj2, 说明显式绑定优先级更高