JavaScript let 與var 區別及var弊端

2020-12-22 騰訊網

let,const來源

ES2015 引入了兩個重要的 JavaScript 新關鍵詞:let 和 const。

這兩個關鍵字在 JavaScript 中提供了塊作用域(Block Scope)變量(和常量)。

在 ES2015 之前,JavaScript 只有兩種類型的作用域:全局作用域和函數作用域(局部變量)。都是通過var聲明

全局作用域

全局(在函數之外)聲明的變量擁有全局作用域。

實例

var carName = "porsche";// 此處的代碼可以使用 carNamefunction myFunction() { // 此處的代碼也可以使用 carName}

函數作用域

局部(函數內)聲明的變量擁有函數作用域。

實例

// 此處的代碼不可以使用 carNamefunction myFunction() { var carName = "porsche"; // code here CAN use carName}// 此處的代碼不可以使用 carName

局部變量只能在它們被聲明的函數內訪問。

JavaScript 塊作用域

通過 var 關鍵詞聲明的變量沒有塊作用域。

在塊 {} 內聲明的變量可以從塊之外進行訪問。

實例

{

var x = 10;

}// 此處可以使用 x

在 ES2015 之前,JavaScript 是沒有塊作用域的。

可以使用 let 關鍵詞聲明擁有塊作用域的變量。

在塊 {} 內聲明的變量無法從塊外訪問:

實例

{

let x = 10;

}// 此處不可以使用 x

var弊端

使用 var 關鍵字重新聲明變量會帶來問題。

在塊中重新聲明變量也將重新聲明塊外的變量:

實例

var x = 10;// 此處 x 為 10{

var x = 6; // 此處 x 為 6}// 此處 x 為 6

使用 let 關鍵字重新聲明變量可以解決這個問題。

在塊中重新聲明變量不會重新聲明塊外的變量:

實例

var x = 10;// 此處 x 為 10{

let x = 6; // 此處 x 為 6}// 此處 x 為 10

var 與let對比

函數作用域

在函數內聲明變量時,使用 var 和 let 很相似。

它們都有函數作用域:

