午夜视频在线网站,日韩视频精品在线,中文字幕精品一区二区三区在线,在线播放精品,1024你懂我懂的旧版人,欧美日韩一级黄色片,一区二区三区在线观看视频

搜索
分享

javascript變量聲明 及作用域

 瀟湘雨plgwyaef 2016-08-26

javascript變量聲明提升(hoisting)

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

javascript的變量聲明具有hoisting機制，JavaScript引擎在執(zhí)行的時候，會把所有變量的聲明都提升到當(dāng)前作用域的最前面。

先看一段代碼

1
2
3
4
5
var v = 'hello';
(function(){
  console.log(v);
  var v = 'world';
})();

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

1
2
3
4
5
var v = 'hello';
if(true){
  console.log(v);
  var v = 'world';
}

輸出結(jié)果為”hello”,說明javascript是沒有塊級作用域的。函數(shù)是JavaScript中唯一擁有自身作用域的結(jié)構(gòu)。

第二，在function作用域內(nèi)，變量v的聲明被提升了。所以最初的代碼相當(dāng)于：

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在某處已經(jīng)存在了
int i;//這是聲明并定義名字i,為i分配存儲空間
i = 0;//這是初始化名字i,為其賦初值為0

javascript中則是這樣

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

因為javascript為動態(tài)語言，其變量并沒有固定的類型，其存儲空間大小會隨初始化與賦值而變化，所以其變量的“定義”就不像傳統(tǒng)的靜態(tài)語言一樣了，其定義顯得無關(guān)緊要。

聲明提升

當(dāng)前作用域內(nèi)的聲明都會提升到作用域的最前面，包括變量和函數(shù)的聲明

1
2
3
4
5
6
(function(){
  var a = '1';
  var f = function(){};
  var b = '2';
  var c = '3';
})();

變量a,f,b,c的聲明會被提升到函數(shù)作用域的最前面，類似如下：

1
2
3
4
5
6
7
(function(){
  var a,f,b,c;
  a = '1';
  f = function(){};
  b = '2';
  c = '3';
})();

請注意函數(shù)表達式并沒有被提升，這也是函數(shù)表達式與函數(shù)聲明的區(qū)別。進一步看二者的區(qū)別：

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(){}
})();

上面代碼中函數(shù)聲明f2被提升，所以在前面調(diào)用f2是沒問題的。雖然變量f1也被提升，但f1提升后的值為undefined,其真正的初始值是在執(zhí)行到函數(shù)表達式處被賦予的。所以只有聲明是被提升的。

名字解析順序

javascript中一個名字(name)以四種方式進入作用域(scope)，其優(yōu)先級順序如下：
1、語言內(nèi)置：所有的作用域中都有 this 和 arguments 關(guān)鍵字
2、形式參數(shù)：函數(shù)的參數(shù)在函數(shù)作用域中都是有效的
3、函數(shù)聲明：形如function foo() {}
4、變量聲明：形如var bar;

名字聲明的優(yōu)先級如上所示，也就是說如果一個變量的名字與函數(shù)的名字相同，那么函數(shù)的名字會覆蓋變量的名字，無論其在代碼中的順序如何。但名字的初始化卻是按其在代碼中書寫的順序進行的，不受以上優(yōu)先級的影響?？创a：

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
})();

如果形式參數(shù)中有多個同名變量，那么最后一個同名參數(shù)會覆蓋其他同名參數(shù)，即使最后一個同名參數(shù)并沒有定義。

以上的名字解析優(yōu)先級存在例外，比如可以覆蓋語言內(nèi)置的名字arguments。

命名函數(shù)表達式

可以像函數(shù)聲明一樣為函數(shù)表達式指定一個名字，但這并不會使函數(shù)表達式成為函數(shù)聲明。命名函數(shù)表達式的名字不會進入名字空間，也不會被提升。

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

命名函數(shù)表達式的名字只在該函數(shù)的作用域內(nèi)部有效。
===
在認(rèn)識一切事物之后，人才能認(rèn)識自己，因為事物僅僅是人的界限。 —— 尼采

 

Js作用域與作用域鏈詳解

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

  一直對Js的作用域有點迷糊，今天偶然讀到Javascript權(quán)威指南，立馬被吸引住了，寫的真不錯。我看的是第六版本，相當(dāng)?shù)暮?，大?000多頁，Js博大精深，要熟悉精通需要大毅力大功夫。

一：函數(shù)作用域

   先看一小段代碼：

[javascript] view plaincopy
  1. var scope='global';  
  2. function t(){  
  3.     console.log(scope);  
  4.     var scope='local'  
  5.     console.log(scope);  
  6. }  
  7. t();  

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

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

第二講輸出的是：'local'

  你可能會認(rèn)為第一句會輸出：'global',因為代碼還沒執(zhí)行var scope='local',所以肯定會輸出“global'。

  我說這想法完全沒錯，只不過用錯了對象。我們首先要區(qū)分Javascript的函數(shù)作用域與我們熟知的C/C 等的塊級作用域。

  在C/C 中，花括號內(nèi)中的每一段代碼都具有各自的作用域，而且變量在聲明它們的代碼段之外是不可見的。而Javascript壓根沒有塊級作用域，而是函數(shù)作用域.

