this指向拆解

this在js中使用频率是非常高的，在面试的过程中也是百分之百会被问到的，我自己在看了很多视频，文章之后，为了记得更清楚，所以写下这篇文章

this指向，首先，通常情况下使用，那就是谁调用this就指向谁

第一种情况 this在全局调用的情况下，this指向的是window

// 在最层使用js时，this指向window 
function fn(){
    console.log(this) //window
}
fn()

为什么会指向window？首先我们写了一个函数，这个函数被调用，那我们可以思考一下，是被谁调用了？ fn()，全局函数。都会被window调用，我们在写fn()的时候，只是将window.省略掉了，所以是window调用了这个函数，那么this指向的就是我们的window。

第二种情况，一个对象里面的函数属性中的this指向这个对象本身

var obj = {
    name:'rebecca',
    function fn(){
        console.log(this) //this指向当前对象obj
    }
}
obj.fn()

声明一个对象，这个对象是全局的window.obj，我们的fn是obj里面的属性，所以我们的this指向的是调用fn的obj

第三种情况，在 ** 箭头函数 ** 中 this指向最外层

function test() {
            function a1() {
                var a = () => {
                    console.log(this) //指向window
                }
                a()
            }
            a1()
        }
        test()

无论箭头函数外面嵌套了多少层，最终this指向始终是最外层的window

第四种情况，在构造函数中，this指向的是构造函数创建的实例

function Person(name, age) {
            console.log(this) //指向的是当前构造函数创建的实例对象
            this.name = name;
            this.age = age;
        }
        var p1 = new Person('John', 26);

值得注意的是，只有在new构造函数的时候，this才指向其创建的构造函数

第五种情况，在dom事件中，在脚本中绑定dom节点的事件，this均指向当前dom节点

<button id="btn">domTest4——指向当前dom节点</button>
<button id="elem" onclick="domTest1(this)">domTest1</button> 
<button id="elem" onclick="console.log(this)">domTest3——指向当前dom节点</button>

<script>

btn.onclick = function () {
        console.log(this);
    };

btn.addEventListener("click", function () {
    console.log(this);
});
function domTest1(context) {
    console.log(context) //指向当前dom
    console.log(this) //指向window
}
</script>

总结：

常规情况下，this指向为，谁调用则指向谁，但是通上所述，在箭头函数中，this指向就会被改变，指向最外层的对象，构造函数也会改变this指向，除去这些，我们在需要改变this指向的时候，还可以通过call/apply和bind都可以改变this的指向问题

juejin.cn/post/711493…