談談 var, let, const. var 也是一種選擇

BoYang 發布于2019-08-21 11:44 / 1869人閱讀

摘要：談談也是一種選擇歷史故事在之前是一門被稱為沒有塊級作用域的語言看看代碼輸出結果權威解析這是因為被聲明在當前函數的作用域內不管你聲明在函數的什么位置在函數執行之前解析器會掃描當前函數作用域并將以和開頭的語句的變量名添加到當前函數作用域內這意味

談談 var, let, const. var 也是一種選擇 歷史故事

在 ES6 之前, JavaScript 是一門被稱為沒有塊級作用域的語言.

看看代碼:

(function(){
    "use strict";
    console.log(i)
    for (var i = 0; i < 10; ++i) { console.log(i) }
    console.log("i=" + i)
})()

輸出結果:

undefined
...
...
i=10

權威解析: i=10 這是因為 i 被聲明在當前函數的作用域內, var 不管你聲明在函數的什么位置, 在函數執行之前, 解析器會掃描當前函數作用域, 并將以 var 和 function 開頭的語句的變量名添加到當前函數作用域內, 這意味著諸如 var func = function name() {} 這樣的語句的右邊的函數的名字是不會被添加到當前作用域內的( 但是在函數內部可以訪問 ), 在 ES6 中的 class 也有同樣的表現. 此時 var 聲明的變量還沒有值( undefined ), 這也是第一個輸出語句為什么沒報錯而輸出 undefined 的原因; function 聲明的函數名會指向一個函數對象( 也就是 __proto__ 屬性指向 Function.prototype ).

這種現象對于習慣了塊級作用域的程序猿來說是災難般的. 于是搞標準的那幫人弄了 let, const 這樣的關鍵字出來. let 和 const 聲明的變量不會在之前說的掃描階段里被添加到當前作用域內, 并且會在當前大括號內的作用域塊結束的時候被清理掉, 也就是說 ES6 有了塊級作用域. 對于 const 還加了兩條限制.

如果 const 的變量是基本類型( null, undefined, string, number ), 那么變量的值不能變.

如果 const 的變量是引用類型( object ), 那么其引用值不能改變.

看代碼就知道了

(function(){
    "use strict";
    
    // 如果執行下面這行代碼, 會報引用錯誤
    // console.log(i)  // Reference Error
    
    // 如果執行下面這行代碼, 會報引用錯誤
    // 因為 i 在 for 循環結束后就被銷毀了
    setTimeout(() => console.log(i), 0)
    
    for (let i = 0; i < 10; ++i) { console.log(i) }
    
    const foo = 10
    const bar = {}
    
    foo = 11 // TypeError
    bar.type = "const" // OK
})()

我該怎么選擇?

如果你稍微接觸過 ES6, 別人會告訴你 絕對不要用 var, 如果變量在將來不會改變就用 const, 否則就用 let.

這句話我是贊同的, 但是在我寫代碼的時候遇到某些情況不得不用 var, 看代碼:

async function clearExpiredRss() {
  try {
    var connection = await pool.getConnection()
    connection.query(`DELETE FROM ${TABLE_NAME} WHERE date+3600*1000 < ${Date.now()}`)
  } catch (e) {
    logger.error(e)
  }  finally {
    connection && connection.release()
  }
}

connection 變量如果用 let 或 const 聲明的話, finally 內就沒辦法釋放連接了. 有人說為什么不直接在 try 內寫個 if 判斷? 個人覺得在 finally 里看起來更優雅一些.

所以說, 有時候作用域鏈反倒是 javascript 這門語言的優勢, 為此, 我不得不說, javascript 是世界上最好的語言!

最后想說的

你們有沒有遇到過 github issues 上寫文章的人... 我反正是看到了很多在 Github 上的 issues 寫技術博客的人. 之前都喜歡用 Github 的 Subscribe 功能來訂閱, 或者直接 Watching ... 這兩天突發奇想, 能不能把 issues 轉換成 RSS 呢? 所以就擼了一個小工具, github-issues-rss, 求關注, 求 star !

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87054.html

談談前端異常捕獲與上報

摘要：另外這樣的異常捕獲不能捕獲的異常錯誤信息，這點需要注意。最終大致的流程圖如下結語前端異常捕獲與上報是前端異常監控的前提，了解并做好了異常數據的收集和分析才能實現一個完善的錯誤響應和處理機制，最終達成數據可視化。關于微信公眾號：前端呼啦圈（Love-FED）我的博客：勞卜的博客知乎專欄：前端呼啦圈前言 Hello，大家好，又與大家見面了，這次給大家分享下前端異常監控中需...

Kosmos 2019-08-22 15:44 評論0 收藏0
談談PostCSS

摘要：它們有個統一的名字預處理器。面對以上問題，預處理器給出了非常可行的解決方案變量就像其他編程語言一樣，免于多處修改。回到話題中，之所以會出現向預處理器這樣子的解決方案，歸根結底還是標準發展的滯后性導致的。前言現在的前端，javascript的發展有目共睹，框架林立。同時，html也是齊頭并進，推出了HTML5標準，并且得到了普及。這樣的發展卻唯獨少了一個角色？ CSS，就是這個看似不...

高勝山 2019-08-30 13:47 評論0 收藏0
談談PostCSS

摘要：它們有個統一的名字預處理器。面對以上問題，預處理器給出了非常可行的解決方案變量就像其他編程語言一樣，免于多處修改。回到話題中，之所以會出現向預處理器這樣子的解決方案，歸根結底還是標準發展的滯后性導致的。前言現在的前端，javascript的發展有目共睹，框架林立。同時，html也是齊頭并進，推出了HTML5標準，并且得到了普及。這樣的發展卻唯獨少了一個角色？ CSS，就是這個看似不...

leap_frog 2019-08-21 17:05 評論0 收藏0
魔幻語言 JavaScript 系列之 call、bind 以及上下文

摘要：那么，它到底是如何工作的呢讓我們從一種更簡單的實現開始實際上這種實現代碼更短，并且更易讀是函數原型中的一個函數，它調用函數，使用第一個參數作為參數，并傳遞剩余參數作為被調用函數的參數。原文：The Most Clever Line of JavaScript 作者：Seva Zaikov 原文最近一個朋友發給我一段非常有趣的 JavaScript 代碼，是他在某個開源庫中...

cuieney 2019-08-21 17:32 評論0 收藏0
談談JavaScript中嚴格模式你應該遵守的那些事

嚴格模式首先來了解一下嚴格模式是什么？嚴格模式是JavaScript中的一種限制性更強的變種方式，不是一個子集：它在語義上與正常代碼有明顯的差異，不支持嚴格模式的瀏覽器與支持嚴格模式的瀏覽器行為上也不一樣，所以不要在未經嚴格模式特性測試情況下使用嚴格模式，嚴格模式可以與非嚴格模式共存，所以腳本可以逐漸的選擇性加入嚴格模式嚴格模式的目的首先，嚴格模式會將JavaScript陷阱直接變成明顯的錯...

MingjunYang 2019-08-23 11:29 評論0 收藏0