本文主要知识点：this到底指向谁；this应用场景及区别详细剖析
一句话总结this指向：
广泛说法：谁调用它，this就指向谁。也就是说this的指向是在调用时确定的
规范说法：this的指向是在调用函数时根据执行上下文所动态确定的
先死记硬背几条规律：
在函数体中，简单调用该函数时（非显示/隐式绑定），严格模式下this绑定到undefined，否则绑定到全局对象window/global
一般构造函数new调用，绑定到新创建的对象上
一般由call/apply/bind方法显示调用时，绑定到指定参数的对象上
一般由上下文对象调用，绑定在该对象上
箭头函数中，根据外层上下文绑定的this决定this指向
应用场景举例及解析
1、全局环境下的this
const foo = {
bar: 10,
fn: function() {
console.log(this);
console.log(this.bar)
}
}
var fn1 = foo.fn;
fn1();
输出结果：window 、undefined
解析：这里的this仍然指向window。虽然fn函数在foo对象中作为方法被引用，但是再赋值给fn1之后，fn1的执行是在window的全局环境，因此输出window和undefined
题目扩展：
如果调用改变为foo.fn()，
输出结果为：
{bar: 10, fn: ƒ} 10
解析：因为this指向的是最后调用它的对象，在foo.fn*(语句中this指向foo对象
敲黑板：在执行函数时，如果函数中的this是被上一级的对象所调用，那么this指向的就是上一级的对象，否则指向全局环境
2、上下文对象调用中的this
const person = {
name: 'Lucas’,
brother: {
name: 'Mike’,
fn: function() {
return this.name
}
}
}
console.log(person.brother.fn())
输出结果：Mike
解析:在这种嵌套关系中，this指向最后调用它的对象，因此将输出Mike
扩展
const o1 = {
text: 'o1’,
fn: function() {
return this.text
}
}
const o2 = {
text: 'o2’,
fn: function() {
return o1.fn()
}
}
const o3 = {
text: 'o3’,
fn: function() {
var fn = o1.fn
return fn()
}
}
console.log(o1.fn())
console.log(o2.fn())
console.log(o3.fn())
输出结果：o1、o1、undefined
解析：
第一个console中this指向调用它的对象，因此输出o1
第二个console中o2.fn()，最终调用的是o1.fn()，因此输出o1
第三个console 在进行赋值后，是”裸奔“调用，因此这里的this指向window，输出undefined
扩展升级
如果让第二个输出o2，应该怎么做
一般会使用bind/call/apply进行干预，这是一种思路，如果不用的话还有别的方法吗？
结果：将第二个定义改成
const o2 = {
text: 'o2’,
fn: o1.fn
}
解析：this指向最后调用它的对象，在fn执行时，挂到o2对象上即可，提前进行赋值操作
3、bind/call/apply改变this指向
三者都是用来改变this指向的，区别是：call/apply是直接进行相关函数调用；bind不会执行相关函数，而是返回一个新的函数，这个新的函数已经自动绑定了新的this指向，开发者需要手动调用即可。call与aplly的区别主要体现在参数写法上，用代码总结如下：
const target = {}
fn.call(target, 'arg1', 'arg2’)
相当于：
const target = {}
fn.apply(target, ['arg1', 'arg2’])
相当于：
const target = {}
fn.bind(target, 'arg1', 'arg2')()
实例：
const foo = {
name: 'lucas’,
logName: function() {
console.log(this.name)
}
}
const bar = {
name: 'mike’}
console.log(foo.logName.call(bar))
输出结果：mike
解析：通过call改变this指向，此时指向bar对象，因此输出mike
4、构造函数和this
new 操作符调用构造函数，具体做了什么？
1、创建一个新的对象
2、将构造函数的this指向这个新对象
3、为这个对象添加属性、方法等
4、最终返回新对象
用代码表示：
var obj = {}
obj.proto = Foo.prototype
Foo.call(obj)
在构造函数中出现了显式return，注意场景：
若返回一个值，且返回的是一个对象，那么this就指向这个返回的对象；若返回的不是一个对象，那么this仍然指向实例
为了更好理解，看个例子：
function Foo(){
this.user = “Lucas"
const o = {}
return o
}
const instance = new Foo()
console.log(instance.user)
此时输出结果：undefined
解析:instance返回的是空对象
若将return o 改成return 1，则输出Lucas
5、箭头函数中的this指向
划重点：箭头函数使用this不适用以上标准规则，而是根据外层（函数或者全局）上下文来决定
const foo = {
fn: function () {
setTimeout(function() {
console.log(this) })
}
}
console.log(foo.fn())
输出结果：window
解析：this出现在匿名函数里，因此this指向window对象。如何需要this指向foo这个object对象，可以通用箭头函数解决
即将setTimeout改成如下即可：
setTimeout(() => {
console.log(this)
})
6、this优先级相关
显示绑定（通过call、apply、bind、new对this绑定的情况）和隐式绑定（根据调用关系确定的this指向）谁的优先级高呢？
function foo (a) {
console.log(this.a)
}
const obj1 = {
a: 1,
foo: foo
}
const obj2 = {
a: 2,
foo: foo
}
obj1.foo.call(obj2)
obj2.foo.call(obj1)
输出结果：2、1
解析：call、apply的显式绑定一般来说优先级更高
function foo (a) {
this.a = a
}
const obj1 = {}
var bar = foo.bind(obj1)
bar(2)
console.log(obj1.a)
输出：2
解析：通过bind将bar函数中的this绑定为obj1对象。指向bar（2）后，obj1.a值为2，因此obj1对象为 {a:2}
扩展
当再使用bar作为构造函数时：
var baz = new bar(3)
console.log(baz.a)
输出：3
解析：通过new调用时，返回的实例已经与obj1解绑。即new绑定修改了bind绑定中的this，因此new绑定的优先级比显式bind绑定更高
扩展升级
function foo() {
return a => {
console.log(this.a)
};
}
const obj1 = { a: 2}
const obj2 = { a: 3}
const bar = foo.call(obj1)
console.log(bar.call(obj2))
输出：2
解析：foo的this绑定到obj1，bar的this也会绑定到obj1，箭头函数的绑定无法被修改
再升级
若将foo函数改成箭头函数：
const foo = () => a => {
console.log(this.a)
}
将会输出：undefined
解析：此时this指向window对象，箭头函数的绑定无法被修改
小扩展：若全局定义const a=123，仍然输出undefined。因为const声明的变量不会挂载到window对象。
本文引用《前端核心知识进阶》第一讲整理总结，后面会持续总结，喜欢的关注我哦