1. 程式人生 > >談談 JavaScript 中的 宣告提前

談談 JavaScript 中的 宣告提前

新增連結描述
今日頭條:JS的作用域和宣告提前
-遇到微信子域bug:

   onLoad: function() {
   
        this.dsize = cc.view.getDesignResolutionSize();
        this.userInfo = null;
        this.friendRank = null; 					//------------------聲明瞭呀  為啥報錯
        this.groupRank = null;
        this.bFriendRank = true;  
        this.chaoyueData = [];
        var self = this;   

        wx.onMessage(function(data){        
            console.log("----------------------- onMessage: ",data.message);
            console.log("-------------------- ---123456sddsdsds:  ",self.userInfo);
            return ; 												 //也沒用  還報錯 --- 淚崩呀
            if(data.message == "closeOver")     
            {
                self.node_over.active = false; 
            }
            else if(data.message == "groupRank") { 
                var self = this;						//---------------這裡呀老鐵
                self.bFriendRank = false;

                self.nPageIndex = 0;
                self.showPaimingByGroupFriend();
                self.nPageIndex++;

            }
            else if(data.message == "loginSuccess")
            {
                self.userInfo = JSON.parse(data.userInfo);  // 報錯:userInfo  unfefined
                    console.log("----------------------- onMessage  3 : ", self.userInfo );
                self.getUserRank();
            }
}

在這裡插入圖片描述


練習題1
var a=123;
function a(){ return 1 }
console.log(a);
解析1: 
這道題在弄明白什麼是 “宣告提前”後比較簡單做! 
按照剛才講到的概念,這道題會變成這樣,

var a;
function a(){ return 1 }
a=123;
console.log(a); 

所以最後會輸出 123

練習題2
function a(){ return 1 }
var a;
a();

解析2 
完成這道題,還需要知道一件事情,如果未在var宣告語句中給變數指定初始值,那麼雖然宣告這個變數,但在給它存入一個值之前,它的初始值就是undefined,但是多次宣告同一變數無所謂!!!所以這道題的結果是 1程式碼會預編譯為:

var a;  //初始值為 undefined
function a(){ return 1 }
a();

練習題3
function a(){ return 1 }
var a=undefined;
a();

解析3 
這道題,和第2題非常的相似,只需要明白這裡 var a=undefined; 和 var a;是不同的,一個是宣告變數同時進行賦值操作,只是賦的值是undefined,一個是單純的宣告變數。 
程式碼會預編譯為:

var a; //初始值為 undefined
function a(){ return 1 }
a=undefined;
a();

所以最後的結果會報錯 a is not a function

練習題4
if(!("a"in window)) {
    var a = 1;
};
var a;
alert(a);

首先介紹下Javascript的函式作用域的概念,然後瞭解下什麼是作用域和宣告提前,最後通過一個例子剖析Javascript的作用域鏈。

1.變數的作用域

稍微有些程式設計背景的都知道,變數的作用域分為兩種: 全域性變數 和 區域性變數 。

Javascript是一門 弱型別語言 。所有的變數宣告都是通過var來接收,如

var num = 1;
var str = “string”;
var flag = true;
看似是一個非常省事的機制,但是也有讓人頭疼的時候,一些隱式的型別轉換經常會把搞暈。先看看全域性變數和區域性變數:

var g = "global"; function f(){ var l = "local"; 
} 

注意 : 1. 如果在函式f()中將去掉var宣告,則變數l就會從區域性變數升級為全域性變數。

  1. 區域性變數的優先順序高於同名的全域性變數 。如果在函式f()中宣告一個區域性變數也為g,則全域性變數就會被區域性變數覆蓋

2.作用域和宣告提前

看到Javascript作用域這塊,可以說顛覆了以前我對作用域的認識。類似Java和C等程式語言,在花括號“{}”內的程式碼都是有各自的作用域的,並且在這個範圍以外,這些變數是不可見的,我們稱這種作用域為 塊級作用域 。

但是這完全不適用於Javascript,因為Javascript沒有塊級作用域,但是Javascript有 函式作用域 。函式作用域簡言之就是:變數在宣告他們的函式體以及這個函式體巢狀的任意函式體內都是有定義的。

對於“ 變數在宣告他們的函式體以及這個函式體巢狀的任意函式體內都是有定義的 ”這句話的延伸理解:變數在宣告之前就已經可用。我們稱這種特性為宣告提前,也就是函式裡的所有變數都被“提前”至函式體的頂部。

下面我們看一個經典的陷阱案例:

var v = "yoyo"; (function(){ console.log(v); var v = "check now"; 
    console.log(v); 
})(); 

對於第二次執行結果“check now”沒有什麼特別的,為什麼第一次輸出的不是“yoyo”而是“undefined”。

對於這個問題的解釋就用到上面的那句話, 區域性變數在整個函式體始終是有定義的 ,即在函式體內區域性變數覆蓋了同名全域性變數,而且,程式只有在執行到var語句時,區域性變數才會被真正賦值。所以,這時你大概會明白為什麼是undefined了,因為此時還沒有遇到var,即沒有定義,等價於下面的形式:

var v = "yoyo"; (function(){ var scope; console.log(v); var v = "check now"; 
    console.log(v); 
})(); 

疑問 ? ? ?

將上面的程式碼稍稍修改為:

var v = “yoyo”; (function(){
console.log(v);
})();
執行結果為:

相比於上面的程式碼只是少了一行新增一個區域性變數v並賦值的語句,但是結果卻是“yoyo”。

這裡之所以輸出“yoyo”,不能按照上面的定式思維。上面有句話叫“區域性變數在整個函式體始終是有定義的”,但是這裡沒有區域性變數的定義,所以按照下面要提到的作用域鏈會逐層向上尋找變數,最後找到了全域性變數v,從而最後的輸出是“yoyo”。

舉一個通俗點的例子,你準備要花錢買點東西時,會先摸摸自己的錢包,沒了你可以找你爸要,你爸也沒有就再找你爺爺,… 。而你爸沒錢買東西時,他並不會來找你要。

以上是我的個人理解,如果你對這兩種情況有自己的理解,請在下方給出,望不吝指教。

3.作用域鏈

全域性變數在程式中始終是有定義的,區域性變數在宣告它的函式體內以及其所巢狀的函式內始終是有定義的。

每一段Javascript程式碼(全域性程式碼或函式)都有一個與之相關聯的作用域鏈,這個作用域鏈就是一個物件列表或連結串列。比如當 Javascript需要查詢變數x的值時,它會從鏈中的第一個物件開始,如果該物件有一個名為x的屬性,則直接使用,如果不存在名為x的屬性,則會繼續 向鏈上的下一個物件查詢,如此遞迴下去直到找到。如果整個鏈上都找不到,則認為不存在x這個屬性。舉例:

name=“lwy”; function t(){ var name=“tlwy”; function s(){ var name=“slwy”; console.log(name); } function ss(){ console.log(name); } s(); ss();
}
t();