首頁 > web前端 > js教程 > 主體

js變數提升詳解

小云云
發布: 2018-02-26 14:08:27
原創
1545 人瀏覽過


1. JavaScript程式碼執行分為兩個階段:

  • 預解析階段:在預解析階段,js會對以var宣告的變量,和function開頭的語句區塊進行提升,將var宣告的變數和function 提升至程式碼的最前面。需要注意的時,function整體提升,var 宣告的變數只提升變數聲明,並不會在提升的同時進行賦值運算

  • 執行階段

##2.舉例:

alert(a)//undefinedvar a = 1;  

为什么会输出undefined呢?
模拟提升的之后的代码 ,上一段代码相当于 var a;  //声明一个变量。但是没有初始化Alert(a);
 a = 1;  //初始化为1----------
fun();    //在C语言中,如果不先声明函数,先调用后声明函数会报错,但是js会正常运行function fun(){
    alert(“函数被声明了”);
}

代码提升后 相当于 
function fun(){
    alert(“函数被声明了”);
}

fun();
登入後複製

3.多個函數同名提升規則: 都提升,但是後面的函數會覆寫前面函數

func1();  //输出  我是后声明的函数function func1(){
   console.log('我是先声明的函数');
}function func1(){
   console.log('我是后声明的函数');
}
模拟提升后的代码function func1(){
   console.log('我是先声明的函数');
}function func1(){
   console.log('我是后声明的函数');
}
func1();
 函数名也是变量,后面的会覆盖前面。
登入後複製

4.變數名稱和函數名相同提升規則:如果有變數和函數同名,會忽略掉變量,只提升函數

alert(foo); //输出function foo(){}function foo(){
}
var foo = 2;
alert(foo); //输出 2----------模拟提升后的代码function foo{}Alert(foo);
foo = 2;
alert(foo);
登入後複製

5.變數提升分作用域

var num = 123; function test(){
     console.log(num);     var num = 10;
 }
 test(); //输出undefined; ----------


模拟变量提升后的代码  var num;function test(){var num
   console.log(num); //函数内部声明了num,但是没赋值。因为在函数内部声明了num,所以函数会使用它内部声明的num,而不会去全局中找  
   num = 10;
  }
num = 123;
登入後複製

6.函數表達式不會提升

func();  // func is not a function
 var func = function(){
    alert("1234");
 }


----------


提升后的代码var func;
func();
func = function(){
    alert("1234");
};
 用var声明的变量(包括函数表达式),只提升声明,不提升赋值操作
登入後複製

7.最後再來個練習

var s1 = “qq”;

foo();

function foo() {
    console.log(s1); 
    var s1 = "tengxunqq";
    console.log(s1);
登入後複製

}

提升后:    var s1;    function foo() {
        var s1;
        console.log(s1); //
        s1= "tengxunqq";
        console.log(s1); //t
    }
     s1 = "qq";
    foo();  //先输出 undefined  后engxunqq
登入後複製
相關推薦:


#JS變數及其作用域知識點介紹

如何對Js變數作用域進行申明?及函數內的作用域實例詳解

js變數提升與函數宣告預解析實例詳解

以上是js變數提升詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!