詳談js的變量提升以及使用方法

更新時(shí)間：2018年10月06日 12:19:57 投稿：laozhang

在本專欄中小編給大家整理了關(guān)于js的變量提升以及使用方法的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們參考下。

介紹

變量提升Hoisting是人們對(duì)JavaScript執(zhí)行上下文工作方式的一種認(rèn)識(shí)，并不是官方給出的改變

從字面上理解，變量提升的意思是變量和函數(shù)的聲明會(huì)在物理層移動(dòng)到作用域的最前面。但是這樣理解并不準(zhǔn)確，效果是相同的，但是實(shí)際的實(shí)現(xiàn)方式是JavaScript的變量和函數(shù)的聲明會(huì)在編譯階段放入內(nèi)存

這意味著使用者在正式聲明一個(gè)函數(shù)或者變量之前就能夠使用它

函數(shù)的提升

在JavaScript中，在聲明一個(gè)函數(shù)前，我們就能夠使用它，大家應(yīng)該都體驗(yàn)過(guò)，像這樣:

test();

 

function test() {

  // do something

}

在正常的使用情況下，應(yīng)該需要先聲明函數(shù)才能調(diào)用，但是這種方法仍然能夠運(yùn)行，這是因?yàn)镴avaScript自動(dòng)將函數(shù)聲明事先存入了內(nèi)存的原因，看起來(lái)就像JavaScript自動(dòng)把函數(shù)聲明提升到了最前面

變量的提升

對(duì)于變量，JavaScript使用類似的方法，但是要注意一點(diǎn)的是，對(duì)于變量的提升，JavaScript只會(huì)將變量聲明提升，但是不會(huì)把初始化提升，如果在變量初始化之前使用，則會(huì)得到undefined

// undefined

console.log(a);

// ReferenceError: b is not defined

console.log(b);

var a = 10;

// undefined

console.log(num);

num = 6;

// 6

console.log(num);

num += 7;

// 13

console.log(num);

var num;

// undefined

console.log(num);

num = 1;

// 1

console.log(num);

var num = 2;

// 2

console.log(num);

這里要注意，JavaScript的變量提升是針對(duì)var的，而let和const不存在變量提升這一特性

// ReferenceError: a is not defined

console.log(a);

let a = 10;

一個(gè)復(fù)雜一點(diǎn)的例子

var a = 100;

function fn() {

  // undefined

  console.log(a);

  var a = 200;

  // 200

  console.log(a);

}

fn();

// 100

console.log(a);

var a;

// 100

console.log(a);

// 300

var a = 300;

console.log(a);

您可能感興趣的文章:

相關(guān)文章

js 延遲加載改變JS的位置加快網(wǎng)頁(yè)加載速度
當(dāng)一個(gè)網(wǎng)站有很多js代碼要加載，js代碼放置的位置在一定程度上將會(huì)影像網(wǎng)頁(yè)的加載速度,為了提高加載速度，本文總結(jié)了一下幾個(gè)注意點(diǎn)
2012-12-12
實(shí)例解析JS布爾對(duì)象的toString()方法和valueOf()方法
這篇文章主要介紹了JS的布爾對(duì)象的toString()方法和valueOf()方法,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
2015-10-10
window.location.href的用法(動(dòng)態(tài)輸出跳轉(zhuǎn))
無(wú)論在靜態(tài)頁(yè)面還是動(dòng)態(tài)輸出頁(yè)面中window.location.href都是不錯(cuò)的用了跳轉(zhuǎn)的實(shí)現(xiàn)方案
2014-08-08
window.parent與window.openner區(qū)別介紹
今天總結(jié)一下js中幾個(gè)對(duì)象的區(qū)別和用法，對(duì)這幾個(gè)概念混淆的朋友可以看看
2012-04-04
一起來(lái)看看js對(duì)象和事件的學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了js對(duì)象和事件學(xué)習(xí)筆記，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
php中and 和 &&出坑指南
在邏輯運(yùn)算符中，提到與和或，我們可能立刻想到的是&&、||，在php中還有and、or.然而and和or中有一個(gè)小小的坑,今天我們就來(lái)探討下php中and 和 &&
2018-07-07
詳解javascript中var與ES6規(guī)范中l(wèi)et、const區(qū)別與用法
es6剛流行那會(huì)，我只知道var即將退出歷史舞臺(tái)，取而代之的是let和const，卻不知道var有什么缺陷，為什么會(huì)被取代。今天在網(wǎng)上看到一段視頻，解答了我的疑惑
2020-01-01
圖解prototype、proto和constructor的三角關(guān)系
在javascript中，prototype、constructor以及__proto__之間有著“著名”的剪不斷理還亂的三角關(guān)系，樓主就著自己對(duì)它們的淺顯認(rèn)識(shí)，來(lái)粗略地理理以備忘，有不對(duì)之處還望斧正。
2016-07-07
好好了解一下Cookie(強(qiáng)烈推薦)
Cookie是由服務(wù)器端生成，發(fā)送給User-Agent,瀏覽器會(huì)將Cookie的key/value保存到某個(gè)目錄下的文本文件內(nèi)，下次請(qǐng)求同一網(wǎng)站時(shí)就發(fā)送該Cookie給服務(wù)器,對(duì)cookie知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
JavaScript編程中布爾對(duì)象的基本使用
這篇文章主要介紹了JavaScript編程中布爾對(duì)象的基本使用,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
2015-10-10