JS中的變量提升和函數(shù)提升

zhunjiee 發(fā)布于2019-08-23 12:00 / 1878人閱讀

摘要：什么是函數(shù)作用域下的變量提升和函數(shù)提升函數(shù)作用域中也存在變量提升和函數(shù)提升，這個(gè)和全局作用域下的情況是一模一樣的，就是把作用域想成是全局的就可以了。

在js中有一部分比較難以理解，卻也是在筆試過程中很容易考的，那就是變量提升和函數(shù)提升的問題，這篇文章我會(huì)就變量提升和函數(shù)提升的問題拓展一下有關(guān)js函數(shù)的知識(shí)點(diǎn)，包括作用域的問題，后面還會(huì)有一些小練習(xí)來判斷自己是否真的搞懂了。

作用域

在js中作用域分為全局作用域和函數(shù)作用域，這里是針對用var聲明的變量是全局的，還是只是在函數(shù)中可以使用，在es6中新增了兩個(gè)聲明變量的方法，let和var一樣，都是聲明變量的，不過let是在塊級(jí)作用域下起作用，const是用來聲明常量的，不能進(jìn)行二次賦值。這里重點(diǎn)是變量提升，就先用var來講解。

全局作用域 什么是全局作用域？

全局作用域是指在當(dāng)前的script標(biāo)簽內(nèi)定義的變量，所有的函數(shù)都可以使用，它在打開時(shí)創(chuàng)建，關(guān)閉時(shí)銷毀。在全局作用域中有一個(gè)全局對象window，window是由瀏覽器創(chuàng)建的，它里面的方法所有對象都可以使用。

在全局作用域下創(chuàng)建的變量會(huì)作為window進(jìn)行保存，創(chuàng)建的函數(shù)會(huì)作為window的方法

什么是全局作用域下的變量提升？

終于說到變量提升了，那么什么是全局作用域下的變量提升呢？看一下下面的例子：

        console.log(a);//undefined
        var a = 10;
        console.log(a);//10

由于在js中代碼執(zhí)行的順序是從上而下，所以在第一次打印的時(shí)候，要找變量a，如果沒有變量提升的話應(yīng)該會(huì)會(huì)報(bào)錯(cuò)說a沒有定義，而這里輸出的是undefined，說明a已經(jīng)定義了，但是沒有賦值。那么這就是變量提升起了作用了。需要注意的是

變量提升只會(huì)提升聲明，而不會(huì)提升賦值，也就是說在執(zhí)行第一個(gè)打印操作時(shí)，只是存在變量a，a卻沒有值；

打印結(jié)果是undefined說明變量存在，只是沒有值，而如果是報(bào)錯(cuò)說a is not defined的話，就是沒有變量a。

什么是全局作用域下的函數(shù)提升？

函數(shù)提升和變量提升是一樣的道理，都是將本來應(yīng)該在后面執(zhí)行的代碼全部放在前面，只是變量提升是提升聲明；而函數(shù)提升是提升整個(gè)函數(shù)，也就是在代碼還沒開始執(zhí)行的時(shí)候函數(shù)就會(huì)被創(chuàng)建。

調(diào)用在定義函數(shù)之后

        console.log(a);//undegfined
        var a = 10;
        function fun(){
            console.log(a);
        }
        fun();//10

這里函數(shù)調(diào)用是在定義函數(shù)之后，看不出來函數(shù)是否存在提升的情況，但這里值得一提的是，如果函數(shù)沒有需要訪問的變量的時(shí)候，就會(huì)去上一層找，就是這個(gè)全局的a，值是10，所以會(huì)打印10.

調(diào)用在定義函數(shù)之前

        console.log(a);//undefined
        fun();//undefined
        var a = 10;
        function fun(){
            console.log(a);
        }

這里函數(shù)調(diào)用是在定義函數(shù)之前，并且是在a賦值之前。首先我們來判斷一下，如果沒有函數(shù)提升的話會(huì)怎樣，執(zhí)行到fun這一行，就會(huì)發(fā)現(xiàn)fun沒有定義，然后會(huì)報(bào)錯(cuò)fun is not a function；現(xiàn)在有了函數(shù)提升過后，執(zhí)行到fun后，會(huì)去找a，而a只是定義了沒有賦值，就會(huì)打印一個(gè)undefined，和第一個(gè)打印一樣的結(jié)果。

