JS中this的指向问题

JS中this的指向问题

JS中this的指向问题也算是这方面的一个难点问题，今天这篇博客也是根据老师对于这个问题的讲解以及我自己对于这个问题的理解来书写的。

1 . this出现在普通函数中

this出现在普通函数中，this的指向就是this的调用者，如果没有明确的调用者，那this的调用者就是全局变量（window），同时也可以通过window大点进行调用。

<script>
     function f() {
          console.log(this);  // this指向全局变量（window）
     }
</script>

<script>
      function g() {
            console.log(this);  // window
      }
      window.g();  // window打点调用
      g();  // 程序员自己对一个普通函数进行调用，函数中的this指向全局变量（window）
</script>

2 . this出现在事件处理程序中

在事件处理程序中，时间发生时，浏览器会自动帮助我们调用程序中相对应的函数，此时this表示事件源，即接收事件的元素。

<button id="box">box</button>
<script>    
     let box = document.getElementById("box");    
     box.onclick = function () {  // 触发点击事件时浏览器自己调用函数
          console.log(this);  // this表示事件源   
     }
</script>

3 . this出现在对象方法中

在一个对象中，如果如果有方法（函数），如果通过这个对象调用方法，方法中的this表示这个对象。

<script>
      var cc = {
            name:"chenchen",   // 属性（又叫变量或者是方法）
            age:22,   // 属性
            dance: function () {   // 方法（属性）
                  console.log("dancing...");
                  console.log(this);
            }
      }
      cc.dance();   // 调用一个对象上的方法，确定一个方法中的this的指向，只需要看点“.”前面的是哪一个对象
</script>

4 . this出现在箭头函数中

在箭头函数中，this的指向对象是定义时所在的对象，而不是使用时所在的对象。对于平常时我们所说的定义时候的绑定，就是this是继承父类执行上下文中的this。
接下来我对于在普通方法中this的指向和箭头函数中this的指向做个对比：
普通方法中this指向的是obj1对象

<script>
      let x = 10;
      let obj1 = {
           x:20,
           out: function() {
                 console.log(this);  // this指向obj1类，输出 {x: 20, out: f}
                 consloe.log(this.x);  // this指向obj1类，“.x” 则表示this指向obj1类中的x属性，所以输出 x: 20;
           }
      }
      obj1.out();
</script>

箭头方法中的this指向的是父类上下文对象

<script>
       let x = 10;
       let obj2 = {
             out:() => {
                  console.log(this);  // this指向window对象
                  console.log(this.x); // 10
             }
       }
       obj2.out();

</script>

<script>
      let a = 10;
      function obj3() {
            this.a = 20;
            let b = () => {
                  console.log(this.a)   // this指向obj3函数对象   输出20
            }
            b();
      }
      let x = new obj3();  
</script>

普通方法中this指向调用者对象，没有调用者，就指向windows全局对象

<script>
      let a = 10;
      function obj4(){
            this.a = 20;
            let b = function(){
                 console.log(this.a);  // 输出10
            }
            b();
      }
      let x = new obj4();
</script>

上文所说的定义时绑定，就是this是继承父类执行上下文中的this，这里的箭头函数与out平级，也就是箭头函数本身就是所在的对象是obj，而obj的父类执行上下文是window。

5 . 在IIFE中,this表示window

在立即调用函数中，this的指向是全局变量即window。

<script>    
    (function () {        
         console.log(this);    
    })(); // 在非严格模式下，IIFE中的this表示window
</script>