基于js的變量提升和函數(shù)提升(詳解)
一、變量提升
在ES6之前,JavaScript沒(méi)有塊級(jí)作用域(一對(duì)花括號(hào){}即為一個(gè)塊級(jí)作用域),只有全局作用域和函數(shù)作用域。變量提升即將變量聲明提升到它所在作用域的最開(kāi)始的部分。
上個(gè)簡(jiǎn)歷的例子如:
console.log(global); // undefined var global = 'global'; console.log(global); // global function fn () { console.log(a); // undefined var a = 'aaa'; console.log(a); // aaa } fn();
之所以會(huì)是以上的打印結(jié)果,是由于js的變量提升,實(shí)際上上面的代碼是按照以下來(lái)執(zhí)行的:
var global; // 變量提升,全局作用域范圍內(nèi),此時(shí)只是聲明,并沒(méi)有賦值 console.log(global); // undefined global = 'global'; // 此時(shí)才賦值 console.log(global); // 打印出global function fn () { var a; // 變量提升,函數(shù)作用域范圍內(nèi) console.log(a); a = 'aaa'; console.log(a); } fn();
二、函數(shù)提升
js中創(chuàng)建函數(shù)有兩種方式:函數(shù)聲明式和函數(shù)字面量式。只有函數(shù)聲明才存在函數(shù)提升!如:
console.log(f1); // function f1() {} console.log(f2); // undefined function f1() {} var f2 = function() {}
只所以會(huì)有以上的打印結(jié)果,是由于js中的函數(shù)提升導(dǎo)致代碼實(shí)際上是按照以下來(lái)執(zhí)行的:
function f1() {} // 函數(shù)提升,整個(gè)代碼塊提升到文件的最開(kāi)始<br>console.log(f1); console.log(f2); var f2 = function() {}
結(jié)語(yǔ):基本上就是這樣,要熟練掌握的話可以多做些練習(xí),test:
console.log(f1()); console.log(f2); function f1() {console.log('aa')} var f2 = function() {}
(function() { console.log(a); a = 'aaa'; var a = 'bbb'; console.log(a); })();
以上這篇基于js的變量提升和函數(shù)提升(詳解)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
原生js實(shí)現(xiàn)打字動(dòng)畫(huà)游戲
本文主要分享了原生js實(shí)現(xiàn)打字動(dòng)畫(huà)游戲的示例代碼。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02JavaScript高級(jí)程序設(shè)計(jì) 讀書(shū)筆記之八 Function類(lèi)及閉包
Function類(lèi)及閉包,學(xué)習(xí)js的朋友可以參考下2012-02-02基于JavaScript構(gòu)建一個(gè)動(dòng)態(tài)博客應(yīng)用
這篇文章主要為大家詳細(xì)介紹了如何基于JavaScript構(gòu)建一個(gè)動(dòng)態(tài)博客應(yīng)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02javascript設(shè)置金額樣式轉(zhuǎn)換保留兩位小數(shù)示例代碼
本文為大家介紹下javascript設(shè)置金額樣式即保留兩位小數(shù),下面有個(gè)不錯(cuò)的教程,需要的朋友可以了解下2013-12-12原生JS與CSS實(shí)現(xiàn)軟件卸載對(duì)話框功能
今天給大家分享一個(gè)特別有意思的軟件卸載對(duì)話框功能,本段代碼是基于js 與css實(shí)現(xiàn)的,感興趣的朋友跟隨小編一起看看吧2019-12-12js手動(dòng)播放圖片實(shí)現(xiàn)圖片輪播效果
這篇文章主要為大家詳細(xì)介紹了js手動(dòng)播放圖片實(shí)現(xiàn)圖片輪播效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09p5.js實(shí)現(xiàn)動(dòng)態(tài)圖形臨摹
這篇文章主要為大家詳細(xì)介紹了p5.js實(shí)現(xiàn)動(dòng)態(tài)圖形臨摹,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10微信小程序授權(quán)登錄解決方案的代碼實(shí)例(含未通過(guò)授權(quán)解決方案)
這篇文章主要介紹了微信小程序授權(quán)登錄解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05