js函數的new呼叫與普通呼叫中this的差異問題

先看一段程式碼感受一下this的作用。

        place='out';                    
            function where(){
                    var place='in';
                    alert(place);         //in
                    alert(this.place);    //out
                    }

                    where();

從中可以得知，place獲得了函數內部的變量，而this.place則獲得了外部的變數值。這是為什麼呢？其實，this的作用是指向執行目前函數的外部環境物件。這裡執行where時的環境是全域環境，所以this指向global（在瀏覽器中是window），那麼 this.place 得到的就是全域變數 place 了。

透過下面一段程式碼進行驗證。

       place='out';
                    passer={                        var place: 'in',
                        askWhere: function(){
                            alert(this.place);   //in
                        },
                    };

                    passer.askWhere();

這裡的this在askWhere指向的函數中，函數執行的外部環境是passer對象，所以 this 指向 passer 對象，this.place 得到的也就是 in 。

那麼再看下面一段程式碼，new 會導致函數中的 this 出現哪些不同呢？

                    function Passer(){
                        this.place = 'in';                        this.askWhere = function(){
                            alert( this.place );    //in
                        }
                    }
                    alert(window.place);            //undefined
                    Tom = new Passer();
                    Tom.askWhere();

如果按照先前的理論分析，Passer 中的 this 指向 global ，那麼this.place 應該是在全局環境中定義了place，為什麼會出現window.place = undefined 的情況呢？

這裡就體現出new 呼叫與普通呼叫的差別了。其實 new 操作時進行了一下幾個步驟：

                1.创建一个新的对象（并把空对象的__proto__属性设置为Passer.prototype)。

                2.将构造函数的作用域赋给新对象（此时this 指向了这个新对象）。

                3.执行构造函数中的代码（通过this 为这个新对象添加属性）

                4.返回新对象。

因此這裡的this 實際上並沒有指向全局，而是一個新的物件。那麼執行askWhere 時函數內的this 也是指向這個新的物件內部的。

如果這裡的建構子Passer 進行普通調用，結果和我們最開始的分析是相符的。

總結：在對函數進行new 呼叫時this 的表現的根本原因在於創建了一個新的物件並將建構函數的作用域賦給新對象，這使得this 指向了新物件。其實this 指向執行目前函數的外部環境物件的作用是一直沒變的。

#

以上是js函數的new呼叫與普通呼叫中this的差異問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！