函數(shù)作用域 什么是函數(shù)作用域？

函數(shù)作用域，顧名思義，就是只在函數(shù)中能夠使用的變量，函數(shù)作用域和全局作用域之間的關(guān)系是函數(shù)作用域中的方法可以使用全局的變量，而全局方法不能使用函數(shù)中的便來變量，每個(gè)函數(shù)之間也是不能取到各自函數(shù)內(nèi)部的值的。下面的圖幫助理解一下：

每個(gè)函數(shù)作用域是相互獨(dú)立的，在函數(shù)內(nèi)部定義的變量是不能進(jìn)行相互調(diào)用的。

什么是函數(shù)作用域下的變量提升和函數(shù)提升？

函數(shù)作用域中也存在變量提升和函數(shù)提升，這個(gè)和全局作用域下的情況是一模一樣的，就是把作用域想成是全局的就可以了。

練習(xí)

        var a = 123;
        function fun(){
            alert(a);//123
        }
        fun();

        var a = 123;
        function fun(){
            alert(a);//456
            var a = 456;
        }
        fun();
        alert(a);//123

        var a = 123;
        function fun(){
            alert(a);//123
            a = 456;
        }
        fun();
        alert(a);//456（456是因?yàn)楹瘮?shù)內(nèi)部將全局的變量a的值改變了）

        var a = 123;
        function fun(a){
            alert(a);//123
            a = 456;
        }
        fun(123);
        alert(a);//456

 var a = 123;
        function fun(a){
            alert(a);//undefined（undefined是因?yàn)閒un在被調(diào)用的時(shí)候沒有傳遞實(shí)參）
            a = 456;
        }
        fun();
        alert(a);//456

總結(jié)

在面試的筆試題中很容易碰到這樣的題，有的可能還不只是考這個(gè)知識(shí)點(diǎn)，可能還會(huì)涉及到閉包之類的，或者更難以理解一點(diǎn)兒的this指向問題，但是不管怎樣，只要知道原理，怎么考都沒關(guān)系，愿大家在前端這段路上堅(jiān)持走下去，加油！

云服務(wù)器 GPU云服務(wù)器 js變量聲明提升 js調(diào)用變量和函數(shù) php中的變量函數(shù) 網(wǎng)速提升

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/97812.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

zhunjiee

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 629·2023-04-26 01:53
博客園&阿里云聯(lián)合征文：最難忘的bug

閱讀 2753·2021-11-17 17:00
2021-09-02

閱讀 2889·2021-09-04 16:40
??軟件測試經(jīng)典10題（含解析）軟件測試行業(yè)，去大公司還是小公司好？??

閱讀 1988·2021-09-02 15:41
VSCODE常用插件使用記錄

閱讀 838·2019-08-26 11:34
標(biāo)準(zhǔn)庫（三）包裝對象

閱讀 1227·2019-08-26 10:16
JavaWeb學(xué)生選課（Servlet、JSP、JDBC）

閱讀 1338·2019-08-23 17:51
你不知道的瀏覽器頁面渲染機(jī)制

閱讀 823·2019-08-23 16:50

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

JS中的變量提升和函數(shù)提升

調(diào)用在定義函數(shù)之后

調(diào)用在定義函數(shù)之前

相關(guān)文章

js 變量提升和閉包理解

**原型模式故事鏈(4)--JS執(zhí)行上下文、變量提升、函數(shù)聲明**

**原型模式故事鏈(4)--JS執(zhí)行上下文、變量提升、函數(shù)聲明**

**原型模式故事鏈(4)--JS執(zhí)行上下文、變量提升、函數(shù)聲明**

發(fā)表評(píng)論

0條評(píng)論

zhunjiee

男|高級(jí)講師

TA的文章

tensorflow

博客園&阿里云聯(lián)合征文：最難忘的bug

2021-09-02

??軟件測試經(jīng)典10題（含解析）軟件測試行業(yè)，去大公司還是小公司好？??

VSCODE常用插件使用記錄

標(biāo)準(zhǔn)庫（三）包裝對象

JavaWeb學(xué)生選課（Servlet、JSP、JDBC）

你不知道的瀏覽器頁面渲染機(jī)制

最新活動(dòng)