關於JavaScript中this的理解

前言

使用JavaScript有很長一段時間了，可是之前過多都是使用，從不去及理解其中原理，單單只是去生拼硬湊。這樣的開發竟然作了2年。匪夷所思竟然項目中JavaScript的使用尚未遇到過越不過的坎。想一想也是難以置信，這應該全歸功於對框架的依賴，促使滋長了本身對學習JavaScript的懈怠。直到最近找工做才發現感受本身被框架掏空，對源生的JavaScript感到陌生，很基本的試題都以爲答不上來。真正的成了‘離職就失業的尷尬境地’。對此我就很少說了，畢竟發現問題算及時，因此下定決心去真正從零開始瞭解JavaScript這門語言。夯實好基礎是對一個開發人員最基本的要求，若是想走的更遠。這是一條長征之路。

咱們接下來來了解下JavaScript中的this的使用和做用。之前對JavaScript中this的理解很簡單粗暴：‘this’誰調用就指向誰。原理就這麼一句但要搞到透徹仍是有必定難度的，在一次筆試中就搞得很狼狽。

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

第一種 常態下的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 (爲何會返回undefined呢？
                                // 緣由就是當函數內部調用全局未定義的變量時候，
                               // this會私自定義一個funmu變量爲全局變量，
                              // 並付默認值就是undefined)。
            
            
            console.log('num1')
            console.log(num1)// 200  此時的num1就等於函數內的這個num1的值
            console.log(this.num1)// 11 (num1做爲參數傳進來後，
                                 // 初始值var num1 = 11覆蓋了num1 = 200)

            console.log('num2')
            console.log(num2)//300
            console.log(this.num2)// 300 (函數體內變量沒有var定義視爲全局變量，
                                 // 因此this時至關於從新對num2賦值300覆蓋了66)
            
            console.log('num')
            console.log(num)//100  此時的num當前的值就是本身
            console.log(this.num)// undefiined (爲何會返回undefined呢？
                                // 緣由就是當函數內部調用全局未定義的變量時候，
                               // this會私自定義一個num變量爲全局變量，
                              // 並付默認值就是undefined)。
        }
        fn1();
        console.log(num2)// 300 (函數體內變量沒有var定義視爲全局變量，
                        //    因此this時300覆蓋了66)
                        
        console.log(this.num2)// 300
    
        console.log(this.num)// undefined
        
        console.log(funmber) // 因爲做用域的關係，內部能夠訪問外部，外部正常狀況下不能訪問內部造成閉包
                            // 外部並未找到funmu的定義 ，
                           // 打印funmu is not defined（這句報錯下邊那句就不可能在執行了）
                         
        console.log(num)// 外部並未找到num的定義，會打印 num is not defined

第二種 常態下的this對象和new新的對象下的this

var age = 27;
        var obj = {
            age:30,
            say: function(){
                console.log(this.age)
            }
        }
        obj.say();//30  （此時的this.age指向在本obj對象ao中查找因此值爲30）
        var func = obj.say;//（把obj.say這個方法提出來付給func，
                          //func是全局函數因此this指向就是全局變量）
                          
        func();//27 （ 執行這個方法後本來obj.say裏的方法體付給func，
              // func沒法訪問obj裏面面的ao。因此他會向上找全局變量個var age = 27）
    

        var foo = '123'
        function aa(){
            var foo = '321'
            this.foo = '456'
            console.log(foo)//console裏面這個foo指的是aa(){}這個自身內的foo
                            //this.foo指的是var foo = ‘123’這個變量。若打印this.foo則輸出‘456’
                            //緣由是初始化值被覆蓋掉了
        }
        aa()
            
        var foo = '321'
        function pints(){
            this.foo = '123'
            console.log(foo)//console裏面的foo是全局變量var foo = 321 這個，
                            //pints（）裏面沒有變量foo，由於沒有聲明，
                            //this.foo指的是var foo=321 
                            //當前值123覆蓋了foo原聲明時的值321因此打印123
        }
        pints()
        
        var foo = '123'
        function test(){
            this.foo = '654'
            console.log(foo)
        }
        new test()//new一個test（）後，不能讀到以前的test（）裏面的foo，只能讀取全局的foo

第三種 常態下的this對象和new新的對象下的this

//    箭頭函數裏的前頭函數指向上級做用域
        var age = 26;
        var obj = {
            age:32,
            say:()=> {//箭頭函數指向是上級做用域
                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 此時的this.age指向上級做用域中的var age = 26；
                                     // 執行函數預編譯後this.age的值覆蓋age的初始值
                function fu(){
                    console.log(age) // 26  此時打印的是全局變量的初始值，這時的age在Person中沒有找到age，
                                    //  會再向上搜索因此找到了age=26
                }
                fu();
            }
            say();
        }
        var x = new Person() //22  new等同於Person（）的命令

差很少就這些狀況了，但願經過這些例子可以幫助你們理解this對象。若是例題中有不對的地方但願予以指教留言評論！！！