web前端必做笔记之一：如何理解this关键字

最新推荐文章于 2024-04-21 08:37:16 发布

我是小白菜鸟

最新推荐文章于 2024-04-21 08:37:16 发布

阅读量186

点赞数 1

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/qq_42302014/article/details/120609341

版权

本文详细探讨了JavaScript中的this关键字在不同环境下的指向，包括全局环境、全局函数、对象方法、DOM事件、构造函数以及箭头函数中的行为。通过实例解析，帮助读者掌握this的关键用法，并特别强调了箭头函数中this的特殊性。

摘要由CSDN通过智能技术生成

web前端必做笔记之一：如何理解this关键字

1.全局环境输出this,指向谁？

<script>
      //this
      //   1.直接输出this指向全局对象window
   console.log(this);   //window
</script>

2.全局函数输出this,指向谁？

      //为啥这里的this指向Window
      //因为全局函数其实是window(全局对象)的方法
      function  fun(){
            console.log(this);
      }
      fun();

3.对象的方法输出this，指向谁？

     //this放在方法中,this指向调用这个方法的对象
      let  cat = {
              name:"喵喵",
              sayName(){
                     console.log("我是" + this.name);  //我是喵喵
              }
      }

4.DOM事件输出this,指向谁？

<button>按钮</button>
<script>
      //DOM对象事件中的this，指向的是DOM对象
       const  btn  = document.querySelector("button");
       btnl.onclick = function(){
              console.log(this);
       }
</script>

5.构造函数中的this,指向谁？

       //将构造函数使用的this指向创建出来的对象
      //构造函数：用来创建对象
       function  F(){
             this.name = "小明"
             
       }
       let f = new F();
       console.log(f);  //F{name:"小明"}

6.new关键字做了什么？
new会创建对象，
7.箭头函数中的this,指向谁？

<script>
      //箭头函数中this 指向谁
      //关于箭头函数有很多中说法
      // 1. 普通函数,谁调用指向谁，箭头函数，在哪里定义指向谁
      // 2. 箭头函数外指向谁就指向谁
      // 3. 箭头函数中没有this
      let  cat = {
              name:"喵喵",
              sayName(){
                    console.log(this) //指向喵喵

                    //不适用箭头函数情况下
                    setTimeout(function(){
                        console.log(this);  //指向window
                    },1000);

                    //使用了箭头函数的情况下
                    setTimeout(()=>{
                         console.log(this) //指向喵喵
                    },1000)
                   
              }
      }

      cat.sayName();
</script>