this

80 阅读2分钟

对于学习JavaScript这门语言的同学来说,this的指向肯定要掌握的;但是呢很多同学 学了很久,都还是处于一种云里雾里的状态,神似抓住了、掌握了、了解了、通透了;而一到使用环节、笔试题环节就拉跨,这是万万不行的🤦‍♂️🤦‍♂️🤦‍♂️。

开局先给同学们上个 R, 记住一点---函数中的 this ,谁调用它,它就指向谁,记住这一点!!!;

函数中的 this

函数预编译过程中的 this 指向 window ;


    function test(){
        console.log(this);
    }
    test();
    
    console.log(this);
    
    //此时,输出 Window{}

此时该函数中的 this 指向为 window ,空执行 其实就是 window.test()执行的形式,window调用test函数,所以 this 指向 window ;

被函数调用的 this

    var num = 111;
    var obj = {
        num: 222,
        fun: function(){
            console.log(this.num);
        }
    }
    
    var f = obj.fun;
    f();   //输出 111
    obj.fun();  //输出 222

空执行:小栗子,f()像这样的函数执行为空执行,真面目 window.f()

被执行:obj.fun(); 像这样的函数是被 某某某 对象调用而执行,被执行(俗语)

这里的 函数中的 this 被区分为,空执行,和被执行;

代码块中 f = obj.fun; 将函数体赋予f变量,然后执行则属于空执行,而函数空执行走的的预编译环节,预编译过程中的 this 指向 window ,也就是全局中的 num = 111;

而obj.fun();这样的函数执行,被obj调用而执行, 属于被执行(俗语),则 this 指向的是obj这个对象;

小栗子:

    var name = 111;
    var a = {
        name : 222,
        say: function(){
            console.log(this.name);
        }
    };
    
     var b = {
         name: 333;
         say: function(fun){
             fun();
         }
     };
     
     b.say(a.say);  //输出 111
         
     b.say = a.say;  
     
     b.say();  //输出 333

这个小栗子,如果大家能解开,this指向的掌握也差不多了;

先解答第一个:b.say(a.say);a.say 当做实参传入 b.say 中,然后空执行,所以 this.name 指向的是 window 中的 name = 111

第二个 b.say = a.say;,把 a.say 赋值给b.say; 然后 b.say( ); b对象中的say方法被 b 调用执行了,所以this指向的是b对象中 name = 333

小结:

this永远指向调用它的那个对象,this永远指向调用它的那个对象,this永远指向调用它的那个对象; call 、 apply 、 bind 例外。

小白鼠文章,欢迎大家纠正。