一、說起變量的提升呢，首先我們先看一段簡單的代碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var v = 'hello world'; alert(v); </script> </body> </html>
以上代碼執行的結果是hello world
然后在看一段代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var v='Hello World';
(function(){
alert(v);
})();
</script>
</body>
</html>
執行的結果和第一段代碼一樣hello world
好了，接下來在看這段代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var v='Hello World';
(function(){
alert(v);
var v='I love you';
alert(v);
})();
</script>
</body>
</html>
以上代碼執行的結果： 第一個彈出的是undefined；第二個結果是I love you。為什么會有這樣的結果呢？
這就跟剛開始提到的變量提升有關系哦~~~下面我們來做下總結：
最后一段代碼展現了2個知識點：
1、變量提升
2、作用域鏈
首先來說作用域鏈，js訪問一個變量時會優先在該作用域內（訪問時的那個作用域）尋找是否聲明過這個變量，如果該變量已經存在，則直接使用它的值，否則會尋找該作用域的‘父作用域/上級作用域'，依次類推，直到找到全局作用域為止。
關于變量提升是指：js在解析的時候總是會將var，function這類關鍵詞的聲明語句提升至作用域的最頂部（注意：這里只會提升聲明的部分，賦值不會被提升）
所以，由此看來，上述的那段代碼就等于：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var v='Hello World';
(function () {
var v; //先將該作用域下的變量提升，但沒有賦值
alert(v); //所以此時是undefined
var v='I love you';
alert(v); //I love you
})();
</script>
</body>
</html>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
