溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

javascript中var和let有哪些區(qū)別

發(fā)布時(shí)間：2021-10-15 10:43:25 來(lái)源：億速云 閱讀：173 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了javascript中var和let有哪些區(qū)別，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

區(qū)別：1、var有變量提升，而let沒有；2、let不允許在相同的作用域下重復(fù)聲明，而var允許；3、let沒有暫時(shí)性死區(qū)問題；4、let創(chuàng)建的全局變量沒有給window設(shè)置對(duì)應(yīng)的屬性；5、let會(huì)產(chǎn)生塊級(jí)作用域，var不會(huì)。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

想要了解var（ES5）和let（ES6）區(qū)別，首先就要了解ES5下JS的變量提升

一、變量提升（聲）

當(dāng)瀏覽器開辟出供代碼執(zhí)行的棧內(nèi)存后，代碼并沒有自上而下立即執(zhí)行，而是繼續(xù)做了一些事情：把當(dāng)前作用域中所有帶var/function關(guān)鍵字的進(jìn)行提前的聲明和定義 => 變量提升機(jī)制

  • 帶var的只是提前聲明（declare）var a;，如果只聲明沒有賦值，默認(rèn)值是undefined
    例如：

console.log(a);
var a = 13;

輸出：undefined
相當(dāng)于：

var a;		// 只聲明沒有賦值，默認(rèn)為undefined
console.log(a);
a = 13;

  • 帶function的不僅聲明，而且還定義了（defined），準(zhǔn)確來(lái)說(shuō)就是讓變量和某個(gè)值進(jìn)行關(guān)聯(lián)。

二、let和var的區(qū)別

1. let和const不存在變量提升機(jī)制

創(chuàng)建變量的六種方式中：var/function有變量提升，而let/const/class/import都不存在這個(gè)機(jī)制

2. var允許重復(fù)聲明，而let不允許重復(fù)聲明

在相同的作用域（或執(zhí)行上下文中）

  • 如果使用var/function關(guān)鍵詞聲明變量并且重復(fù)聲明，是不會(huì)有影響的（聲明第一次之后，之后再遇到就不會(huì)再重復(fù)聲明了）

  • 但使用let/const就不行，瀏覽器會(huì)校驗(yàn)當(dāng)前作用域中是否已經(jīng)存在這個(gè)變量了，如果已經(jīng)存在了，則再次基于let等重新聲明就會(huì)報(bào)錯(cuò)

在瀏覽器開辟棧內(nèi)存供代碼自上而下執(zhí)行之前，不僅有變量提升的操作，還有很多其他的操作 => “詞法解析”或者“詞法檢測(cè)”：就是檢測(cè)當(dāng)前即將要執(zhí)行的代碼是否會(huì)出現(xiàn)“語(yǔ)法錯(cuò)誤 SyntaxError”，如果出現(xiàn)錯(cuò)誤，代碼將不會(huì)再執(zhí)行（第一行都不會(huì)執(zhí)行）

console.log(1)  // => 這行代碼就已經(jīng)不會(huì)執(zhí)行了
let a = 12
console.log(a)
let a = 13      // => 此行出錯(cuò)：SyntaxError: Identifier 'a' has already been declared
console.log(a)

所謂重復(fù)就是：不管之前通過什么方法，只要當(dāng)前棧內(nèi)存中存在了這個(gè)變量，我們使用let/const等重復(fù)再聲明這個(gè)變量就是語(yǔ)法錯(cuò)誤。eg：

console.log(a)
var a = 12
let a = 13  // => SyntaxError: Identifier 'a' has already been declared
console.log(a)
console.log(a)
let a = 13
var a = 12  // => SyntaxError: Identifier 'a' has already been declared
console.log(a)

3. let能解決typeof檢測(cè)時(shí)出現(xiàn)的暫時(shí)性死區(qū)問題（let比var更嚴(yán)謹(jǐn)）

console.log(a)
// => ReferenceError: a is not defined

typeof a 未報(bào)錯(cuò)

console.log(typeof a)
// =>  'undefined' 這是瀏覽器的bug，本應(yīng)報(bào)錯(cuò)，因?yàn)闆]有a（暫時(shí)性死區(qū)）

使用let后：

console.log(typeof a)
// => ReferenceError: Cannot access 'a' before initialization
let a

返回不能在a被定義之前使用它，解決暫時(shí)性死區(qū)問題。

4. let創(chuàng)建的全局變量沒有給window設(shè)置對(duì)應(yīng)的屬性

首先看帶var與不帶var創(chuàng)建全局變量時(shí)的區(qū)別

/*
 * 不帶var的：相當(dāng)于給全局對(duì)象window設(shè)置了一個(gè)屬性a
 *      window.a = 13
 */
a = 13
console.log(a)  // => window.a 13
/*
 * 棧內(nèi)存變量存儲(chǔ)空間
 *            b
 * 帶var的：是在全局作用域下聲明了一個(gè)變量b（全局變量），
 * 但是在全局下聲明的變量也相當(dāng)于給全局對(duì)象window增加了一個(gè)對(duì)應(yīng)的
 * 屬性b（只有全局作用域具備這個(gè)特點(diǎn)）
 */
var b = 14
console.log(b)
console.log(window.b)

javascript中var和let有哪些區(qū)別
javascript中var和let有哪些區(qū)別
使用let創(chuàng)建時(shí)：

/*
 * 棧內(nèi)存變量存儲(chǔ)空間
 *   c
 * 帶let的：僅僅在全局作用域下聲明了一個(gè)變量b（全局變量），
 * 并未給全局對(duì)象window增加對(duì)應(yīng)的屬性c
 */
let c = 15
console.log(c)                          // => 15
console.log(window.c)                   // => undefined

javascript中var和let有哪些區(qū)別

5. let會(huì)產(chǎn)生塊級(jí)作用域

下面代碼能否實(shí)現(xiàn)點(diǎn)擊某個(gè)按鈕，body的背景色改為按鈕對(duì)應(yīng)的顏色，若不能，如何改進(jìn)（騰訊）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
      overflow: hidden;
    }

    button {
      padding: 5px 10px;
      cursor: pointer;
    }
  </style>
</head>

<body>
<!---->
<button value="red">紅</button>
<button value="green">綠</button>
<button value="blue">藍(lán)</button>

<script>
  var body = document.querySelector('body'),
    buttons = document.querySelectorAll('button'),
    arr = ['red', 'green', 'blue']
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function () {
      body.style.background = arr[i]
    }
  }
</script>
</body>

</html>

答案當(dāng)然是不能，因?yàn)橥ㄟ^var定義的變量，在for循環(huán)中的i是全局的，變量提升、3次循環(huán)過后，i=3，因?yàn)辄c(diǎn)擊每個(gè)都相當(dāng)于點(diǎn)擊最后一個(gè)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“javascript中var和let有哪些區(qū)別”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手