javascript中變數以及函數的提升,在我們平時的項目中其實還是挺常用的,尤其是大型項目中,不知不覺就會順手添加一些變數,而有時候自己的不小心就會釀成一些不必要錯誤,趁有時間整理一下自己對於js中變數及函數提升的理解。 首先,看一個題目: 上面的實例對於javascript變數及函數提升的可謂是 ...
javascript中變數以及函數的提升,在我們平時的項目中其實還是挺常用的,尤其是大型項目中,不知不覺就會順手添加一些變數,而有時候自己的不小心就會釀成一些不必要錯誤,趁有時間整理一下自己對於js中變數及函數提升的理解。
首先,看一個題目:
console.log(a); // undefined var a = 1; console.log(a); // 1 console.log(b()); function b(){return 2;} // 2 console.log(c) //報錯 let c = 4; console.log(d()) // 報錯 var d = function(){return 3;} // 報錯 (function(){ var m = n = 1; })() console.log(m) //報錯 console.log(n) // 1
上面的實例對於javascript變數及函數提升的可謂是淋漓盡致...
一、javascript 變數的提升
-函數及變數的聲明都將被提升到函數的最頂部
-變數可以在使用後聲明,也就是變數可以先使用再聲明
敲黑板,劃重點,是變數的聲明,聲明,聲明,當變數或函數已經初始化之後,就不會提升到函數的最頂部。這裡上面的變數a已經初始化了,所以第一個console取不到變數a得值,為undefined;
註意:變數的提升只會提升到當前作用域下
二、javascript函數的提升
而函數b僅僅是先聲明瞭一個函數方法,函數c是函數表達式無法提升,所以在嚴格模式下b=2;d報錯
對於m,n,這裡就涉及到javascript作用域的問題
首先,var m = n = 1的執行順序是什麼?並不是我們大多數人心中所想的連續賦值,javascript的賦值是從右向左的,而是 n=1;var m = n;很好,一目瞭然,在函數作用域內的變數m=n,n是全局變數,最後嚴格模式下輸出結果,n=1,m報錯;
三、關於es6兩個關鍵字——let和const
let 聲明的變數只在 let 命令所在的代碼塊內有效,不存在變數的提升
const 聲明一個只讀的常量,一旦聲明,常量的值就不能改變。一旦聲明必須初始化,否則就會報錯
來個對比很明顯的慄子(完美的體現出let命令只在代碼塊內有效的意思):
{ let test = 2; var web = 'font'; } console.log(test); // 報錯 console.log(web); // font
再次回到上面的題目,c就是報錯的
ES6 明確規定,代碼塊內如果存在 let 或者 const,代碼塊會對這些命令聲明的變數從塊的開始就形成一個封閉作用域。代碼塊內,在聲明變數 PI 之前使用它會報錯。
var PI = "a"; if(true){ console.log(PI); // 報錯,即使函數外面全局聲明瞭PI,但在代碼塊內還是會報錯 const PI = "3.1415926"; }
以上,就是關於javascript中變數提升的理解。