基于js的變量提升和函數(shù)提升(詳解)

更新時(shí)間：2017年09月17日 09:00:11 作者：小K的前端路

下面小編就為大家?guī)硪黄趈s的變量提升和函數(shù)提升(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

一、變量提升

在ES6之前，JavaScript沒有塊級(jí)作用域(一對(duì)花括號(hào){}即為一個(gè)塊級(jí)作用域)，只有全局作用域和函數(shù)作用域。變量提升即將變量聲明提升到它所在作用域的最開始的部分。

上個(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í)際上上面的代碼是按照以下來執(zhí)行的：

var global; // 變量提升，全局作用域范圍內(nèi)，此時(shí)只是聲明，并沒有賦值
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í)際上是按照以下來執(zhí)行的：

function f1() {} // 函數(shù)提升，整個(gè)代碼塊提升到文件的最開始<br>console.log(f1);  
console.log(f2);  
var f2 = function() {}

結(jié)語：基本上就是這樣，要熟練掌握的話可以多做些練習(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簡(jiǎn)單添加元素新節(jié)點(diǎn)的方法示例
這篇文章主要介紹了JS簡(jiǎn)單添加元素新節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)頁面元素節(jié)點(diǎn)的創(chuàng)建、添加、克隆等相關(guān)操作技巧,需要的朋友可以參考下
2018-02-02
JavaScript實(shí)現(xiàn)簡(jiǎn)易輪播圖最全代碼解析(ES5)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易輪播圖最全代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
js對(duì)象之JS入門之Array對(duì)象操作小結(jié)
每天一對(duì)象,今天我們也來new一個(gè)。沒有系統(tǒng)的學(xué)過JS，沒有特別的寫過一個(gè)比較出色的類庫，沒有運(yùn)用過一個(gè)很強(qiáng)的類庫，prototype.js在進(jìn)行著，慢慢的前進(jìn)相信不久的將來就可以應(yīng)用prototype.js來開發(fā)自己的應(yīng)用程序了。
2011-01-01
javascript算法學(xué)習(xí)(直接插入排序)
假設(shè)待排序的記錄存放在數(shù)組R[1..n]中。初始時(shí)，R[1]自成1個(gè)有序區(qū)，無序區(qū)為R[2..n]。從i=2起直至i=n為止，依次將R[i]插入當(dāng)前的有序區(qū)R[1..i-1]中，生成含n個(gè)記錄的有序區(qū)。
2011-04-04
使用async await 封裝 axios的方法
這篇文章主要介紹了使用async await 封裝 axios的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
網(wǎng)站被黑的假象--ARP欺騙之頁面中加入一段js
網(wǎng)站被黑的假象--ARP欺騙之頁面中加入一段js...
2007-05-05
js中計(jì)算兩個(gè)日期間的工作日的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s中計(jì)算兩個(gè)日期間的工作日的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
基于Css3和JQuery實(shí)現(xiàn)打字機(jī)效果
最近做項(xiàng)目，有需求實(shí)現(xiàn)一個(gè)字符逐個(gè)出現(xiàn)，類似于打字機(jī)效果，于是上網(wǎng)搜了相關(guān)資料，接下來，小編就給大家詳細(xì)介紹基于Css3和JQuery實(shí)現(xiàn)打字機(jī)效果，需要的朋友可以參考下
2015-08-08
javascript實(shí)現(xiàn)youku的視頻代碼自適應(yīng)寬度
這篇文章主要介紹了javascript實(shí)現(xiàn)youku的視頻代碼自適應(yīng)寬度的方法的示例，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
2015-05-05
鼠標(biāo)右擊事件代碼(asp.net后臺(tái))
本程序由一個(gè)js文件和aspx文件組成，沒有后臺(tái)CS代碼。
2011-01-01