javascript變量聲明 及作用域

javascript變量聲明提升(hoisting)

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

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)，其優先級順序如下：
1、語言內置：所有的作用域中都有 this 和 arguments 關鍵字
2、形式參數：函數的參數在函數作用域中都是有效的
3、函數聲明：形如function foo() {}
4、變量聲明：形如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語句結束后，作用域鏈恢復正常。