初探JavaScript——JS另類的作用域和聲明提前
最近恰逢畢業(yè)季,千千萬萬的學生黨開始步入社會,告別象牙塔似的學校生活。往往在人生的各個拐點的時候,情感豐富,感觸頗深,各種對過去的美好的總 結,對未來的展望。與此同時,也讓諸多的老“園”工看完這些小年輕的文章后感觸良多,不禁也要寫上幾筆,所以就出來了很多類似“畢業(yè)兩年小記”、“畢業(yè)五 年有感”……
可能就是某篇博文的一句話,某碗心靈雞湯就撥動了你心里的那根塵封已久的弦,讓你情不自禁的點了個贊,還忍不住的要在下面評論區(qū)留下自己此刻心潮澎湃的印記。
我今天不是來送雞湯的,雞湯雖好,可不要貪杯哦。
截止上一篇關于Javascript的博文《 初探JavaScript(三)——JS帶我"碰壁"帶我飛 》已經(jīng)寫了三篇。前三篇主要是從一名純小白的角度,結合《Javascript DOM編程藝術》這本書記錄下自己的一些總結和感悟。
大致的翻完《Javascript DOM編程藝術》后,感覺自己了解肯定還是太淺了,因為當時對于” 原型 ”、” 閉包 ”等這些完全沒概念,我知道我缺的還很多。于是,我又伸出雙手,接過另外一部經(jīng)典之作《Javascript權威指南》,繼續(xù)Javascript之行。
今天首先介紹下Javascript的函數(shù)作用域的概念,然后了解下什么是作用域和聲明提前,***通過一個例子剖析Javascript的作用域鏈。
1.變量的作用域
稍微有些編程背景的都知道,變量的作用域分為兩種: 全局變量 和 局部變量 。
Javascript是一門 弱類型語言 。所有的變量聲明都是通過var來接收,如
- var num = 1;
- var str = “string”;
- var flag = true;
看似是一個非常省事的機制,但是也有讓人頭疼的時候,一些隱式的類型轉(zhuǎn)換經(jīng)常會把搞暈,這里不做展開,后面有時間可以單獨開一篇詳談。先看看全局變量和局部變量:
- var g = "global"; function f(){ var l = "local";
- }
注意 : 1. 如果在函數(shù)f()中將去掉var聲明,則變量l就會從局部變量升級為全局變量。
2. 局部變量的優(yōu)先級高于同名的全局變量 。如果在函數(shù)f()中聲明一個局部變量也為g,則全局變量就會被局部變量覆蓋
2.作用域和聲明提前
看到Javascript作用域這塊,可以說顛覆了以前我對作用域的認識。類似Java和C等編程語言,在花括號“{}”內(nèi)的代碼都是有各自的作用域的,并且在這個范圍以外,這些變量是不可見的,我們稱這種作用域為 塊級作用域 。
但是這完全不適用于Javascript,因為Javascript沒有塊級作用域,但是Javascript有 函數(shù)作用域 。函數(shù)作用域簡言之就是:變量在聲明他們的函數(shù)體以及這個函數(shù)體嵌套的任意函數(shù)體內(nèi)都是有定義的。
對于“ 變量在聲明他們的函數(shù)體以及這個函數(shù)體嵌套的任意函數(shù)體內(nèi)都是有定義的 ”這句話的延伸理解:變量在聲明之前就已經(jīng)可用。我們稱這種特性為聲明提前,也就是函數(shù)里的所有變量都被“提前”至函數(shù)體的頂部。
下面我們看一個經(jīng)典的陷阱案例:
- var v = "yoyo"; (function(){ console.log(v); var v = "check now";
- console.log(v);
- })();
對于第二次執(zhí)行結果“check now”沒有什么特別的,為什么***次輸出的不是“yoyo”而是“undefined”。
對于這個問題的解釋就用到上面的那句話, 局部變量在整個函數(shù)體始終是有定義的 ,即在函數(shù)體內(nèi)局部變量覆蓋了同名全局變量,而且,程序只有在執(zhí)行到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”,不能按照上面的定式思維。上面有句話叫“局部變量在整個函數(shù)體始終是有定義的”,但是這里沒有局部變量的定義,所以按照下面要提到的作用域鏈會逐層向上尋找變量,***找到了全局變量v,從而***的輸出是“yoyo”。
以上是我的個人理解,如果你對這兩種情況有自己的理解,請在下方給出,望不吝指教。
3.作用域鏈
全局變量在程序中始終是有定義的,局部變量在聲明它的函數(shù)體內(nèi)以及其所嵌套的函數(shù)內(nèi)始終是有定義的。
每一段Javascript代碼(全局代碼或函數(shù))都有一個與之相關聯(lián)的作用域鏈,這個作用域鏈就是一個對象列表或鏈表。比如當 Javascript需要查找變量x的值時,它會從鏈中的***個對象開始,如果該對象有一個名為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();