this到底指向什么？记住这4点就够了！

Posted 2021-09-07 是老胡没错

本文主要在于掌握this在javascript的指向，了解this是在什么时候确定的，谁决定了this的指向。

4大规则

优先级权重：依次从上到下，权重值从小到大。

1. （优先级最小）默认绑定规则： console.log( this === window ); // true
2. （优先级次于后两项）隐式绑定规则：谁调用就指向谁;(隐式丢失)。
3. （优先级次于new绑定）显示绑定规则：call,apply,bind。
4. （优先级最大）new 绑定规则。

this 的默认绑定规则

全局的this默认指向window,如果开启严格模式的话，则this指向undefined。

• 例子1：

console.log(this === window) // true 严格模式下全局的this为undefined
console.log({} === {}) // false

1. this和window之所以输出的是true,是因为他们指向的是同一个地址；
2. 两个对象为什么不相等呢，主要是因为，对象对比的是指针地址，每声明一个对象就开辟一个空间生成一个指针地址指向存数据的地方。

this 的隐式绑定规则

如果方法是通过某个对象点的方法调用的话，则this指向调用的对象，如果是直接调用（自主调用）的话，则this指向window.

• 例子1:

function test(){
    console.log(this === window); // true
}
test() // 可以理解为window.test();

1. 函数的独立调用，其实就是相当于window.xxx()的方式调用，因为全局声明的函数都是默认挂载到window上的，所以this也默认指向window。

• 例子2:

var obj = {
    a: 2,
    foo: function(){
        console.log(this); // obj
        function test(){
            console.log(this); // window
        }
        test();
    }
}
obj.foo();

1. 因为foo是obj调用，所以foo函数的this应该指向调用他的对象，所以内部打印出来的this为obj；
2. 而test虽然是在foo的内部调用，但是属于直接调用所以this依旧指向window。

this 的显示绑定规则

如果通过call,apply,bind强制更改this指向，则this指向方法传入的第一个参数。

• 例子1

var name = \'test1\'
var obj = {
    name: \'test2\'
}
function fn(){
    console.log(this.name);
}
var bindFn = fn.bind(obj);
bindFn() // test2
fn.call(obj) // test2
fn.apply(obj) // test2

1. 因为使用了call，apply，bind强行更改了this指向，所以this指向传入的第一个参数（obj）。

this 的new绑定

1. 如果构造函数内部没有返回引用类型变量，则构造函数内部会创建一个新的对象，this就是这个对象；
2. 如果构造函数内部返回了引用类型变量，则this为返回的这个对象。

• 例子1:

function Body(){
    console.log(this); // Body {}
}
new Body()
function Person(){
  console.log(this); // {name: "test"}
  return {
    name: \'test\'
  }
}
new Person()

1. 因为Body内部没有返回引用类型的数据所以this指向新创建的对象，Person构造函数内部返回了一个对象，所以this则指向返回的对象。

总结：

在js中函数定义时，this的指向是不确定的，只有在执行的时候，才能确定this的指向，所以可以总结成一句话，this指向是根据执行调用时的动态上下文来决定的。