快捷導(dǎo)航

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

更新時(shí)間：2022年07月04日 14:56:04 作者：wx5e435a4343578

這篇文章主要介紹了JavaScript中的變量提升和函數(shù)提升，在js中對(duì)變量進(jìn)行操作后打印值經(jīng)常會(huì)出現(xiàn)undefined的現(xiàn)象。其實(shí)原因是因?yàn)閖s中有一個(gè)叫做變量提升的功能

前言

在js中對(duì)變量進(jìn)行操作后打印值經(jīng)常會(huì)出現(xiàn)undefined的現(xiàn)象。其實(shí)原因是因?yàn)閖s中有一個(gè)叫做變量提升的功

舉例：

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

打印的值第一個(gè)為undefined，而第二個(gè)打印的值為yyyyy.

原因：

在執(zhí)行g(shù)etData()方法的時(shí)候會(huì)在函數(shù)內(nèi)部首先將變量的聲明提升到第一步。然后再聲明函數(shù)內(nèi)部的函數(shù)（如果函數(shù)內(nèi)部有函數(shù)的話）。之后才會(huì)按照方法內(nèi)部的邏輯先后順序執(zhí)行代碼。前兩步只是聲明?。。】吹竭@里應(yīng)該就已經(jīng)知道為什么會(huì)有上面那樣的結(jié)果了。

實(shí)際的方法內(nèi)部代碼執(zhí)行順序應(yīng)該是這樣的：

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

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

看到拆分后的代碼執(zhí)行順序?qū)Y(jié)果也就不迷茫了。

為什么有變量提升

那么為什么會(huì)出現(xiàn)變量提升這個(gè)現(xiàn)象呢?

其實(shí)js和其他語(yǔ)言一樣，都要經(jīng)歷編譯和執(zhí)行階段。而js在編譯階段的時(shí)候，會(huì)搜集所有的變量聲明并且提前聲明變量，而其他的語(yǔ)句都不會(huì)改變他們的順序，因此，在編譯階段的時(shí)候，第一步就已經(jīng)執(zhí)行了，而第二步則是在執(zhí)行階段執(zhí)行到該語(yǔ)句的時(shí)候才執(zhí)行。

javascript變量提升和函數(shù)提升

變量提升是把變量提升提到函數(shù)頂部。需要說(shuō)明的是，變量提升只是提升變量的聲明，并不會(huì)把賦值也提升上來(lái)。函數(shù)提升是把整個(gè)函數(shù)都提到前面去。函數(shù)表達(dá)式不能被提升，函數(shù)聲明形式能被提升。

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

? ? test();

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

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

? ? //函數(shù)表達(dá)式不能被提升
? ? 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>

總結(jié)

1.js會(huì)將變量的聲明提升到j(luò)s頂部執(zhí)行，因此對(duì)于這種語(yǔ)句:var a = 2;其實(shí)上js會(huì)將其分為var a;和a = 2;兩部分，并且將var a這一步提升到頂部執(zhí)行。
2.變量提升的本質(zhì)其實(shí)是由于js引擎在編譯的時(shí)候，就將所有的變量聲明了，因此在執(zhí)行的時(shí)候，所有的變量都已經(jīng)完成聲明。
3.當(dāng)有多個(gè)同名變量聲明的時(shí)候，函數(shù)聲明會(huì)覆蓋其他的聲明。如果有多個(gè)函數(shù)聲明，則是由最后的一個(gè)函數(shù)聲明覆蓋之前所有的聲明。

到此這篇關(guān)于JavaScript中的變量提升和函數(shù)提升的文章就介紹到這了,更多相關(guān)js變量提升內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: