你真的懂this指向？

先搞清楚一點，如果this在函數里面，那么它指向的是“函數執(zhí)行后”的上一級調用對象。

        var a="this is a";
        function main() {
        console.log(this.a)//這里this指向window.
        }
        main()//這里相當于window.main()，默認window對象了，所以可以省略;



var o={
            x:"this is x",
            y:"this is y",
            say:function(){
                console.log(this.x);
            }
        }
        o.say();//這里的this指向的是對象o，因為你調用這個say是通過o.say()執(zhí)行的，那自然指向就是對象o，這里再次強調一點，this的指向在函數創(chuàng)建的時候是決定不了的，在調用的時候才能決定，誰調用的就指向誰，一定要搞清楚這個。



var o={
            name:"maomin",
            say1:function(){
                console.log(this.name);//maomin
            }
        }
        window.o.say1();
        // 上面幾行代碼和之前的代碼幾乎相似，為什么沒有指向window,這就回到了我剛開始說的，this如果在函數內，那么它指向的是該函數執(zhí)行后的上一級調用對象。



var o={
             a:"this is a",
             b:{
                 a:"I am a",
                 say:function(){
                     console.log(this.a);//this is a
                 }
             }
         }
         var f=o.b.say;
         f();
    // 這里肯定有疑問了？為什么會指向o呢，不是應該指向b嗎？這時你應該注意到這里say沒有調用執(zhí)行，而是通過o.b.say賦值給變量f,然后才被執(zhí)行。這樣就指向o了。



    function Fn(job){
            this.job=job;
        }
        var i=new Fn("I am Engineer");
        console.log(i.job);//I am Engineer
    // 這里是一個構造函數，注意的是this指向構造函數new出來的對象。
    // 首先new關鍵字會創(chuàng)建一個空的對象，然后會自動調用一個函數的一個方法，將this指向這個空對象，這樣的話函數內部的this就會被這個空的對象替代。



    function Fn1(age){
            this.age=age;
            return {};
        }
        var ii=new Fn1("I am 21");
        console.log(ii.age);//undefined
        function Fn2(love){
            this.love=love;
            return function(){

            }
        }
        var iii=new Fn1("My grilfriend is xqm");
        console.log(iii.love)//undefined
        function Fn3(like){
            this.like=like;
            return 1;
        }
        var iiii=new Fn3("I like playing CF")
        console.log(iiii.like)//I like playing CF
// 當return一個對象時，打印出undefined。其他情況指向函數的實例。



針對上面一大堆的代碼和解釋是不是對this指向有點頭疼呢，當然上面的都是在函數體內的，還有其他情況的this指向這里沒說。
下面只是簡單的列舉
規(guī)律1 函數圓括號直接調用 函數上下文為window
規(guī)律2 函數作為對象的方法打點調用 函數上下文就是這個對象
規(guī)律3 函數作為事件的處理函數 函數上下文就是出發(fā)這個事件的對象
規(guī)律4 定時器調用函數 函數上下文為window
規(guī)律5 數組存放的函數 被數組索引調用 this就是這個數組
其實這五個規(guī)律前四個都涉及過，就是第五個沒有接觸過

function fun() {
        console.log(this)
}
    var arr=[fun,"a","a"];
    arr[0]();



其實仔細總結，如果this在函數里面，那么它指向的是“函數執(zhí)行后”的上一級調用對象一直適用。



作者：Vam的金豆之路

主要領域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路