JS this指向的三种情况

浏览器（解析器）在调用函数每次都会向函数内部传递一个隐含的参数
这个隐含参数就是 this ，this指向的是一个对象（object window）
这个对象称为函数执行的上下文的对象
this不是固定的，根据函数调用的方式不同，this指向不同对象

以函数形式调用
this永远指向window

<script>
        function fun(a, b) {
     
     
            console.log(this);
        }
        fun();
</script>
// 输出  Window

以方法的形式调用，this就是指向调用方法的对象

<script>
        function fun(a, b) {
     
     
            console.log(this);
        }
        //fun();   结果object window
        var obj = {
     
     
            name: "TOM",
            sayName: fun
        };
        console.log(obj.sayName == fun); //true ,此处两个相等
        obj.sayName(); 
        //相似 fun（） 结果为：object object 发生改变
        //输出  object {name="TOM", sayName=fun()}  相当于调用obj
</script>
>

<script>
        function fun(a, b) {
     
     
            console.log(this.name);
        }
        var obj = {
     
     
            name: "TOM",
            sayName: fun
        };
        var name = "全局name";
        fun();  //相当于window.this
        //输出  全局name
        obj.sayName(); //相当于obj.name
        //输出  TOM
    </script>

不使用 this 的情况

 <script>
        function fun() {
     
     
            console.log(name); //  ---->name在此处写死，不用this的话
        }
        var obj = {
     
     
            name: "TOM",
            sayName: fun
        };
        var name = "全局name";
        fun();  
        //输出  全局name
        obj.sayName(); //相当于fun（）
        //输出  全局name
    </script>

<script>
        function fun() {
     
     
            console.log(obj2.name);
            //  ---->使用obj2.name 写死，不用this的话
        }
        var obj = {
     
     
            name: "TOM",
            sayName: fun
        };
        var obj2 = {
     
     
            name: "JOM",
            sayName: fun
        };
        var name = "全局name";
        fun();
        //输出  JOM
        obj.sayName();
        //输出  JOM
        obj2.sayName();
        //输出  JOM
    </script>

使用 this更加灵活

<script>
        function fun() {
     
     
            console.log(this.name);
            //  ---->使用this
        }
        var obj = {
     
     
            name: "TOM",
            sayName: fun
        };
        var obj2 = {
     
     
            name: "JOM",
            sayName: fun
        };
        var name = "全局name";
        fun();
        //输出  全局name
        obj.sayName();
        //输出  TOM、
        obj2.sayName();
        //输出  JOM
    </script>