JavaScript This指向，你搞懂了吗，不看你会后悔

JavaScript This指向，你搞懂了吗，不看你会后悔

相信有很多前端小伙伴们，对This指向依然是很迷糊，处于懵懂状态，今天我带你重新梳理一遍This指向问题～

对与This，我唯一的解释就是： “谁调用，This就指向谁” 当然这个说法也不是非常正确，下面我举例说明！

全局this指向Window

 // 例 1->
  console.log(this); // window
   function test() {
    
    
        console.log(this); // window
   }
   test(); // 因为函数是在Script里面执行时调用所以默认指向的是Window

事件里的this指向事件触发对象

 // 例 2->
    document.querySelector("dom").onclick = function () {
    
    
        console.log(this); // 因为函数是div onClick触发的，所以this指向事件触发对象，也就是 dom
    };

自调用函数this指window

 // 例 3->
      (function () {
    
    
        console.log(this); // Window
      })(); // 与例1类似，因为函数是在Script里面执行时调用所以默认指向的是Window

对象方法this指对象本身
下面例子我将 test 函数，赋值到了 obj 对象里，再通过对象形式调用test方法，此时方法是属于obj 对象的，所以此时的 This 指向的是 obj

 // 例 4->
    function test() {
    
    
       console.log(this); // obj
     }
     var obj = {
    
    
       test,
     };
     obj.test();

一个特殊的例子（快钉紧了…）
这里为一个自调用函数，也是随着Script执行而调用，内部只是一个赋值操作，并未改变this指向，所以这里的this还是指向的Window

// 例 5->
   function foo() {
    
    
      console.log(this); // Window
    }
    var obj = {
    
    
      foo,
    };
    var obj2 = {
    
    };
    (obj2.foo = obj.foo)(); // 自调用函数

构造函数的This指向
构造函数的 This 以及构造函数原型方法里的 This 都是指向将来new的实例对象，所以在此例子中 This 指向的是 Person

// 例 6->
      // 
      function Person(name) {
    
    
        this.name = name;
      }
      Person.prototype.say = function () {
    
    
        console.log(this,'Person00' );
      };
      console.log(new Person("lisi").say()); // Person {name: 'lisi'}

构造函数的This指向的特殊案例
没有归属的局部函数 This 指向 Window

      var cat = {
    
    
        name: "liLy",
        say: function () {
    
    
	          function getList() {
    
    
	            console.log(this); // Window
	          }
          getList(); // getName这个方法没有归属的，所以就是window
        },
      };
      cat.say();

箭头函数的 This 指向
由于箭头函数没有自己的 This，所以会自己向上找 This

        var cat = {
    
    
        name: "liLy",
        say: function () {
    
    
	          var getList = () => {
    
    
	            console.log(this); // 这里的This指向的就是 cat 对象
	          }
          getList(); 
        },
      };
      cat.say();
      
      (testArrow = () => {
    
    
        console.log(this, "this arrow"); 
        // 这里为自调用函数，箭头函数向上找 This 也只有 Window 了，所以这里打印出来也一定是 Window
      })();

看了这么多，请给K点个赞、加个关注呗～