关于JS中的this

js中的this就是一个大坑,也是众所周知的一个坑.

由于this在js中晚绑定的特性,所以this可以是全局对象也可能当前对象,我擦,这简直就是一把双刃剑.

1.全局的this

alert(this),这是全局的,但实际是undefined的.

2.局部函数的this

function func(i){
    this.i = i;
}
func(110);
alert(i); //输出110

我了个大艹,什么时候i成了全局对象了呢?实际上应该是undefined.

3.作为对象方法的this

var name = "Global";
var call = {
    name: "Caller",
    message: function(msg){
        console.log(this.name + ": " + msg);
    }
}
call.message("It's Caller."); //输出 Caller: It's Caller.

此处的this为当前成员的name,局部优先,没什么好说的.

4.内部函数的this

var name = "Global";
var call = {
    name: "Caller",
    message: function(msg){
        var inmsg = function(msg){
            console.log(this.name + ": " + msg);
        }
        inmsg(msg);
    }
}
call.message("It's Caller."); //输出 Global: It's Caller.

是不是很惊喜?是不是很惊讶?

在内部函数中,this没有按预想的绑定到外层函数对象上,而是绑定到了全局对象.这应该是JS语言的设计漏洞,当前this覆盖了上一层this,而没有继承下来.解决的办法是把上一级的this保存一下即可:

var call = {
    name: "Caller",
    message: function(msg){
        var that = this;
        var inmsg = function(msg){
            console.log(that.name + ": " + msg);
        }
        inmsg(msg);
    }
}

5.作为构造函数的this

new func();//this指向自身

局部优先,没什么好说的.

6.call与apply的this

call( thisArg [,arg1,arg2,… ] );  // 参数列表,arg1,arg2,...
apply(thisArg [,argArray] );     // 参数数组,argArray

两者都是将某个函数绑定到某个具体对象上使用,此时的this会被显式的设置为第一个参数.

总结

  1. 当函数作为对象的方法调用时,this指向该对象.

  2. 当函数作为淡出函数调用时,this指向全局对象(严格模式时,为undefined).

  3. 构造函数中的this指向新创建的对象.

  4. 嵌套函数中的this不会继承上层函数的this,如果需要,可以用一个变量保存上层函数的this.