JavaScript中的變量提升和函數提升

Posted on by

前言

在js中對變量進行操作後打印值經常會出現undefined的現象。其實原因是因為js中有一個叫做變量提升的功

舉例：

	var data="lyyyyy";
	getData();
	function getData(){
		//第一次打印
		console.log("data值為: ", data);
		var	data="yyyyyyy";
		//第二次打印
		console.log("data值為: ", data);
	}

打印的值第一個為undefined，而第二個打印的值為yyyyy.

原因：

在執行getData()方法的時候會在函數內部首先將變量的聲明提升到第一步。然後再聲明函數內部的函數（如果函數內部有函數的話）。之後才會按照方法內部的邏輯先後順序執行代碼。前兩步隻是聲明！！！看到這裡應該就已經知道為什麼會有上面那樣的結果瞭。

實際的方法內部代碼執行順序應該是這樣的：

	function getData(){
		//一。聲明變量
		var	data;
		//二。聲明函數（如果函數內部有函數的話）

		//三。按照代碼的順序執行
		console.log("data值為: ", data);
		data="yyyyyyy";
		//第二次打印
		console.log("data值為: ", data);
	}

看到拆分後的代碼執行順序對結果也就不迷茫瞭。

為什麼有變量提升

那麼為什麼會出現變量提升這個現象呢?

其實js和其他語言一樣，都要經歷編譯和執行階段。而js在編譯階段的時候，會搜集所有的變量聲明並且提前聲明變量，而其他的語句都不會改變他們的順序，因此，在編譯階段的時候，第一步就已經執行瞭，而第二步則是在執行階段執行到該語句的時候才執行。

javascript變量提升和函數提升

變量提升是把變量提升提到函數頂部。需要說明的是，變量提升隻是提升變量的聲明，並不會把賦值也提升上來。函數提升是把整個函數都提到前面去。函數表達式不能被提升，函數聲明形式能被提升。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
    //變量提升
    function test(){
        a=2;
        var a;
        console.log(a);   //2
    }

    test();

    //變量提升,不會把賦值也提升上來
    var v='Hello World';
    (function(){
        var v;
        console.log(v);  //undefined
        v='I love you';
    })();

    //函數聲明形式能被提升
    function myTest(){
        foo();
        function foo(){
            console.log("hello world");  //hello world
        }
    }
    myTest();

    //函數表達式不能被提升
    function myTest2(){
        foo();    //foo is not a function
        var foo =function foo(){
            console.log("hello world");
        }
    }
    myTest2();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
//輸出Goodbye Jack
var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();
//輸出Hello World!
var name2 = 'World!';
(function () {
    if (typeof name2 === 'undefined') {
        name2 = 'Jack';
        console.log('Goodbye ' + name2);
    } else {
        console.log('Hello ' + name2);
    }
})();

//輸出Hello World!
var name3 = 'World!';
(function () {
    if (typeof this.name3 === 'undefined') {
        var name3 = 'Jack';
        console.log('Goodbye ' + name3);
    } else {
        console.log('Hello ' + this.name3);
    }
})();
</script>
</body>
</html>

總結

  • 1.js會將變量的聲明提升到js頂部執行，因此對於這種語句:var a = 2;其實上js會將其分為var a;和a = 2;兩部分，並且將var a這一步提升到頂部執行。
  • 2.變量提升的本質其實是由於js引擎在編譯的時候，就將所有的變量聲明瞭，因此在執行的時候，所有的變量都已經完成聲明。
  • 3.當有多個同名變量聲明的時候，函數聲明會覆蓋其他的聲明。如果有多個函數聲明，則是由最後的一個函數聲明覆蓋之前所有的聲明。

到此這篇關於JavaScript中的變量提升和函數提升的文章就介紹到這瞭,更多相關js變量提升內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：