創(chuàng)新互聯(lián)www.cdcxhl.cn八線動(dòng)態(tài)BGP香港云服務(wù)器提供商，新人活動(dòng)買多久送多久，劃算不套路！
這篇文章將為大家詳細(xì)講解有關(guān)了解Javascript中變量和詞法環(huán)境，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識(shí)有一定的了解。
其實(shí)，我覺得Javascript核心中重要的東西并非是從舊版本擴(kuò)展來的高大上的語法，例如解構(gòu)賦值啊、展開語法和剩余參數(shù)（嘛……雖然的確是很666），但是用好這些，其實(shí)都建立在你對變量的認(rèn)識(shí)上（常有人不知道什么是左值或右值的區(qū)別）正因如此，我覺得了解一個(gè)Javascript還是從最基本做起，就是了解一下何為變量吧。
本文其實(shí)也并非完全基礎(chǔ)，還是建立在對Javascript有一定了解之上的，至少對對象要有一定的認(rèn)知。開始吧。
變量與數(shù)據(jù)
什么是變量？
越簡單的問題答案往往越是讓人感到意外，多數(shù)人的答案都與值有關(guān)；事實(shí)上變量就是程序可操作的存儲(chǔ)區(qū)（術(shù)語內(nèi)存空間），在Javascript程序運(yùn)行時(shí)，存儲(chǔ)區(qū)（術(shù)語就是內(nèi)存空間）可以保存我們所需的任何東西，代碼、數(shù)據(jù)……等等。然后可以將變量保存的數(shù)據(jù)大致上分割為兩類：原始類型（同基本類型）和引用類型；從變量中取出來的數(shù)據(jù)就是值，把一個(gè)值放到變量中時(shí)，該值就又變成了數(shù)據(jù)。
Javascript和其他語言相似，變量也需要被聲明才能實(shí)際存在，聲明后的變量稱之為實(shí)例化，為變量賦予一個(gè)值（默認(rèn)為undefined）時(shí)，稱之為變量的初始化，只是實(shí)例化而未初始化的變量都處于uninitialized狀態(tài)。
例如：
let a = a ; // (*) console.log(a); // ReferenceError: can't access lexical declaration `a' before initialization
很完美的報(bào)錯(cuò)了(在(*)標(biāo)志的位置)，提示我們沒有初始化這個(gè)變量時(shí)就無法使用。這是不同于C++這類底層的變量的地方。其實(shí)這種現(xiàn)象在Javascript有一個(gè)極為高大上的名字：暫存死區(qū)，等過幾章節(jié)我就說明產(chǎn)生的原因。
（忘了說了，在變量聲明也需要一個(gè)名字，術(shù)語稱作標(biāo)識(shí)符，我覺得不補(bǔ)充也不影響什么……）
不過Javascript另外特殊的地方在于，它對var聲明的變量是可以自動(dòng)初始化的，Javascript會(huì)自動(dòng)會(huì)為var聲明的變量賦予一個(gè)undefined值。
例如：
var a = a;console.log(a); // undefined.
看吧，明明都差不多，結(jié)果卻全然不同。
但是實(shí)際上卻沒什么卵用，見下面的代碼：
var a = a;console.log(a+2); // NaN
結(jié)果是NaN， 得到了一個(gè)我們完全不想要的結(jié)果。在如果無法順利數(shù)學(xué)計(jì)算時(shí),Javascript便會(huì)給出一個(gè)非數(shù)字的結(jié)果，用NaN表示。但是比較有趣的是，如果你用typeof去驗(yàn)證NaN類型：
typeof NaN ; // number
卻告訴我們，這TMD是一個(gè)數(shù)值 number。
Javascript莫名其妙的地方還有許多許多，不過我們還是不要繼續(xù)調(diào)戲javascript了，開始認(rèn)真學(xué)習(xí)了。
類型與存儲(chǔ)
Javascript一共有 7 種原始類型 和 1 種 引用類型，如下：
1、number
2、string
3、boolean
4、symbol
5、bigint
6、undefined
7、null
object
（這里面我就用小寫了，因?yàn)?code>typeof返回的是小寫的）
我就是介紹一下這些必須要了解的東西，具體用法其他資料都有我就不贅述了。不過關(guān)于typeof還有要補(bǔ)充的一點(diǎn)是，它對于null和function結(jié)果：
重慶分公司
重慶分公司
function sayHello(){
console.log('hello the world');
}
console.log(typeof sayHello); // function
console.log(typeof null); // object……對于一個(gè)函數(shù)，它真的返回的是一個(gè)“函數(shù)”，某種意義上用處很大，不過對null值返回一個(gè)object，這只能說有得就有缺吧。
我覺得對變量加深了解的辦法就是明白它的底層運(yùn)作方式。其實(shí)也沒有什么了不起的，原始值是直接放在內(nèi)存棧區(qū)， 引用類型值則是放在內(nèi)存堆區(qū)（這是它的實(shí)際存儲(chǔ)區(qū)位置）；（如果是常量，那么就會(huì)放在池中，好像也是棧區(qū)的一部分）。正常情況下，變量取值都是直接都是從內(nèi)存棧區(qū)中獲取的，但是引用類型的值是放在內(nèi)存堆中，那么怎么辦？
引用類型值的訪問：
1、一個(gè)引用類型的變量，會(huì)在內(nèi)存棧中保存一個(gè)指針
2、這個(gè)指針是用于引用內(nèi)存堆中的存儲(chǔ)區(qū)的內(nèi)存地址
3、在訪問一個(gè)類型值時(shí)
4、會(huì)通過指針找到內(nèi)存堆中的存儲(chǔ)區(qū)，然后從中獲取值。
例如：
var first = {
name:'hahei...'
}
var gggiii=111222;映射圖如下：
注意：此處我用 ref. first表示 存儲(chǔ)區(qū)的引用 ， 因?yàn)殡m然保存的盡管是指針，但是在訪問這個(gè)值時(shí)，會(huì)進(jìn)行二次解析（即通過這個(gè)指針找到存儲(chǔ)區(qū)）， 而不是直接返回這個(gè)指針的具體數(shù)據(jù)。詳細(xì)可以參考 C++引用。
初識(shí)詞法環(huán)境
想必各位都已經(jīng)對什么是作用域了若指掌，但是我還是必須重新提一下。作用域是標(biāo)識(shí)符的可訪問范圍，在Javascript中的任何操作，幾乎都有作用域的參與。Javascript中使用詞法環(huán)境決定作用域，在下面我會(huì)簡單介紹一下。（請注意，這里我沒有用變量這個(gè)術(shù)語，因?yàn)榻馕鰳?biāo)識(shí)符范圍時(shí)，應(yīng)該還沒有真正生成代碼，感興趣的可以去了解一下AST語法樹）
看，以下代碼：
var val=111;
function hahaha(){
console.log(val);
}
function hihihi(){
hahaha();
}
hihihi(); /// 111的確是正確輸出了，111。
但是我更喜歡把 val放在一個(gè)函數(shù)中，如：
function hahaha(){
console.log(val); /// (**)
}
function hihihi(){
var val=111; /// (*)
hahaha();
}
hihihi();結(jié)果就是Uncaught ReferenceError: val is not defined， 根本沒找到val這個(gè)標(biāo)識(shí)符，這是為什么？
因?yàn)閳?zhí)行過程是這樣的：
hihihi函數(shù)執(zhí)行 ， 然后為 val賦值……hahaha函數(shù)執(zhí)行hahaha找不到val標(biāo)識(shí)符，便去外部詞法環(huán)境hahaha外部詞法環(huán)境就是** hahaha函數(shù)聲明時(shí)代碼的外部**，即全局代碼（下稱全局詞法環(huán)境）3-5步， 找val找的是函數(shù)聲明代碼的外部，而不是函數(shù)調(diào)用時(shí)的位置。）現(xiàn)在應(yīng)該提一下概念了，詞法環(huán)境（Lexical Environment）就是根據(jù)代碼結(jié)構(gòu)時(shí)決定的作用域，也可以稱作詞法作用域（Lexical Scoping）它是靜態(tài)作用域?？梢赃@么說，在源代碼寫好時(shí)，所有標(biāo)識(shí)符的作用域就已經(jīng)被決定。當(dāng)然也有動(dòng)態(tài)作用域，你可以去試試bash腳本，它就是動(dòng)態(tài)的。嘿嘿。詳細(xì)也可以參考靜態(tài)作用域、詞法作用域。
此處只要發(fā)現(xiàn)了個(gè)中區(qū)別就極好掌握，所以我就略了。
詞法環(huán)境的抽象
在Javascript常用三種詞法環(huán)境： 一、塊級作用域 二、全局作用域 三、函數(shù)作用域。
有時(shí)，我們會(huì)將一個(gè)詞法環(huán)境（即作用域，下面我會(huì)正式使用詞法環(huán)境替代作用域這個(gè)術(shù)語）抽象成偽代碼，如下：
LexicalEnvironment = {
OuterEnv: < ... > ,
This : < ... > ,
EnvironmentRecord:{
// ... identifiername:variable
}
}很簡單：
this的值，但它是運(yùn)行時(shí)決定的。例如：
function first(){
var a =100;
let d = 220;
{ // Block,
var b = a+100;
let c = b*10;
console.log(a,b,c,d);
}
}
first(); // 100 200 2000 220一定不要忽略first函數(shù)中的塊級作用域，這很重要。
然后寫成抽象就是：
函數(shù)內(nèi)部的塊級作用域：
BlockEnv = {
OuterEnv: < FuncFirstEnv > ,
This : < window > ,
EnvironmentRecord:{
c:< 2000 > // 這里沒有b
}
}函數(shù)作用域：
FuncEnv = {
OuterEnv: < GlobalEnv > ,
This : < window > ,
EnvRec:{
a:< 100 >,
d:< 220 >,
b:< 200 >
}
}OKay，先到這里吧。
一些問題：
1、為什么用詞法環(huán)境代替作用域？
–詞法環(huán)境涵蓋了作用域，但反之則不能。
–但注意，詞法作用域和詞法作用域鏈與作用域以及作用域鏈都可通用。
2、環(huán)境記錄是什么？
–當(dāng)前環(huán)境下的標(biāo)識(shí)符-變量的映射
–但是標(biāo)識(shí)符只是“合法標(biāo)識(shí)符”的字符串形式。
–變量是是指存儲(chǔ)區(qū)的內(nèi)容，但是確切說法是存儲(chǔ)區(qū)。
最后
我把我的筆記，重新整理后發(fā)到博客上后發(fā)現(xiàn)——我筆記干凈了好多，艸。
這種只深入核心的內(nèi)容很有用，而且在寫代碼時(shí)也變得靈活很多了。我覺得這就是最有用的地方。
最后：
個(gè)人理解，常有失誤；細(xì)細(xì)查看不知何處，望君做到心中有數(shù)。
關(guān)于了解Javascript中變量和詞法環(huán)境就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
