1. 程式人生 > >javaScript變數提升,函式宣告提升

javaScript變數提升,函式宣告提升

1.在JavaScript中變數和函式的宣告會提升到最頂部執行。

2.函式的提升高於變數的提升。

3.函式內部如果用var聲明瞭相同名稱的外部變數,函式將不再向上尋找。

4.匿名函式不會提升。

5.不同<script>塊中的函式互不影響。

js的變數提升:

 

變數宣告:

Js編譯器會把變數宣告看成兩個部分分別是宣告操作(var a)和賦值操作(a=2)

宣告操作在編譯階段進行,宣告操作會被提升到執行環境的頂部,值是undefined(表示未初始化)

1. 作用域以函式進行劃分的,而不是由塊(block)劃分的。

2. 使用變數的時候將會從當前作用域開始查詢其“宣告”(隱式或者顯式),如果沒有找到再向上一級作用域查詢。

3. 變數是允許重複定義的,後一個定義將覆蓋前一個定義。

4. 函式內部如果不加關鍵字var而定義的變數,預設為全域性變數。

1.預設變數提升,看下面程式碼執行結果

1 console.log(a); //undefined
2 var a = 100;

 

1 var a;
2 console.log(a); //undefined
3 a = 100;

說明:變數宣告提升,賦值在後面,所以輸出undefined。

 

2.在javaScript中作用域是函式作用域,不像java,c++有塊級作用域

2.1 在fn內部定義的age變數為區域性變數,所以在外部訪問時報:Uncaught ReferenceError: age is not defined

function fn(name) {
    var age = 20;
    console.log(name, age); //ldd 20
}
    fn('ldd');
    console.log(age); //Uncaught ReferenceError: age is not defined

 

2.2 雖然javaScript是函式作用域,但是在其內部沒有用var宣告的變數被視為全域性變數,且沒有變數提升,看下面程式碼

function fn(name) {
    age = 20;
    console.log(name, age); //ldd 20
} fn('ldd'); console.log(age); //20
function fn(name) {
    console.log(name, age); //ldd undefined 
    var age = 20;
}
  fn('ldd');
function fn(name) {
    console.log(name, age); //Uncaught ReferenceError: age is not defined
   age = 20;
}  
 fn(
'ldd');

 

函式宣告提升

函式宣告提升高於變數宣告

//同時宣告變數a和函式a
var a;
function a() {} 
alert(typeof a);  //顯示的是"function",初步證明function的優先順序高於var。

//先宣告函式後宣告變數,證明上邊的例子不是function覆蓋了變數
function a() {}
var a; 
alert(typeof a);  //顯示的仍是"function",而不是"undefined",即function的優先順序高於var。

//聲明瞭變數的同時賦值
function a() {}
var a = 1;
alert(typeof a);  //number,此時不是function了。
//說明:"var a=1"相當於"var a;a=1",即先宣告,後賦值,"a=1"相當於把a重新賦值了,自然就是number!

 

函式內部用var定義了和外部相同的變數,函式將不再向上找外部的變數

var value = 'hello';
function  show() {
    alert(value);
    if (!value) {
        var value = 'function';
    }
    alert(value);
}
show() //此處呼叫函式依次彈出 "undefined", "function"

//上例相當於
var value = 'hello';
function  show() {
  var value;  //注意這行
    alert(value);
    if (!value) {
        value = 'function';  //這行去掉var
    }
    alert(value);
}
show()
//1.如果上列中show內部定義value未用var,則會用到外部的變數,彈出"hello", "hello"。 
//2.如果函式內部未定義value,也能獲取到外部的value值。

 

匿名函式不會向上提升

getName()
var getName = function () {
    alert('closule')
}
function getName() {
    alert('function')
}
getName()

//上邊的程式碼相當於
function getName() {  //函式向上提升
    alert('function')
}
getName()
var getName = function () {
    alert('closule')
}
getName()

//程式碼執行分別彈出 "function", "closule"

 

不同<script>塊中的函式和變數互不影響,提升不會超出<script>標籤

<script>
    getName() //Uncaught TypeError: getName is not a function
    var getName = function() {
        alert('closule')
    }
    //    alert(a);//Uncaught ReferenceError: a is not defined
</script>
<script>
    var a = 3;

    function getName() {
        alert("a")
    }
</script>

//程式碼執行報錯:TypeError: getName is not a function
//因為第一個<script>塊中getName()函式未定義,匿名函式又不會向上提升

//因為第一個<script>塊中變數a未定義,變數不會提升到上一個script標籤內。