探秘js中的this

381 阅读2分钟

你是不是和我一样,觉得this是个难以捉摸的神秘玩意儿,一会指向这个,一会又指向那个,可谓神秘莫测。这篇文章是我在学习过程中对this的一些总结,或许能拨开一些笼罩在this上的重重谜团……

什么是this

this是js中的关键字之一,它也是很多语言的关键字,用于指定某一个对象。

this, self, and Me are keywords used in some computer programming languages to refer to the object, class, or other entity of which the currently running code is a part. --《维基百科》

this的谜之身份

上一部分,我们已经知道了js用来指定某一个对象或者实体等,看起来好像很简单,实则难的一逼,难就难在this的身份总是难以捉摸的。下面搞几个例子:

情况1:全局

    var a=1;
    console.log(this.a);
    console.log(this);

输出结果:

全局变量a是挂在全局window上的,此时的this是window

console.log(this.a);相当于console.log(window.a);

情况2:全局函数

    function f(){
        console.log(this);
    }
    f();

输出结果:

因为f()为全局函数,下面调用f()相当于window调用了f(),此时的this是window

情况3:对象的方法

    var a=1;
    let obj = {
        a:2,
        say:function(){
            console.log(this.a)
        }
    }
    obj.say();
    let f=obj.say;
    f();

输出结果:

这个结果可以说明,当用obj.say()调用函数时,this是obj当用f()调用函数时,this是window

到这里就可以得出一个重要结论:谁调用了包含this的函数,this就是谁

情况4:new

    function One(){
        console.log(this)
    }
    One();
    let a=new One();

输出结果:

如果在调用函数之前加一个new的话,会创建并返回一个新的对象,这个函数内部的this就会指向这个对象

情况5:call和apply

    function f(){
        console.log(this);
    }
    let obj={};
    f.call(obj);

输出结果:

    function f(){
        console.log(this);
    }
    let obj={};
    f.apply(obj);

输出

使用call和apply,this指向第一个参数

结束

归根到底,真理就是一句话:

谁调用了,this就是谁

实践是检验真理的唯一标准,再错综复杂的this身份之谜的真相也通过实验例子慢慢浮出水面,不过本文也就只是抛砖引玉,皮毛而已,希望能有所帮助。