首頁 > web前端 > js教程 > js中變數宣告以及函數宣告提升的詳細解析(附範例)

js中變數宣告以及函數宣告提升的詳細解析(附範例)

不言
發布: 2018-08-23 14:16:43
原創
1634 人瀏覽過

這篇文章帶給大家的內容是關於js中變數宣告以及函數宣告提升的詳細解析(附範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

變數宣告提升
1、變數定義
可以使用var定義變量,變數如果沒有賦值,那麼變數的初始值為undefined。

2、變數作用域
變數作用域指變數起作用的範圍。變數分為全域變數和局部變數。全域變數在全域都擁有定義;而局部變數只能在函數內有效。 
在函數體內,同名的局部變數或參數的優先權會高於全域變數。也就是說,如果函數內存在和全域變數同名的局部變數或參數,那麼全域變數將會被局部變數覆蓋。
所有不使用var定義的變數都視為全域變數

3、函數作用域和宣告提前
JavaScript的函數作用是指在函數內宣告的所有變數在函數體內總是有定義的,也就是說變數在宣告之前已經可用,所有這特性稱為宣告提前(hoisting),即JavaScript函數裡的所有宣告(只是聲明,但不涉及賦值)都被提前到函數體的頂部,而變數賦值操作留在原來的位置。如下列範例:  
註解:宣告事先是在JavaScript引擎的預編譯時進行,是在程式碼開始運作之前。

var scope = 'global';function f(){
    console.log(scope);    
    var scope = 'local';
    console.log(scope);
}
登入後複製

由於函數內宣告提升,所以上面的程式碼其實是這樣的

var scope = 'global';function f(){
    var scope;    //变量声明提升到函数顶部
    console.log(scope);
    scope = 'local';    //变量初始化依然保留在原来的位置
    console.log(scope);
}
登入後複製

經過這樣變形之後,答案就非常明顯了。由於scope在第一個console.log(scope)語句之前就已經定義了,但是並沒有賦值,因此此時scope的指是undefined.第二個console.log(scope)語句之前,scope已經完成賦值為'local',所以輸出的結果是local。

函數宣告提升
函數宣告語法

f('superman');function f(name){
    console.log(name);
}
登入後複製

函數表達式語法

f('superman');var f= function(name){
    console.log(name);
}
登入後複製

執行上面的程式碼,會報錯Uncaught ReferenceError: f is not defined(…),錯誤訊息顯示說f沒有被定義。 
為什麼同樣的程式碼,函數宣告和函數表達式有差異呢? 
這是因為,函數宣告有一個非常重要的特徵:函數宣告提升,函數宣告語句將會被提升到外在腳本或是外在函數作用域的頂端(是不是跟變數提升非常類似)。正是因為這個特徵,所以可以把函數宣告放在呼叫它的語句後面。如下面例子,最終的輸出結果應該是什麼? :

var getName = function(){
    console.log(2);
}function getName (){
    console.log(1);
}
getName();
登入後複製

可能會有人覺得最後輸出的結果是1。讓我們來分析一下,這個例子涉及了變數宣告提升和函數宣告提升。如同前面說到的函數宣告提升,函數宣告function getName(){}的宣告會被提前到頂端。而函數表達式var getName = function(){}則表現出變數宣告提升。因此在這種情況下,getName也是一個變量,因此這個變數的宣告也會提升到底部,而變數的賦值仍然保留在原來的位置。要注意的是,函數優先,雖然函數宣告和變數宣告都會被提升,但是函數會先被提升,然後才是變數。因此上面的函數可以轉換成下面的樣子:

function getName(){    //函数声明提升到顶部
    console.log(1);
}
var getName;    //变量声明提升
getName = function(){    //变量赋值依然保留在原来的位置
    console.log(2);
}
getName();    // 最终输出:2
登入後複製

所以最終的輸出結果是:2。在原來的例子中,函數宣告雖然是在函數表達式後面,但由於函數宣告提升到頂部,因此後面getName又被函數表達式的賦值運算給覆寫了,所以輸出2。

相關推薦:



#

以上是js中變數宣告以及函數宣告提升的詳細解析(附範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板