在JavaScript當(dāng)中，定義變量通過var操作符+變量名。但是不加 var 操作符，直接賦值也是可以的。
例如 ： message = "hello JavaScript ! " 即定義了一個(gè)全局變量message,并賦值 “Hello JavaScript！”
--《JavaScript高級(jí)程序第三版》

如同往日一般，一群人在所謂的技術(shù)交流群里面相互斗圖著。突然老王莫名的正經(jīng)起來(lái)，在群里發(fā)了一道JavaScript的題目，讓大家猜一猜這道題的答案。

var foo = 1;function bar() {foo = 10;return;function foo() {}}bar();console.log(foo); //求控制臺(tái)輸出多少？

看到這到題目之后，立刻不加思索回答了“10”。
首先第一步定義一個(gè)全局變量foo = 1，然后函數(shù)執(zhí)行的時(shí)候又定義全局變量 foo = 10覆蓋了之前的全局變量，return之后，這個(gè)函數(shù)就直接結(jié)束， function foo {}來(lái)不及定義。因此控制臺(tái)輸出10；
按照在《高三》上面看到知識(shí)點(diǎn)推斷，毫無(wú)問題，簡(jiǎn)直完美呀！

【給自己32個(gè)贊！】

但是，在把答案發(fā)出去之后。本能就感覺這道題不可能這么簡(jiǎn)單，不正經(jīng)的群突然討論正經(jīng)的代碼，肯定會(huì)有大坑等著人來(lái)跳。一種不好感覺涌上心頭，感覺自己又要被打臉了。

趕緊打開編輯器測(cè)試一下這段代碼，手哆嗦的按下F12.只見控制臺(tái)下，一個(gè)耀眼的1赫然闖入眼簾。啪啪啪！！這臉又被打的，好疼呀！！

【為什么被打臉的總是我！！】

果不其然群里老王馬上的在群里否決我的答案，啪的一下打了這張老臉。
不行！這個(gè)臉打了得把場(chǎng)子找回來(lái)，這個(gè)老王接下來(lái)肯定會(huì)揭曉答案并公布解題思路。得在他公布之前，講答案和原因給測(cè)試出來(lái)。

經(jīng)過簡(jiǎn)單的測(cè)試之后，發(fā)現(xiàn)原來(lái)是后面的foo，函數(shù)提升到最頂端了。所以后面foo = 10中的foo實(shí)際上是一個(gè)局部變量了。因此后面console.log(foo)時(shí)是拿不到bar函數(shù)中的局部變量foo = 10,因此只能拿到全局變量foo = 1;所以控制臺(tái)輸出1。

上文代碼的另外一種形式：

var foo = 1;function bar() {function foo(){}foo = 10;return;// function foo() {} 相當(dāng)于這行代碼提升到最頂部了}bar();console.log(foo);

被搶了風(fēng)頭的老王果斷的不服氣呀！說(shuō)我瞎猜扯犢子一廂情愿的，自己隨意猜想的。
好的，下面就是開始解釋我為什么說(shuō)函數(shù)function foo(){}提升到最頂端。不改動(dòng)老王的代碼，讓我們只是加兩個(gè)console.log測(cè)試一下相應(yīng)的輸出結(jié)果。

var foo = 1;console.log("全局變量：foo = " + window.foo)function bar() {console.log("此時(shí)bar函數(shù)中foo =" + foo)foo = 10;console.log("bar函數(shù)中的變量是" + foo);console.log("全局變量foo還是："+window.foo);return;function foo() {}}bar();console.log(foo);

瀏覽器輸出結(jié)果

通過這里可以證實(shí)我的猜想是正確的，function foo(){}直接被提升到bar()函數(shù)最頂端，然后后面foo = 10就不是再重新定義全局變量了，這里foo是一個(gè)局部變量的角色被定義出現(xiàn)的。因此才沒有將全局變量給覆蓋，而由于函數(shù)外面是不能直接拿到bar函數(shù)當(dāng)中的局部變量foo，因此繼續(xù)向上尋找到全局變量foo = 1.從而輸出1.

這里估計(jì)聯(lián)想能力豐富的小伙伴肯定會(huì)舉手說(shuō)，那么函數(shù)有提升的現(xiàn)象。那么變量也是否會(huì)有提升現(xiàn)象？不錯(cuò)！不錯(cuò)！！這位小伙伴聯(lián)想的非常正確，學(xué)習(xí)就要多學(xué)會(huì)舉一反三。

【獎(jiǎng)勵(lì)一朵小紅花】

變量提升

var foo = 1;function bar() {foo = 10;return;var foo //幾乎是相同的代碼，只是把 function foo 變成了 var foo。變量也是能夠提升了的！}bar();console.log(foo); //還是輸出1.

思考：

同樣的既然變量能夠提升，函數(shù)聲明能夠提升。那么誰(shuí)升的更高呢？

function test(){console.log(dabang);function dabang(){};var dabang;}test();function test1(){console.log(dabang);var dabang;function dabang(){};}test1();

控制臺(tái)輸出結(jié)果：

【大棒聲明的函數(shù)那必須升的高！！！】

小結(jié)：

1、在JavaScript當(dāng)中，函數(shù)作用域當(dāng)中。變量和聲明函數(shù)都能夠提升。
2、同樣提升的情況下，聲明函數(shù)提升的更加高！

以上就是鄙人對(duì)于JavaScript函數(shù)作用域中“提升現(xiàn)象”一點(diǎn)簡(jiǎn)單理解，歡迎各位的大佬們指導(dǎo)學(xué)習(xí)。
ps：打臉也是可以的，畢竟錯(cuò)了就是錯(cuò)了。（那是打臉可否輕一點(diǎn)，留著日后再打呀！(～￣▽￣)～）

【吾雖浪跡天涯，卻從未迷失本心！吾雖惡搞不斷，卻不敢胡亂代碼！】

轉(zhuǎn)載于:https://www.cnblogs.com/chedabang/p/6061975.html

總結(jié)

以上是生活随笔為你收集整理的浅谈JavaScript 函数作用域当中的“提升”现象的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。