首頁 > 文章 > web前端 > javascript中var和let有什麼差別

javascript中var和let有什麼差別

青灯夜游原創: 2021-10-13 17:25:2429195瀏覽

區別：1、var有變數提升，而let沒有；2、let不允許在相同的作用域下重複聲明，而var允許；3、let沒有暫時性死區問題；4、let建立的全域變數沒有給window設定對應的屬性；5、let會產生區塊級作用域，var不會。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

想要了解var（ES5）和let（ES6）區別，首先就要了解ES5下JS的變數提升

一、變數提升（聲音）

當瀏覽器開闢出供程式碼執行的堆疊記憶體後，程式碼並沒有自上而下立即執行，而是繼續做了一些事情：把目前作用域中所有帶var/function關鍵字的進行提前的宣告和定義=> 變數提升機制

#的只是提前宣告（declare） var a;，如果只宣告沒有賦值，預設值是undefined
# 例如：

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

輸出：undefined
#相當於：

var a;		// 只声明没有赋值，默认为undefined
console.log(a);
a = 13;

帶function的不僅聲明，而且還定義了（defined），準確來說就是讓變數和某個值進行關聯。

二、let和var的區別

1. ##let和const不存在變數提升機制

建立變數的六種方式中：

var/function有變數提升，而let/const/class/import 都不存在這個機制

2. var<span style="font-size: 18px;"></span>允許重複聲明，而let<span style="font-size: 18px;"></span>不允許重複宣告

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

var/function關鍵字宣告變數且重複聲明，是不會有影響的（宣告第一次之後，之後再遇到就不會再重複宣告了）
let/const就不行，瀏覽器會校驗目前作用域中是否已經存在這個變數了，如果已經存在了，則再次基於let等重新宣告就會報錯

在瀏覽器開闢堆疊記憶體供程式碼自上而下執行之前，不僅有變數提升的操作，還有很多其他的操作=> “詞法解析”或者“詞法檢測”：就是檢測目前即將要執行的程式碼是否會出現“語法錯誤SyntaxError”，如果發生錯誤，程式碼將不會再執行（第一行都不會執行）
console.log(1)  // => 这行代码就已经不会执行了
let a = 12
console.log(a)
let a = 13      // => 此行出错：SyntaxError: Identifier &#39;a&#39; has already been declared
console.log(a)

所謂重複就是：不管之前通過什麼方法，只要當前棧內存中存在了這個變量，我們使用

let/const等重複再聲明這個變量就是語法錯誤。 eg：

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

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

3. let能解決typeof偵測時出現的暫時性死區問題（let比var更嚴謹）

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

typeof a 未報錯誤

console.log(typeof a)
// =>  &#39;undefined&#39; 这是浏览器的bug，本应报错，因为没有a（暂时性死区）

使用

let後：

console.log(typeof a)
// => ReferenceError: Cannot access &#39;a&#39; before initialization
let a

返回不能在

a被定義之前使用它，解決暫時性死區問題。

4. let建立的全域變數沒有給window設定對應的屬性

首先看帶var與不帶var建立全域變數時的差異

/*
 * javascript中var和let有什麼差別的：相当于给全局对象window设置了一个属性a
 *      window.a = 13
 */
a = 13
console.log(a)  // => window.a 13
/*
 * 栈内存变量存储空间
 *            b
 * javascript中var和let有什麼差別：是在全局作用域下声明了一个变量b（全局变量），
 * 但是在全局下声明的变量也相当于给全局对象window增加了一个对应的
 * 属性b（只有全局作用域具备这个特点）
 */
var b = 14
console.log(b)
console.log(window.b)

javascript中var和let有什麼差別
使用let建立時：

/*
 * 栈内存变量存储空间
 *   c
 * 带let的：仅仅在全局作用域下声明了一个变量b（全局变量），
 * 并未给全局对象window增加对应的属性c
 */
let c = 15
console.log(c)                          // => 15
console.log(window.c)                   // => undefined

javascript中var和let有什麼差別

5. let會產生區塊級作用域

下面程式碼能否實現點擊某個按鈕，body的背景色改為按鈕對應的顏色，若不能，如何改進（騰訊）

<!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">蓝</button>

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

</html>

答案當然是不能，因為透過var定義的變量，在for循環中的i是全局的，變量提升、3次循環過後，i=3，因為點擊每個都相當於點擊最後一個。

【推薦學習：

javascript進階教學】#

以上是javascript中var和let有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript es6 for const 全局变量循环栈 class var JS undefined function 作用域 typeof 变量提升

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript的基本型別有哪些下一篇：JavaScript的基本型別有哪些

看更多