JS函数–this指向

函数名（）自执行，那么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

var oBox = {}

function Fn(x,y,z,a) {
    console.log(this);
}
Fn.call(document,1,2,3,4);    //call的第一个实参的是需要绑定的新的this的指向，第二个实参是第一个形参,以此类推

oBox.a = function () {
    console.log(this)
};
oBox.a.call();               //这里不写东西，就视作函数名加（）自执行，指向window

oBox.a.call(document);      //对象下面的属性也可以用call来改变this指向

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及以下

function fn() {
    console.log(this);
}
fn.bind(window);          //函数名.bind()是不会让函数执行的，这里和call、apply不一样

function fn() {
    console.log(this)
}
document.onclick = fn.bind(window); //被动触发事件函数时，函数名.bind()才会执行

document.onclick = function () {
    console.log(this);
}.bind(window);                     //匿名函数做事件函数可以.bind()，在函数触发时改变this指向