JS中this关键字的区别

JS与Java在this关键字上的处理是不同的,Java可以很清晰的明白this指代的是哪个对象,而js则会产生很多歧义,接下来,我们一步一步解释JS中不同函数或闭包里面的this关键字。

读以下代码之前,请先百度《JS变量作用域链》,来帮助理解。

重点:this关键字是谁调用指向谁!

普遍的函数调用:
最后一行代码是完整的调用写法,可以轻易看出调用者为window,所以方法里面的this指代window

function testThis1(){
    console.info("Test1="+this);
}
testThis1();// 简单的写法
window.testThis1();//完整的写法

嵌套函数调用:
外部函数将返回嵌套函数fn,此时并没有直接调用fn,而是在最外层才调用,所以结果也同上,是由window调用fn,fn里面的this为window

function testThis2(){
    var fn = function(){
        console.info("Test2="+this);
    }   
    return fn;
}
var temp = testThis2();// 将一个函数赋值给变量temp
temp();// 正式调用函数
window.temp();// 完整写法

对象的函数调用:
将函数赋值给对象的属性,作为对象的方法调用,此时调用应该是obj1.action(),明显的看出调用者变为了obj1,又由于所有全局变量都是window的属性,所以可以像最后一行那样调用函数,打印的this结果都是obj1

var obj1 = {
    action:function(){
        console.info("Test3="+this);
    }
};
obj1.action();// 对象函数调用
window.obj1.action();// 完整写法

调用对象函数返回的函数:
当对象函数里面返回函数时,实际上并没有立即调用这个函数,而是返回到最外层进行调用,所以这个嵌套函数的调用者仍然是window,但是对象函数调用者为obj2。也就是说action()里面this指代obj2,匿名嵌套函数this指代window

var obj2 = {
    action:function(){
        console.info(this);// 打印obj2
        var that = this;// 通常可以缓存this也就是obj2,然后内层函数就可以直接用that,而不是使用this了
        return function(){
            console.info(that);// 打印obj2
            console.info(this);// 打印window
        };
    }
}
obj2.action();// 返回一个函数,但此时没有调用该函数
obj2.action()();// 正式调用函数,该代码最后的效果应该类似于下面的代码
(function(){console.info(this);})();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值