js this详解

博客

this是执行上下文环境的一个属性，而不是某个变量对象的属性。this与上下文中可执行代码的类型有直接关系，它的值在进入上下文时确定，并且在执行上下文期间永久不变。this有4种调用模式：函数调用，方法调用，构造函数调用和通过apply/call显示调用。接下来将分别讨论一下这4种模式。

函数调用

函数调用的方式就是在全局环境中执行函数,因此在浏览器中this就代表全局对象window.

var x=1;
function f1(){
 console.log(this.x);//1
 console.log(this==f1);//false
 console.log(this==window);//true
}
f1();

方法调用

方法调用就是函数作为某个对象的方法调用，这时this就是指这个对象。

var x=1;
var obj={
 x:2,
 f2:function(){
    console.log(this.x);
    console.log(this==obj);
    console.log(this==window);
 }
}
obj.f2();//2 true false

但是如果把对象里的方法先赋给一个变量，然后再执行，那就是在全局环境中执行了，而不是在原来的对象中执行，这时this的值还是window。

//接上例
var func=obj.f2;
func();// 1 false true

这是因为this的值是在执行时确定的，而不是在定义时确定的。当把函数作为对象的方法赋给一个变量时，这个变量是在全局定义的，所以调用是在全局调用的。

构造函数调用

构造函数是一类特殊的函数，一般首字母大写，通过new关键字可以生成一个新对象，这时this就是指这个新对象。

function People(name){
    this.name=name;
    this.getName=function(){
         console.log(this.name);
         console.log(this==People);
         console.log(this==boy);
    }
}
var boy=new People("tom");
boy.getName();//tom false true
//在这里this是指boy这个对象

apply/call调用

apply和call可以显式地改变调用某个方法的this的指向，功能相同，第一个参数都是this的指向值,其余的参数是方法的参数。不同之处是call的其余参数是普通的参数列表形式，而apply是数组形式。

var x=1;
 function func(){
    console.log(this.x);
 }
 var obj={
    x:2,
    m:func
 }
 obj.m();//2 this==obj
 var obj2={x:3};
 obj.m.call();//1 不传参时默认调用全局对象 this==window
 obj.m.apply(obj2);//3 this==obj2

总结

this表示当前运行的对象，在函数或方法内部可以使用this来获得对该对象自身的引用，但this并不是指定义该方法的对象，它的值取决于调用它的对象。