this指向

（1）在全局环境中的this——window
无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。

         "use strict"
        console.log(this); //window
        console.log(this===window);//true
（2）在函数中的this——window
在函数内部，this的值取决于函数被调用的方式。

        function f() {
        console.log(this); //window
        console.log(this===window);//true
       }
       f()
       console.log(f()===window.f()); //true
因为定义的函数在全局作用域下定义的 

（3）函数在严格模式下——undefined
        function f() {
            "use strict"
            console.log(this); //undefined
            console.log(this === window); //false
        }
        f()
上面的f是直接调用的指向undefined 

        function f() {
            "use strict"
            console.log(this); //window
            console.log(this === window); //true
        }
        window.f()
有一些浏览器最初在支持严格模式时没有正确实现这个功能，于是它们错误地返回了window对象。

 （4）对象中的this——指向调用者
        let obj = {
            fn: function () {
                console.log(this);
            }
        }
        obj.fn() //指向obj这个对象
（5）栗子①
        function fun() {
            console.log(this.name);
        }
        let obj = {
            name: '奥特曼',
            fn: fun
        }
        var name = "怪兽"
        obj.fn()  //奥特曼
        fun()    //怪兽
obj.fn() 是obj 调用的所以去找obj里面的name 

fun是window调用的所以去找全局里面的this.name

（6）栗子②
        var obj1 = {
            name: '怪兽',
            f: function () {
                console.log('姓名:' + this.name);
            }
        }
 
        var obj2 = {
            name: '奥特曼'
        }
        obj2.f = obj1.f
        obj1.f() //姓名:怪兽
        obj2.f() //姓名:奥特曼
把obj1.赋值给obj2.f  obj2也有了f 方法 

（7）栗子③
        function foo() {
            console.log(this.a);
        }
        var obj2 = {
            a:2,
            fn:foo
        }
        var obj1={
            a:1,
            o1:obj2
        }
        obj1.o1.fn() //2
 obj1里面的o1是obj2  obj2里的fn是foo函数   在obj2里面调用的拿到obj2中的a

（8）事件绑定中的this 
 <button οnclick="Hclick()">点击事件</button>
<script>
       function Hclick() {
            console.log(this);
        }
</script>
 由于还是在当前window环境下运行的还是指向window

  <button οnclick="console.log(this)">点击事件</button>
运行在节点对象中 指向当前dom

（9）动态绑定
<button>动态绑定</button>
<script>
       let btn=  document.getElementsByTagName('button')[0].οnclick=function(){
           console.log(this);    
       }
</script>
指向当前dom

（10）addEventlistenr——当前dom
        let btn = document.getElementsByTagName('button')[0].addEventListener('click',function () { console.log(this); })
指向当前dom <button>动态绑定</button>

       let btn = document.getElementsByTagName('button')[0].addEventListener('click',()=>{
            console.log(this);
        })
换成箭头函数后 this指向当前作用域下的上级作用域的this    window 

（11）构造函数中的this——当前实例化对象
        function Pro() { 
            this.x='1'
            this.y=function(){ console.log(this);}
         }
         var p = new Pro()
         p.y()
通过构造函数创建了一个新的实例对象  所以当前的this指向新的实例对象

（12）定时器中的this——window
      setInterval(function () {console.log(this)  },1000)
this指向当前window

小扩展

        var MyClass = function () {
            this.name = 1;
        }
        var myClass = new MyClass();
        console.log('myClass:', myClass);

当有了返回值以后

        var MyClass = function () {
            this.name = 1;
            return {
                name: 2
            }
        }
        var myClass = new MyClass();
        console.log('myClass:', myClass);
 

会把return的内容放在构造函数中
————————————————
版权声明：本文为CSDN博主「奥特曼　」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_46846526/article/details/118764385