javascript變量聲明 及做用域

javascript變量聲明提高(hoisting)

 http://openwares.net/js/javascript_declaration_hoisting.html 可能要FQ一下

javascript的變量聲明具備hoisting機制，JavaScript引擎在執行的時候，會把全部變量的聲明都提高到當前做用域的最前面。

先看一段代碼

1 2 3 4 5

var v = "hello" ; ( function (){    console.log(v);    var v = "world" ; })();

這段代碼運行的結果是什麼呢？
答案是：undefined
這段代碼說明了兩個問題，
第一，function做用域裏的變量v遮蓋了上層做用域變量v。代碼作少些變更

1 2 3 4 5

var v = "hello" ; if ( true ){    console.log(v);    var v = "world" ; }

輸出結果爲」hello」,說明javascript是沒有塊級做用域的。函數是JavaScript中惟一擁有自身做用域的結構。

第二，在function做用域內，變量v的聲明被提高了。因此最初的代碼至關於：

1 2 3 4 5 6

var v = "hello" ; ( function (){    var v; //declaration hoisting    console.log(v);    v = "world" ; })();

聲明、定義與初始化

聲明宣稱一個名字的存在，定義則爲這個名字分配存儲空間，而初始化則是爲名字分配的存儲空間賦初值。
用C++來表述這三個概念

1 2 3

extern int i; //這是聲明，代表名字i在某處已經存在了 int i; //這是聲明並定義名字i,爲i分配存儲空間 i = 0; //這是初始化名字i,爲其賦初值爲0

javascript中則是這樣

1 2	var v; //聲明變量v v = "hello" ; //(定義並)初始化變量v

由於javascript爲動態語言，其變量並無固定的類型，其存儲空間大小會隨初始化與賦值而變化，因此其變量的「定義」就不像傳統的靜態語言同樣了，其定義顯得可有可無。

聲明提高

當前做用域內的聲明都會提高到做用域的最前面，包括變量和函數的聲明

1 2 3 4 5 6

( function (){    var a = "1" ;    var f = function (){};    var b = "2" ;    var c = "3" ; })();

變量a,f,b,c的聲明會被提高到函數做用域的最前面，相似以下：

1 2 3 4 5 6 7

( function (){    var a,f,b,c;    a = "1" ;    f = function (){};    b = "2" ;    c = "3" ; })();

請注意函數表達式並無被提高，這也是函數表達式與函數聲明的區別。進一步看兩者的區別：

1 2 3 4 5 6 7 8 9

( function (){    //var f1,function f2(){}; //hoisting,被隱式提高的聲明      f1(); //ReferenceError: f1 is not defined    f2();      var f1 = function (){};    function f2(){} })();

上面代碼中函數聲明f2被提高，因此在前面調用f2是沒問題的。雖然變量f1也被提高，但f1提高後的值爲undefined,其真正的初始值是在執行到函數表達式處被賦予的。因此只有聲明是被提高的。

名字解析順序

javascript中一個名字(name)以四種方式進入做用域(scope)，其優先級順序以下：
一、語言內置：全部的做用域中都有 this 和 arguments 關鍵字
二、形式參數：函數的參數在函數做用域中都是有效的
三、函數聲明：形如function foo() {}
四、變量聲明：形如var bar;

名字聲明的優先級如上所示，也就是說若是一個變量的名字與函數的名字相同，那麼函數的名字會覆蓋變量的名字，不管其在代碼中的順序如何。但名字的初始化倒是按其在代碼中書寫的順序進行的，不受以上優先級的影響。看代碼：

1 2 3 4 5 6 7 8 9

( function (){      var foo;      console.log( typeof foo); //function            function foo(){}        foo = "foo" ;      console.log( typeof foo); //string })();

若是形式參數中有多個同名變量，那麼最後一個同名參數會覆蓋其餘同名參數，即便最後一個同名參數並無定義。

以上的名字解析優先級存在例外，好比能夠覆蓋語言內置的名字arguments。

命名函數表達式

能夠像函數聲明同樣爲函數表達式指定一個名字，但這並不會使函數表達式成爲函數聲明。命名函數表達式的名字不會進入名字空間，也不會被提高。

1 2 3 4 5

f(); //TypeError: f is not a function foo(); //ReferenceError: foo is not defined var f = function foo(){console.log( typeof foo);}; f(); //function foo(); //ReferenceError: foo is not defined

命名函數表達式的名字只在該函數的做用域內部有效。
===
在認識一切事物以後，人才能認識本身，由於事物僅僅是人的界限。 —— 尼采

 

Js做用域與做用域鏈詳解

http://blog.csdn.net/yueguanghaidao/article/details/9568071

  一直對Js的做用域有點迷糊，今天偶然讀到Javascript權威指南，立馬被吸引住了，寫的真不錯。我看的是第六版本，至關的厚，大概1000多頁，Js博大精深，要熟悉精通須要大毅力大功夫。

一：函數做用域

   先看一小段代碼：

var scope="global";
function t(){
    console.log(scope);
    var scope="local"
    console.log(scope);
}
t();

(PS: console.log()是firebug提供的調試工具，很好用，有興趣的童鞋能夠用下，比瀏覽器+alert好用多了）

第一句輸出的是： "undefined"，而不是 "global"

第二講輸出的是："local"

  你可能會認爲第一句會輸出："global",由於代碼還沒執行var scope="local",因此確定會輸出「global"。

  我說這想法徹底沒錯，只不過用錯了對象。咱們首先要區分Javascript的函數做用域與咱們熟知的C/C++等的塊級做用域。

  在C/C++中，花括號內中的每一段代碼都具備各自的做用域，並且變量在聲明它們的代碼段以外是不可見的。而Javascript壓根沒有塊級做用域，而是函數做用域.

所謂函數做用域就是說：-》變量在聲明它們的函數體以及這個函數體嵌套的任意函數體內都是有定義的。

因此根據函數做用域的意思，能夠將上述代碼重寫以下：

var scope="global";
function t(){
    var scope;
    console.log(scope);
    scope="local"
    console.log(scope);
}
t();

    咱們能夠看到，因爲函數做用域的特性，局部變量在整個函數體始終是由定義的，咱們能夠將變量聲明」提早「到函數體頂部，同時變量初始化還在原來位置。

爲何說Js沒有塊級做用域呢，有如下代碼爲證：

var name="global";
if(true){
    var name="local";
    console.log(name)
}
console.log(name);

都輸出是「local",若是有塊級做用域，明顯if語句將建立局部變量name,並不會修改全局name,但是沒有這樣，因此Js沒有塊級做用域。

如今很好理解爲何會得出那樣的結果了。scope聲明覆蓋了全局的scope,可是尚未賦值，因此輸出：」undefined「。

因此下面的代碼也就很好理解了。

function t(flag){
    if(flag){
        var s="ifscope";
        for(var i=0;i<2;i++)
            ;
    }
    console.log(i);
    console.log(s);
}
t(true);

輸出：2  」ifscope"

二：變量做用域

仍是首先看一段代碼：

function t(flag){
    if(flag){
        s="ifscope";
        for(var i=0;i<2;i++)
            ;
    }
    console.log(i);
}
t(true);
console.log(s);

就是上面的翻版，知識將聲明s中的var去掉。

程序會報錯仍是輸出「ifscope"呢？

讓我揭開謎底吧，會輸出：」ifscope"

這主要是Js中沒有用var聲明的變量都是全局變量，並且是頂層對象的屬性。

因此你用console.log(window.s)也是會輸出「ifconfig"

當使用var聲明一個變量時，建立的這個屬性是不可配置的，也就是說沒法經過delete運算符刪除

var name=1    ->不可刪除

sex=」girl「         ->可刪除

this.age=22    ->可刪除

三：做用域鏈

先來看一段代碼：

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

當執行s時，將建立函數s的執行環境(調用對象),並將該對象置於鏈表開頭，而後將函數t的調用對象連接在以後，最後是全局對象。而後從鏈表開頭尋找變量name,很明顯

name是"slwy"。

但執行ss()時，做用域鏈是： ss()->t()->window,因此name是」tlwy"

下面看一個很容易犯錯的例子：

<html>
<head>
<script type="text/javascript">
function buttonInit(){
    for(var i=1;i<4;i++){
        var b=document.getElementById("button"+i);
        b.addEventListener("click",function(){ alert("Button"+i);},false);
    }
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>

當文檔加載完畢，給幾個按鈕註冊點擊事件，當咱們點擊按鈕時，會彈出什麼提示框呢？

很容易犯錯，對是的，三個按鈕都是彈出："Button4",你答對了嗎？

當註冊事件結束後，i的值爲4，當點擊按鈕時，事件函數即function(){ alert("Button"+i);}這個匿名函數中沒有i,根據做用域鏈，因此到buttonInit函數中找，此時i的值爲4，

因此彈出」button4「。

四：with語句

說到做用域鏈，不得不說with語句。with語句主要用來臨時擴展做用域鏈，將語句中的對象添加到做用域的頭部。

看下面代碼

person={name:"yhb",age:22,height:175,wife:{name:"lwy",age:21}};
with(person.wife){
    console.log(name);
}

with語句將person.wife添加到當前做用域鏈的頭部，因此輸出的就是：「lwy".

with語句結束後，做用域鏈恢復正常。