function myFunction() { var carName = "porsche"; // 函數作用域}function myFunction() { let carName = "porsche"; // 函數作用域}

全局作用域

如果在塊外聲明聲明,那麼 var 和 let 也很相似。

它們都擁有全局作用域:

var x = 10; // 全局作用域let y = 6; // 全局作用域

HTML 中的全局變量

使用 JavaScript 的情況下,全局作用域是 JavaScript 環境。

在 HTML 中,全局作用域是 window 對象。

通過 var 關鍵詞定義的全局變量屬於 window 對象:

實例

var carName = "porsche";// 此處的代碼可使用 window.carName

通過 let 關鍵詞定義的全局變量不屬於 window 對象:

實例

let carName = "porsche";// 此處的代碼不可使用 window.carName

重新聲明

允許在程序的任何位置使用 var 重新聲明 JavaScript 變量:

實例

var x = 10;// 現在,x 為 10

var x = 6;// 現在,x 為 6

在相同的作用域,或在相同的塊中,通過 let 重新聲明一個 var 變量是不允許的:

實例

var x = 10; // 允許let x = 6; // 不允許{ var x = 10; // 允許

let x = 6; // 不允許}

在相同的作用域,或在相同的塊中,通過 let 重新聲明一個 let 變量是不允許的:

實例

let x = 10; // 允許let x = 6; // 不允許{ let x = 10; // 允許

let x = 6; // 不允許}

在相同的作用域,或在相同的塊中,通過 var 重新聲明一個 let 變量是不允許的:

實例

let x = 10; // 允許var x = 6; // 不允許{ let x = 10; // 允許

var x = 6; // 不允許}

在不同的作用域或塊中,通過 let 重新聲明變量是允許的:

實例

let x = 6; // 允許{ let x = 7; // 允許}

{ let x = 8; // 允許}

提升

通過 var 聲明的變量會提升到頂端。

您可以在聲明變量之前就使用它:

實例

// 在此處,您可以使用 carNamevar carName;

通過 let 定義的變量不會被提升到頂端。

在聲明 let 變量之前就使用它會導致 ReferenceError。

變量從塊的開頭一直處於「暫時死區」,直到聲明為止:

實例

// 在此處,您不可以使用 carNamelet carName;

相關焦點

  • let 與 var 的區別
    '; let letTest = 'test let OK.';}());let不可以重複申明相同的變量,會報錯,變量已經存在'use strict';(function() { var varTest = 'test var OK.'; let letTest = 'test let OK.'
  • 我的JavaScript的學習筆記:let、var 和const的作用域
    ECMAScript 6(簡稱ES6)引入了兩個新的變量聲明關鍵字:let和const。那麼新增的let和const與var有什麼區別?我們知道var只有全局作用域和函數作用域,全局作用域就是指在在全局環境中聲明的能在代碼的任何位置訪問的變量。函數作用域是指在在函數內部聲明的只能在這個函數內部訪問的變量。var a="hello word !"
  • JavaScript小知識:let和var的作用域
    在ECMAScript6中又新增了兩個變量聲明關鍵字:let和const。那麼這個有什麼不同?var只有全局作用域和函數作用域,所謂全局作用域就是在代碼的任何位置都能訪問var聲明的變量,而函數作用域在變量聲明的當前函數內部訪問變量。函數外部是無法訪問函數內部聲明的變量的var messageOne="hello word !"
  • JavaScript小知識:var聲明提升和let聲明暫時性死區
    並且還允許我們重複聲明一個變量而不會造成語法錯誤:function foo(){var age=20;var age=25;var age=30;var age=31;>console.log(age);//31}使用var重複聲明一個變量時,變量引用採取「就近」原則,也就是引用距離方法最近的變量。
  • 不要再在JavaScript中用『var』聲明變量了
    全文共2218字,預計學習時長7分鐘對`const` 和`let`的介紹大家都始於初學者。我學到在JavaScript中用關鍵詞var來聲明變量,這是一個簡單且有效的方法,但如今我已做出改變。>使用let可以澄清和解決許多這些異常。
  • 什麼是javascript?javascript需要學哪些內容?這篇文章告訴你!
    聲明變量使用關鍵字:var(variable)你給它賦什麼類型的值,那麼這個變量就是什麼數據類型。4.4 let 和var 的區別var:variable,它是可變的。let:塊作用域。剩餘可以是任意字母,美元符號,下劃線和數字(3)不能使用javascript中的關鍵字(保留字)來命名變量(4)中文也可以聲明變量,不建議使用它。
  • 說說那些經典的web前端面試題-JavaScript部分
    ('script'); _script.type = "text/javascript"; _script.src = "http://localhost:8888/jsonp?實例如下:<div id="myDiv"> <input type="button" value="Click me" id="myBtn"></div><script type="text/javascript"> var btn = document.getElementById
  • Javascript去除字符串中的點或其他符號
    在前端上使用javascript進行操作的。測試了兩次沒有好用,程序直接把整個字符串都進行了替換,在考慮這個是為什麼呢?javascript(請忽略此配圖)示例var ip = data.field.ip.replace(/.
  • 如何寫好JavaScript函數?
    ];let statements = code.split(" ");let tokens;REGEXES.forEach((REGEX) => {statements.forEach((statement
  • JavaScript:對象都是這樣生成的!
    頭圖 | CSDN下載自視覺中國作者 | flydean 責編 | 張文來源 | 程序那些事(ID:flydean-tech)本文將會深入講解面向對象在 javascript 中的應用,並詳細介紹三種對象的生成方式:構造函數、原型鏈、類。
  • 淺議var——足球「鏡像時代」的悲與喜
    起初,它的優點多於弊端。球迷們會借它的好處調侃敵對球迷,比如巴薩球迷會說,假如var技術早出現幾年,就不會有皇馬的歐冠三連冠。皇馬球迷也會反駁,假如早幾年應用var ,就不會有「斯坦福橋慘案」。 從這些調侃當中會發覺剛剛開始的時候,輿論對這項技術還是持肯定態度,因為var 會使足球運動變得更公平一些。
  • 3.2.3 JavaScript中for循環語句的使用
    代碼如下:<script type="text/javascript">var sum=0;for(var i=1;i<=100;i++){sum+=i; //相當於
  • 什麼是JavaScript對象?如何創建並引用?這就告訴你!
    最後一個鍵值對末尾不用加逗號var obj = {key1:value1,key2:value2};2.2 對象的構成對象是JavaScript的核心概念,也是最重要的數據類型。JavaScript的所有數據都可以被視為對象。
  • 《csgo》var高怎麼解決 var高解決辦法
    導 讀 csgo的var這個參數,通俗來講就是伺服器刷新頻率的穩定程度,是個方差值越小越好,但是有的玩家
  • 前端:用javascript實現一個轉盤小遊戲?
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫本文主要介紹如何使用原生javascript和Css3來實現一個在各大移動應用中經常出現的轉盤遊戲,由於改實現可以有不同方式,如果熟悉canvas的話也可以用canvas實現,本文採用js和css實現主要考慮到複雜度較小性能較好
  • 第41節 Document文檔節點-Javascript
    mydiv = document.getElementById("mydiv");var links = document.links;for(var i=0,len=links.length; i<len; i++){ var aNode = document.createElement("a"); aNode.href = links[i].href; var href
  • 幾個非常有意思的javascript知識點總結
    這個問題主要是之前有朋友問過我,當時的想法就是簡單的認為script內的代碼執行完之後以及與dom綁定了,存放在了瀏覽器內存中,最近查了很多資料發現有一個有點意思的解釋,放出來大家可以感受一下:JavaScript解釋器在執行腳本時,是按塊來執行的,也就是說瀏覽器在解析HTML文檔流時,如果遇到一個script標籤,javascript
  • JavaScript組件模式深入淺出
    匿名閉包(Anonymous Closures)這是使得模式可以正常工作的語言基礎,也實在是javascript最為實用的特性之一。我們可以簡單的創建一個匿名函數,並且立刻執行它。所有運行在該函數裡的代碼叫做一個閉包,它提供了在整個應用程式生命周期中都有效的數據隱私控制以及狀態保存功能。