哈嘍大家好，又見面啦，我依舊是那個可愛的蛙人，
今天又周五了啊，劃水人的一天，開心，
話不多說哈，直接摟代碼
var 變數提升機制
我們在全域作用域中或還是在區域作用域中，使用var關鍵字宣告的變數，都會被提升到該作用域的最頂部，這就是我們常說的變數提升，
function person(status) {
if (status) {
var value = "蛙人"
} else {
console.log(value) // undefined
}
console.log(value) // undefined
}
person(false)
上面example中，if代碼塊中的var宣告的變數就被提升到了函式的頂端，有的小伙伴就會疑惑了，if代碼塊里的都沒執行，怎么會提升到頂端了呢？，這是因為javaScript引擎，在代碼預編譯時，javaScript引擎會自動將所有代碼里面的var關鍵字宣告的陳述句都會提升到當前作用域的頂端, 因此上面的代碼就會被決議為下面，
function person(status) {
var value;
if (status) {
value = "蛙人"
} else {
console.log(value) // undefined
}
console.log(value) // undefined
}
person(false)
由于javaScript存在變數提升，這讓很多開發者初學起來這門語言，還得花不少時間研究變數提升，也有時在作業中因為一個變數提升導致出bug，因此Escript6中為我們帶了塊級宣告，那么什么是塊級宣告呢？
- 只在當前函式下宣告的變數有效
- 在代碼塊和{ }括號之內有效
let宣告
let宣告和var宣告用法是一樣，都是定義變數，使用let宣告的變數沒有var那樣的變數提升，let宣告的變數只在當前作用域中有效，我們來把上面的example重寫一下，
function person(status) {
if (status) {
let value = "蛙人"
} else {
console.log(value) // 報錯
}
console.log(value) // 報錯
}
person(false)
let是塊級作用域，所有外面的陳述句塊訪問不到，let是沒有變數提升的，下面我們來演示一下，
console.log(value) // 報錯
let value = "蛙人"
禁止重復宣告
如果在同一個作用域中某個變數已經存在，再次使用let關鍵字宣告的話會報錯，
var value = "蛙人"
let value = "蛙人" // 報錯
// 再來看一下不同作用域的情況
var value = "蛙人" // 全域作用域
if(true) {
let value = "蛙人" // 代碼塊中宣告，毫無影響
}
上面example中，可以完全看到，只有在相同作用域中重復宣告變數才會報錯，
const宣告
ECMAscript6中還提供了const關鍵字宣告，const宣告指的是常量，常量就是一旦定義完就不能修改的值，還有一點需要注意的是，常量定義必須初始化值，如果不初始化值就會報錯，
const value = "蛙人"
const age; // 報錯 常量未初始化
const 與 let
const與let也沒什么大不同，都是塊級作用域，const常量也只會在當前代碼塊內有效，也不能在當前作用域中重復定義相同的變數，也不存在變數提升，
if (true) {
const name = "蛙人"
}
console.log(name) // 報錯 訪問不到內部變數
console.log(value) // 報錯 const宣告的變數也不存在變數提升
const value = "蛙人"
let value = "蛙人"
const value = "蛙人" // 報錯 重復宣告
const宣告物件
雖然const變數不能修改指標，但是可以修改值，比如我們定義一個物件，我們就可以修改物件里的屬性值，但是不可以重寫整個物件，
const person = {
name: "蛙人",
age: 23
}
person.age = 18 // 沒問題
person = {} // 報錯 不能修改物件指標
暫時死區
跟var相比，let和const定義變數不會被提升到作用域頂端，即便是用相對安全的typeof也會出現錯誤，
console.log(typeof value)
let value = "蛙人"
上面example中，console.log(typeof value)會拋出錯誤是因為用let定義并初始化變數陳述句是不會執行的，此時的value還是處于在JavaScript所謂的暫時死區（temporal dead zone）簡稱為TDZ 中，雖然JavaScript沒有明確標準TDZ，但是人們常用它描述let和const定義的變數不會提升，
我們來說一下TDZ作業原理，JavaScript引擎在掃描代碼時發現變數宣告時，如果遇到var就會將它們提升到當前作用域的頂端，如果遇到let或const就會將宣告放到TDZ中，如果訪問TDZ中的變數就會拋出錯誤，只有執行完TDZ中的變數才會將它移出，然后就可以正常方法，這機制只會在當前作用域生效，我們來看下不同作用域案例
console.log(typeof value) // "undefined"
if (true) {
let value = "蛙人"
}
上面說的如果變數是let和const宣告的就會被放到TDZ中，前提是只會針對當前作用域內有效，所以上面代碼中console.log(typeof value)不會拋出錯誤，let宣告只會在當前的陳述句中有效，
覺得寫得不錯的話，請用你們發財的小手點個贊叭！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/257120.html
標籤：其他