JS 中 this用法整理

目录

一、this指向该函数的调用者

二、this指向全局环境(浏览器:window、node.js：global)

三、this 指向利用call或apply所指向派给this的环境

四、this指向new所产生的环境

五、回调函数内this指向调用它的对象

六、箭头函数

---

一、this指向该函数的调用者

形式

 obj.fn()； //函数内的this指向obj

案例

var obj={
    x:10,
    f:function(){
        console.log(this.x);
    }
}
obj.f(); //f内this指向obj 则输出 10

二、this指向全局环境(浏览器:window、node.js：global)

如果调用函数的前面没有调用者，则函数式内this指向全局环境，在浏览器中全局环境为window，而在node.js中全局为global。

形式

    fn(); //函数内this指向全局环境

案例

var x=10;
var f=function(){
    console.log(this.x);
};
f(); //在window环境中则输出 10,在node中执行则会输出undefined

//案例二
var x=10;

var obj={
    x:20,
    f:function(){
        console.log(this.x);
        var foo=function(){
            console.log(this.x);
        }
        foo(); //(2)
    }
};
obj.f(); //(1)
//则会输出 20 10 按方式一和二可以推到出来

三、this 指向利用call或apply所指向派给this的环境

形式

    (A.)fn.call(B,参数1，参数2，.....)； //函数this指向B环境

    (A.)fn.apply(B,[参数1，参数2，参数3，......]);

案例

var obj={
    x:10,
    f:function(){
        console.log(this.x);
    }
}
var obj2={
    x:30;
}

obj.f.call(obj2); //利用call指派f的this指向obj2,则输出 30

四、this指向new所产生的环境

若函数当中对象来用,则内部的this则指向于new所产生的环境

形式

     new F(); 

案例

function F(){
    this.a=100;
}

var f=new F();
//f.a

五、回调函数内this指向调用它的对象

该形式只是上面形式的一个变形，即将自己的this传给回调函数

案例

//jQuery中最常见
$('#btn1').click(function(){

    this.html('clicked');

});

六、箭头函数

看到这里，可能很多人会为this指向感动发愁,其它在es6中，我们可以使用箭头函数来避免上面的情况发生。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id:42

  Note： es6箭头函数的this指向是定义时所在的对象。

传送门:es6入门