首頁 > web前端 > js教程 > 了解JS中的var、let和const

了解JS中的var、let和const

青灯夜游
發布: 2020-10-20 17:13:25
轉載
2614 人瀏覽過

了解JS中的var、let和const

這篇文章要跟大家介紹一下JavaScript 的 var,let 和 const,有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

var

var 語句用來在JavaScript 中宣告一個變量,該變數遵守以下規則:

  • 作用域範圍是函數作用域或全域作用域的。
  • 不受暫存死區(TDZ)的限制。
  • 它會在 window 上以相同的名稱建立一個全域屬性。
  • 可指派的
  • 可宣告的

函數作用域和全域作用域

當出現在全域作用域內時,var 會建立一個全域變數。另外它也會在window 上建立一個具有相同名稱的全域屬性

var city = "Florence";

console.log(window.city); // "Florence"
登入後複製

當在函數內部宣告時,變數的作用域就是那個函數:

var city = "Florence";

function bubble() {
  var city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"
登入後複製

var 宣告會被提升:

function bubble() {
  city = "Siena";
  console.log(city);
  var city; // hoists
}

bubble(); // "Siena"
登入後複製

意外的全域變數

在沒有任何宣告的情況下所指派的變數(無論是varlet 還是const)在預設情況下會成為全域變數

function bubble() {
  city = "Siena";
  console.log(window.city);
}

bubble(); // "Siena"
登入後複製

為了消除這種行為,需要使用嚴格模式

"use strict";

function bubble() {
  city = "Siena";
  console.log(window.city);
}

bubble(); // ReferenceError: assignment to undeclared variable city
登入後複製

可重新指派和重新宣告

任何用var 宣告的變數都可以在以後進行重新分配重新宣告。重新宣告的範例:

function bubble() {
  var city = "Florence";
  var city = "Siena";
  console.log(city);
}

bubble(); // "Siena"
登入後複製

重新指派的範例:

function bubble() {
  var city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // "Florence"
登入後複製

let

let 語句在JavaScript 中宣告一個變數,該變數遵守以下規則:

  • 屬於區塊作用域。
  • 受到暫存死區的限制。
  • 它不會在 window 上建立任何全域屬性。
  • 可指派的
  • 無法重新宣告

區塊作用域

let 宣告的變數不會在window 上建立任何全域屬性:

let city = "Florence";

console.log(window.city); // undefined
登入後複製

當在函數內部宣告時,變數的作用域為此函數:

let city = "Florence";

function bubble() {
  let city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"
登入後複製

當在區塊中宣告時,變數的作用域為該區塊。以下是區塊中使用的範例:

let city = "Florence";

{
  let city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"
登入後複製

一個有if 區塊的範例:

let city = "Florence";

if (true) {
  let city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"
登入後複製

相反,var 並不受到區塊的限制:

var city = "Florence";

{
  var city = "Siena";
  console.log(city); // "Siena";
}

console.log(window.city); // "Siena"
登入後複製

暫存死區

let 宣告可能會被提升,但會產生暫存死區

function bubble() {
  city = "Siena";
  console.log(city); // TDZ
  let city;
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization
登入後複製

暫存死區可防止在初始化之前存取let 宣告。另外一個例子:

function bubble() {
  console.log(city); // TDZ
  let city = "Siena";
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization
登入後複製

可以看到兩個例子中產生的異常都是一樣的:證明了「暫存死區」的出現。

可重新分配,不可重新宣告

任何用 let 宣告的變數都不能重新宣告。重新宣告引發例外狀況的例子:

function bubble() {
  let city = "Siena";
  let city = "Florence";
  console.log(city);
}

bubble(); // SyntaxError: redeclaration of let city
登入後複製

這是一個有效的重新指派的範例:

function bubble() {
  let city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // "Florence"
登入後複製

const

const 語句用來在JavaScript中宣告一個變量,該變數遵守以下規則:

  • 是屬於區塊作用域的。
  • 受到「暫存死區」的約束。
  • 它不會在 window 上建立任何全域屬性。
  • 無法重新指派
  • 無法重新宣告

區塊作用域

用const 宣告的變數不會在window 上建立任何全域屬性:

const city = "Florence";

console.log(window.city); // undefined
登入後複製

當在函數內部宣告時,變數的作用域為此函數:

const city = "Florence";

function bubble() {
  const city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"
登入後複製

當在區塊中宣告時,變數的作用域為該區塊。區塊語句{} 的範例:

const city = "Florence";

{
  const city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"
登入後複製

if 區塊中的範例:

const city = "Florence";

if (true) {
  const city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"
登入後複製

暫存死區

#const 宣告可能會被提升,但是會進入暫存死區

function bubble() {
  console.log(city);
  const city = "Siena";
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization
登入後複製

無法重新分配,不可重新宣告

const 宣告的任何變數都不能重新聲明,也不能重新指派。一個在重新宣告時拋出例外狀況的範例:

function bubble() {
  const city = "Siena";
  const city = "Florence";
  console.log(city);
}

bubble(); // SyntaxError: redeclaration of const city
登入後複製

重新指派的範例範例:

function bubble() {
  const city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // TypeError: invalid assignment to const 'city'
登入後複製

總結


區塊作用域 暫存死區 建立全域屬性 #可重新指派 可重新宣告
var
let #✅
const #❌

#英文原文網址:https://www.valentinog.com/blog/var/

作者:Valentino

相關免費學習推薦:##js影片教學

#

以上是了解JS中的var、let和const的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板