深入理解 js 變量提升

venmos 發(fā)布于2019-08-22 16:20 / 1754人閱讀

摘要：我們知道再中的和的申明都存在又變量提升，中的則不存在有變量提升。這造成的結(jié)果，就是所有的變量的聲明語句，都會被提升到代碼的頭部，這就叫做變量提升。深入理解聲明的變量的作用域是塊級的不能重復聲明已存在的變量有暫時死區(qū)，不會被提升。

我們知道再ES5中的var 和 function 的申明都存在又變量提升，ES6中的 let 、 const 則不存在有變量提升。

var變量提升

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

// 等價于

var a ;
console.log(a); // undefined
a = 1;

js中的 function 也可以看作是變量，也存在變量提升

a(); // 1

function a() {
    console.log(1);
}

總之

JavaScript引擎的工作方式是，先解析代碼，獲取所有被聲明的變量，然后再一行一行地運行。這造成的結(jié)果，就是所有的變量的聲明語句，都會被提升到代碼的頭部，這就叫做變量提升（hoisting）。

let深入理解

let 聲明的變量的作用域是塊級的；

let 不能重復聲明已存在的變量；

let 有暫時死區(qū)，不會被提升。

// case1
var liList = document.querySelectorAll("li") // 共5個li
for( var i=0; i
依次點擊會出現(xiàn)5個 5 。如果把var 改為了let 就是分別打印0 ， 1 ， 2， 3， 4 了。
我的理解是：

for(let i = 0; i< 5; i++) 這句話的圓括號之間存在有一個隱藏的作用域
再每次執(zhí)行循環(huán)體的時候都會在循環(huán)體上下文中重新初始化一次


var liList = document.querySelectorAll("li") // 共5個li
for( let i=0; i

下面我們再來仔細刨析一下具體聲明的過程
var變量聲明的創(chuàng)建、初始化和賦值過程
function fn(){
    var a = 0;
    var b = 1;
}

fn();
過程分析：

進入fn，為其創(chuàng)建一個環(huán)境
找出fn中所有聲明的變量，在這個環(huán)境中創(chuàng)建這些變量（a,b）
將這些變量初始化為undefined
開始執(zhí)行代碼
a 賦值 0，b 賦值 1；


這就解釋了為什么在 var x = 1 之前 console.log(x) 會得到 undefined。
function的聲明的創(chuàng)建、初始化、和賦值過程
f2(); // 2

function f2() {
    console.log(2);
}
過程分析：

找到function聲明的變量，在環(huán)境中創(chuàng)建
將這些變量初始化并賦值， function(){ console.log(2) }。
開始執(zhí)行代碼 fn(); //2


let聲明的創(chuàng)建、初始化、賦值
{
  let x = 1
  x = 2
}
過程分析：

找到let變量在環(huán)境中創(chuàng)建，
開始執(zhí)行代碼 ，注意還沒有進行初始化哦
執(zhí)行x = 1; x 初始化為 1
執(zhí)行x = 2; x 進行賦值


我們再來理解一下let 之前不能使用的原因
{
    console.log(a);
    let a  = 1;
}
原因：

console.log(a) 中的 a 指的是下面的 a，
執(zhí)行 log 時 x 還沒「初始化」，所以不能使用(也就是暫時性死區(qū))



總結(jié)
let 的「創(chuàng)建」過程被提升了，但是初始化沒有提升。
var 的「創(chuàng)建」和「初始化」都被提升了。
function 的「創(chuàng)建」「初始化」和「賦值」都被提升了。
最后看 const，其實 const 和 let 只有一個區(qū)別，那就是 const 只有「創(chuàng)建」和「初始化」，沒有「賦值」過程。
所謂暫時死區(qū)，就是不能在初始化之前，使用變量。

參考文獻

云服務器 GPU云服務器 js變量聲明提升深入理解系列深入理解linux 深入理解webrtc

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/94263.html

深入理解 js 聲明提升( 尾部有總結(jié) 和面試題解析 )

摘要：要理解函數(shù)的提升行為，讓我們先解析什么是的提升。也就是說聲明提升了，賦值還留著原地，等待執(zhí)行。聲明被提升，而包括函數(shù)表達式的賦值在內(nèi)的賦值操作并不會提升，而是留在原地等待執(zhí)行。 javaScript自上而下執(zhí)行的順序受到很多新手和部分老手的共識，但是這其實并不完全正確，這涉及到js的編譯過程，這方面我們稍后會聊到，先考慮下面代碼： window.onload = function(){...

curlyCheng 2019-08-21 16:26 評論0 收藏0
深入理解let和var的區(qū)別（暫時性死區(qū)）！！！

摘要：會出現(xiàn)這樣的情況是因為擁有暫時性死區(qū)。規(guī)定暫時性死區(qū)和語句不出現(xiàn)變量提升，主要是為了減少運行時錯誤，防止在變量聲明前就使用這個變量，從而導致意料之外的行為。首先我們應該知道js引擎在讀取js代碼時會進行兩個步驟：第一個步驟是解釋。第二個步驟是執(zhí)行。所謂解釋就是會先通篇掃描所有的Js代碼，然后把所有聲明提升到頂端，第二步是執(zhí)行，執(zhí)行就是操作一類的。我們先來看個簡單的變量提升...

tanglijun 2019-08-23 14:01 評論0 收藏0
深入理解JavaScript（一）：變量提升

摘要：變量提升原理引擎的工作方式是先解析代碼，獲取所有被聲明的變量然后在運行。代碼自上而下執(zhí)行之前，瀏覽器首先會把所有帶關鍵詞的進行提前聲明或者定義，這種預先處理機制稱之為變量提升。變量提升原理：JS引擎的工作方式是先解析代碼，獲取所有被聲明的變量；然后在運行。JS代碼自上而下執(zhí)行之前，瀏覽器首先會把所有帶 VAR/FUNCTION 關鍵詞的進行提前聲明或者定義，這種預先處理機制...

voidking 2019-08-26 10:32 評論0 收藏0
深入理解JavaScript執(zhí)行上下文和執(zhí)行棧

摘要：執(zhí)行上下文和執(zhí)行棧是中關鍵概念之一，是難點之一。理解執(zhí)行上下文和執(zhí)行棧同樣有助于理解其他的概念如提升機制作用域和閉包等。函數(shù)執(zhí)行完成，函數(shù)的執(zhí)行上下文出棧，并且被銷毀。前言如果你是一名 JavaScript 開發(fā)者，或者想要成為一名 JavaScript 開發(fā)者，那么你必須知道 JavaScript 程序內(nèi)部的執(zhí)行機制。執(zhí)行上下文和執(zhí)行棧是JavaScript中關鍵概念之一，是Ja...

silenceboy 2019-08-23 16:00 評論0 收藏0
深入理解JavaScript執(zhí)行上下文和執(zhí)行棧

摘要：執(zhí)行上下文和執(zhí)行棧是中關鍵概念之一，是難點之一。理解執(zhí)行上下文和執(zhí)行棧同樣有助于理解其他的概念如提升機制作用域和閉包等。函數(shù)執(zhí)行完成，函數(shù)的執(zhí)行上下文出棧，并且被銷毀。前言如果你是一名 JavaScript 開發(fā)者，或者想要成為一名 JavaScript 開發(fā)者，那么你必須知道 JavaScript 程序內(nèi)部的執(zhí)行機制。執(zhí)行上下文和執(zhí)行棧是JavaScript中關鍵概念之一，是Ja...

leiyi 2019-08-02 14:34 評論0 收藏0