JavaScript中的變量提升和函數(shù)提升
前言
在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和其他語言一樣，都要經(jīng)歷編譯和執(zhí)行階段。而js在編譯階段的時(shí)候，會(huì)搜集所有的變量聲明并且提前聲明變量，而其他的語句都不會(huì)改變他們的順序，因此，在編譯階段的時(shí)候，第一步就已經(jīng)執(zhí)行了，而第二步則是在執(zhí)行階段執(zhí)行到該語句的時(shí)候才執(zhí)行。
javascript變量提升和函數(shù)提升
變量提升是把變量提升提到函數(shù)頂部。需要說明的是，變量提升只是提升變量的聲明，并不會(huì)把賦值也提升上來。函數(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ì)把賦值也提升上來
? ? 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ì)于這種語句: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)文章希望大家以后多多支持腳本之家！
解決layui上傳文件提示上傳異常,實(shí)際文件已經(jīng)上傳成功的問題
Auntion-TableSort javascript類文件
JS如何將數(shù)字金額轉(zhuǎn)換成中文金額格式
javascript 冒泡排序 正序和倒序?qū)崿F(xiàn)代碼
js中.sort()函數(shù)的常見用法與高級(jí)操作
