摘要：想想也是難以置信，這應(yīng)該全歸功于對(duì)框架的依賴，促使助長了自己對(duì)學(xué)習(xí)的懈怠。真正的成了離職就失業(yè)的尷尬境地。我們接下來來了解下中的的使用和作用。以前對(duì)中的理解很簡(jiǎn)單粗暴誰調(diào)用就指向誰。如果例題中有不對(duì)的地方希望予以指教留言評(píng)論

前言

使用JavaScript有很長一段時(shí)間了，但是以前過多都是使用，從不去及理解其中原理，單單只是去生拼硬湊。這樣的開發(fā)居然做了2年。匪夷所思居然項(xiàng)目中JavaScript的使用還沒有遇到過越不過的坎。想想也是難以置信，這應(yīng)該全歸功于對(duì)框架的依賴，促使助長了自己對(duì)學(xué)習(xí)JavaScript的懈怠。直到最近找工作才發(fā)現(xiàn)感覺自己被框架掏空，對(duì)源生的JavaScript感到陌生，很基本的試題都覺得答不上來。真正的成了‘離職就失業(yè)的尷尬境地’。對(duì)此我就不多說了，畢竟發(fā)現(xiàn)問題算及時(shí)，所以下定決心去真正從零開始了解JavaScript這門語言。夯實(shí)好基礎(chǔ)是對(duì)一個(gè)開發(fā)人員最基本的要求，如果想走的更遠(yuǎn)。這是一條長征之路。

我們接下來來了解下JavaScript中的this的使用和作用。以前對(duì)JavaScript中this的理解很簡(jiǎn)單粗暴：‘this’誰調(diào)用就指向誰。原理就這么一句但要搞到透徹還是有一定難度的，在一次筆試中就搞得很狼狽。

接下來我將用寫代碼片段來解釋this的使用和功能

第一種 常態(tài)下的this

        var num1 = 11;
        var num2 = 66;
        function fn1(num,num1){
            var funmber = "我是fn1的孩子！你管不到我??！"
            num = 100;
            num1 = 200;
            num2 = 300;
            console.log(funmber)// 我是fn1的孩子！你管不到我！！
            
            console.log(this.funmber)// undefiined (為什么會(huì)返回undefined呢？
                                // 原因就是當(dāng)函數(shù)內(nèi)部調(diào)用全局未定義的變量時(shí)候，
                               // this會(huì)私自定義一個(gè)funmu變量為全局變量，
                              // 并付默認(rèn)值就是undefined)。
            
            
            console.log("num1")
            console.log(num1)// 200  此時(shí)的num1就等于函數(shù)內(nèi)的這個(gè)num1的值
            console.log(this.num1)// 11 (num1作為參數(shù)傳進(jìn)來后，
                                 // 初始值var num1 = 11覆蓋了num1 = 200)

            console.log("num2")
            console.log(num2)//300
            console.log(this.num2)// 300 (函數(shù)體內(nèi)變量沒有var定義視為全局變量，
                                 // 所以this時(shí)相當(dāng)于重新對(duì)num2賦值300覆蓋了66)
            
            console.log("num")
            console.log(num)//100  此時(shí)的num當(dāng)前的值就是自己
            console.log(this.num)// undefiined (為什么會(huì)返回undefined呢？
                                // 原因就是當(dāng)函數(shù)內(nèi)部調(diào)用全局未定義的變量時(shí)候，
                               // this會(huì)私自定義一個(gè)num變量為全局變量，
                              // 并付默認(rèn)值就是undefined)。
        }
        fn1();
        console.log(num2)// 300 (函數(shù)體內(nèi)變量沒有var定義視為全局變量，
                        //    所以this時(shí)300覆蓋了66)
                        
        console.log(this.num2)// 300
    
        console.log(this.num)// undefined
        
        console.log(funmber) // 由于作用域的關(guān)系，內(nèi)部可以訪問外部，外部正常情況下不能訪問內(nèi)部形成閉包
                            // 外部并未找到funmu的定義 ，
                           // 打印funmu is not defined（這句報(bào)錯(cuò)下邊那句就不可能在執(zhí)行了）
                         
        console.log(num)// 外部并未找到num的定義，會(huì)打印 num is not defined

第二種 常態(tài)下的this對(duì)象和new新的對(duì)象下的this

        var age = 27;
        var obj = {
            age:30,
            say: function(){
                console.log(this.age)
            }
        }
        obj.say();//30  （此時(shí)的this.age指向在本obj對(duì)象ao中查找所以值為30）
        var func = obj.say;//（把obj.say這個(gè)方法提出來付給func，
                          //func是全局函數(shù)所以this指向就是全局變量）
                          
        func();//27 （ 執(zhí)行這個(gè)方法后原本obj.say里的方法體付給func，
              // func無法訪問obj里面面的ao。所以他會(huì)向上找全局變量個(gè)var age = 27）
    

        var foo = "123"
        function aa(){
            var foo = "321"
            this.foo = "456"
            console.log(foo)//console里面這個(gè)foo指的是aa(){}這個(gè)自身內(nèi)的foo
                            //this.foo指的是var foo = ‘123’這個(gè)變量。若打印this.foo則輸出‘456’
                            //原因是初始化值被覆蓋掉了
        }
        aa()
            
        var foo = "321"
        function pints(){
            this.foo = "123"
            console.log(foo)//console里面的foo是全局變量var foo = 321 這個(gè)，
                            //pints（）里面沒有變量foo，因?yàn)闆]有聲明，
                            //this.foo指的是var foo=321 
                            //當(dāng)前值123覆蓋了foo原聲明時(shí)的值321所以打印123
        }
        pints()
        
        var foo = "123"
        function test(){
            this.foo = "654"
            console.log(foo)
        }
        new test()//new一個(gè)test（）后，不能讀到之前的test（）里面的foo，只能讀取全局的foo

第三種 常態(tài)下的this對(duì)象和new新的對(duì)象下的this

//    箭頭函數(shù)里的前頭函數(shù)指向上級(jí)作用域
        var age = 26;
        var obj = {
            age:32,
            say:()=> {//箭頭函數(shù)指向是上級(jí)作用域
                console.log(this.age)
                console.log(age)
            }
        }
        obj.say()//都是26

//方法中的方法
        var age = 26;
        function Person(){
            this.age = 22;
//            var age = 18;
            let say = () => {
//                var age = 19;
                console.log(this.age) // 22 此時(shí)的this.age指向上級(jí)作用域中的var age = 26；
                                     // 執(zhí)行函數(shù)預(yù)編譯后this.age的值覆蓋age的初始值
                function fu(){
                    console.log(age) // 26  此時(shí)打印的是全局變量的初始值，這時(shí)的age在Person中沒有找到age，
                                    //  會(huì)再向上搜索所以找到了age=26
                }
                fu();
            }
            say();
        }
        var x = new Person() //22  new等同于Person（）的命令

差不多就這些情況了，希望通過這些例子能夠幫助大家理解this對(duì)象。如果例題中有不對(duì)的地方希望予以指教留言評(píng)論?。。?/p>