所謂函數(shù)作用域就是說：-》變量在聲明它們的函數(shù)體以及這個函數(shù)體嵌套的任意函數(shù)體內(nèi)都是有定義的。

所以根據(jù)函數(shù)作用域的意思，可以將上述代碼重寫如下：

[javascript] view plaincopy
  1. var scope='global';  
  2. function t(){  
  3.     var scope;  
  4.     console.log(scope);  
  5.     scope='local'  
  6.     console.log(scope);  
  7. }  
  8. t();  

    我們可以看到，由于函數(shù)作用域的特性，局部變量在整個函數(shù)體始終是由定義的，我們可以將變量聲明”提前“到函數(shù)體頂部，同時變量初始化還在原來位置。

為什么說Js沒有塊級作用域呢，有以下代碼為證：

[javascript] view plaincopy
  1. var name='global';  
  2. if(true){  
  3.     var name='local';  
  4.     console.log(name)  
  5. }  
  6. console.log(name);  

都輸出是“l(fā)ocal',如果有塊級作用域，明顯if語句將創(chuàng)建局部變量name,并不會修改全局name,可是沒有這樣，所以Js沒有塊級作用域。

現(xiàn)在很好理解為什么會得出那樣的結(jié)果了。scope聲明覆蓋了全局的scope,但是還沒有賦值，所以輸出：”undefined“。

所以下面的代碼也就很好理解了。

[javascript] view plaincopy
  1. function t(flag){  
  2.     if(flag){  
  3.         var s='ifscope';  
  4.         for(var i=0;i<2;i )   
  5.             ;  
  6.     }  
  7.     console.log(i);  
  8.     console.log(s);  
  9. }  
  10. t(true);  

輸出：2  ”ifscope'


二：變量作用域

還是首先看一段代碼：

[javascript] view plaincopy
  1. function t(flag){  
  2.     if(flag){  
  3.         s='ifscope';  
  4.         for(var i=0;i<2;i )   
  5.             ;  
  6.     }  
  7.     console.log(i);  
  8. }  
  9. t(true);  
  10. console.log(s);  


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

程序會報錯還是輸出“ifscope'呢？

讓我揭開謎底吧，會輸出：”ifscope'

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

所以你用console.log(window.s)也是會輸出“ifconfig'


當(dāng)使用var聲明一個變量時，創(chuàng)建的這個屬性是不可配置的，也就是說無法通過delete運算符刪除

var name=1    ->不可刪除

sex=”girl“         ->可刪除

this.age=22    ->可刪除


三：作用域鏈

先來看一段代碼：

[javascript] view plaincopy
  1. name='lwy';  
  2. function t(){  
  3.     var name='tlwy';  
  4.     function s(){  
  5.         var name='slwy';  
  6.         console.log(name);  
  7.     }  
  8.     function ss(){  
  9.         console.log(name);  
  10.     }  
  11.     s();  
  12.     ss();  
  13. }  
  14. t();  


當(dāng)執(zhí)行s時，將創(chuàng)建函數(shù)s的執(zhí)行環(huán)境(調(diào)用對象),并將該對象置于鏈表開頭，然后將函數(shù)t的調(diào)用對象鏈接在之后，最后是全局對象。然后從鏈表開頭尋找變量name,很明顯

name是'slwy'。

但執(zhí)行ss()時，作用域鏈?zhǔn)牵?ss()->t()->window,所以name是”tlwy'

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

  1. <html>  
  2. <head>  
  3. <script type='text/javascript'>  
  4. function buttonInit(){  
  5.     for(var i=1;i<4;i ){  
  6.         var b=document.getElementById('button' i);  
  7.         b.addEventListener('click',function(){ alert('Button' i);},false);  
  8.     }  
  9. }  
  10. window.onload=buttonInit;  
  11. </script>  
  12. </head>  
  13. <body>  
  14. <button id='button1'>Button1</button>  
  15. <button id='button2'>Button2</button>  
  16. <button id='button3'>Button3</button>  
  17. </body>  
  18. </html>  

當(dāng)文檔加載完畢，給幾個按鈕注冊點擊事件，當(dāng)我們點擊按鈕時，會彈出什么提示框呢？

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

當(dāng)注冊事件結(jié)束后，i的值為4，當(dāng)點擊按鈕時，事件函數(shù)即function(){ alert('Button' i);}這個匿名函數(shù)中沒有i,根據(jù)作用域鏈，所以到buttonInit函數(shù)中找，此時i的值為4，

所以彈出”button4“。


四：with語句

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

看下面代碼

[javascript] view plaincopy
  1. person={name:'yhb',age:22,height:175,wife:{name:'lwy',age:21}};  
  2. with(person.wife){  
  3.     console.log(name);  
  4. }  

with語句將person.wife添加到當(dāng)前作用域鏈的頭部，所以輸出的就是：“l(fā)wy'.

with語句結(jié)束后，作用域鏈恢復(fù)正常。


 

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多