JS函数–this指向

缺乏、安全感 2023-02-11 12:24 132阅读 0赞

> ### 函数名（）自执行，那么this指向的就是window ###

函数自执行的时候，是处于全局环境下的，所以 this 指向 window

function Fn() {
      console.log(this);
    }
    Fn();    // window

> ### 作为对象方法调用，this 指向该对象 ###

var o = {
      m: function test() {
        console.log(this);
      }
    };
    
    o.m(); // {m : func}

> ### 作为事件函数触发，this指向函数触发的主体  ###

document.onclick = function () {
      console.log(this); // document 函数触发时执行，this指向该事件函数触发主体
    };

> ## 作为构造函数调用，this 指代new 出的对象  ##

var x = 2; //全局对象x
    
    function Test() {
      //构造函数Test
    
      this.x = 1; //局部对象x
    
      console.log(this); // Test {x: 1},实例化的对象，也就是 o
    
      console.log(this.x); // 1
    
      console.log(x); // 2 此时x为全局对象，指向window
    }
    
    var o = new Test(); //调用构造函数创建实例对象。this指向该实例对象

> ### 改变this指向 ###

js有三个方法来改变this指向，分别是 call、apply、bind

**call：**第一个实参的是需要绑定的新的this的指向，第二个实参是第一个形参 。第一个实参为null，undefined，不写东西的时候都是指向window

**apply：**第一个实参的是需要绑定的新的this的指向，第二个实参是一个数组的形式，数组第一个对应形参第一个。第一个实参为null，undefined，不写东西的时候都是指向window

function Fn(x,y,z,a) {
    
         alert(x+y+z+a);        //10
    
         console.log(this);     //document
     };
     Fn.apply(document,[1,2,3,4])//call的第一个实参的是现在this的指向，数组第一个实参是第一个形参

**bind：**并不会让函数立刻自执行，当函数被执行的时候才会改变this指向。在被动执行的时候也可以传参数，和call的形式一样。不支持IE8及以下