this指向的几种类型

注：js中this 是在函数执行（调用）的时候确定的；

 1、对象的方法--被哪个对象调用this就指向谁

  <script>
        let obj = {
            a: 1,
            run() {
                console.log(this.a);
                console.log(this);
            }
        }
        // 如果此时调用
        obj.run() //run里面的this就是obj本身；则this.a就是1
        // 此时重新定义一个变量，保存obj.run
        //❗ 是在函数执行的时候确定的 this
        let fn = obj.run;
        //  fn 就是全局函数
        fn()//❗调用了fn 后，但是看不出来是谁调用的，那 run里面的this 指向就是window;
    </script>

2、构造函数内部--new+构造函数，创建对象，构造函数内部的this就是指new的时候创建的对象

<script>
        function Dog(name) {
            this.name = name
            console.log(this);//Dog {name: 'xiao'}
        }
        let d1 = new Dog('xiao')
    </script>

3、事件处理函数中的this指向

dom0事件——dom.on事件名 = function(){};

dom2事件：dom.addEvenListener('事件名'，function(){})；

——给谁添加的点击事件，事件处理函数中this就是谁；

——特别注意：箭头函数没有自己的this，箭头函数的this和上下文有关；document属于window；所以如果document的事件函数用了箭头函数，里面的this就是window。

 <script>
        document.onclick = function () {
            console.log(this);//document
        }
        document.onclick = () => {
            console.log(this);//window 
        }
        document.addEventListener('click', function () {
            console.log(this);//document
        })
        document.addEventListener('click', () => {
            console.log(this);//window  箭头函数没有自己的this，箭头函数的this和上下文有关；document属于window
        })
    </script>

 4、普通全局函数 —（没有归属--看不出来属于谁/被谁调用）匿名函数，this指向就是window;

 <script>
        function test() {
            console.log(this);
            // window
        }
        test()

        setTimeout(function () {
            console.log(this);
            // window
        }, 1000)

        let arr = [1, 2, 3]
        arr.forEach(function () {
            console.log(this);
            // window
        })
    </script>

5、箭头函数—没有自己的this，其this跟上下文的this一致

  <script>
        document.addEventListener('click', function () {
            console.log(this);//document
            setTimeout(() => {
                console.log(this);//document
            }, 1000);
        })
    </script>