JavaScript中變量提升與函數(shù)提升經(jīng)典實(shí)例分析
本文實(shí)例講述了JavaScript中變量提升與函數(shù)提升。分享給大家供大家參考，具體如下：
從兩個(gè)實(shí)例說起：
eg1：
var i; console.log(i); // 2
eg2：
console.log(i); // undefined var i = 2;
1、提升
變量和函數(shù)聲明從它們在代碼中出現(xiàn)的位置被提升到了最上面。
注意：
只有聲明本身會(huì)被提升，而賦值操作不會(huì)被提升。
變量會(huì)提升到其所在函數(shù)的最上面，而不是整個(gè)程序的最上面。
函數(shù)聲明會(huì)被提升，但函數(shù)表達(dá)式不會(huì)被提升：
func1(); // Uncaught TypeError: func1 is not a function
func2(); // Uncaught ReferenceError: func2 is not defined
var func1 = function func2() { ... };
JavaScript中的ReferenceError和TypeError：
① ReferenceError：引用錯(cuò)誤。JavaScript引擎查詢變量時(shí)，若在作用域里沒有找到該變量，JavaScript引擎就會(huì)拋出一個(gè)ReferenceError。
② TypeError：類型錯(cuò)誤。當(dāng)在作用域中找到了某變量引用，然后讓該變量去做力所不能及的事情時(shí)，如引用它一個(gè)不存在的屬性，或?qū)⒎呛瘮?shù)的變量用作函數(shù)引用，JavaScript引擎就會(huì)拋出一個(gè)TypeError。
2、函數(shù)優(yōu)先
函數(shù)聲明和變量聲明都會(huì)被提升，但是需要注意的是函數(shù)會(huì)先被提升，然后才是變量。
func(); // 1
var func;
function func() {
console.log(1);
}
func = function() {
console.log(2);
}
運(yùn)行結(jié)果：輸出1而不是2
理由：var func;盡管出現(xiàn)在function func()之前，但它是重復(fù)的聲明，會(huì)被忽略，因?yàn)楹瘮?shù)聲明會(huì)被提升到普通變量之前。上述代碼等價(jià)于：
function func() {
console.log(1);
}
func(); // 1
func = function() {
console.log(2);
}
盡管重復(fù)的聲明會(huì)被忽略掉，但出現(xiàn)在后面的函數(shù)聲明還是可以覆蓋前面的：
func(); // 3
function func() {
console.log(1);
}
func = function() {
console.log(2);
}
function func() {
console.log(3);
}
一個(gè)普通塊內(nèi)部的函數(shù)聲明通常會(huì)被提升到其所在作用域的頂部，提升過程不會(huì)被條件判斷所控制：
func(); // 2
var flag = true;
if (flag)
function func() { console.log(1); }
else
function func() { console.log(2); }
注意：盡量避免在塊內(nèi)聲明函數(shù)，在JavaScript未來的版本中上述行為可能會(huì)發(fā)生改變。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
Javascript document.referrer判斷訪客來源網(wǎng)址
用簡單幾行的javascript，就可抓到使用的來源，以及作出一些防范的措施。2009-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)自定義下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
JavaScript接口的實(shí)現(xiàn)三種方式(推薦)
這篇文章主要介紹了JavaScript接口的實(shí)現(xiàn)三種方式，有注釋法，檢查屬性法和鴨式辨行法，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了小程序自定義彈出框效果，支持淡入淡出動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本系列博文主要談一些在 javascript 使用中經(jīng)常會(huì)混淆的高級(jí)應(yīng)用,包括: prototype, closure, scope, this關(guān)鍵字. 對(duì)于一個(gè)需要提高自己javascript水平的程序員,這些都是必須要掌握的.2009-09-09
瀏覽器JavaScript調(diào)試功能無法使用解決方案
這篇文章主要介紹了瀏覽器JavaScript調(diào)試功能無法使用解決方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名效果,文中的示例代碼簡潔易懂,具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
TabBar 紅點(diǎn)提醒,很多小程序都需要這個(gè)功能比如聊天小程序,電商小程序等,這時(shí)候我們需要進(jìn)行自定義 TabBar,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-05-05
動(dòng)態(tài)生成的IFRAME，設(shè)置SRC時(shí)的問題解決分析
動(dòng)態(tài)生成的IFRAME，設(shè)置SRC時(shí)的，不同位置帶來的影響。 以下所說的是在IE7下運(yùn)行的。IE6下也是同樣。 在這個(gè)blog中，直接點(diǎn)擊運(yùn)行代碼，和把下面代碼保存到為網(wǎng)頁在運(yùn)行（以本地文件或域名訪問），效果不一樣。 先看例子：2008-04-04
在本篇文章里小編給大家分享了關(guān)于js中怎么判斷兩個(gè)字符串相等的實(shí)例和代碼，需要的朋友們學(xué)習(xí)參考下。2019-01-01