//先從一個面試題提及 console.log(a) if (a) { var a = 1; console.log(a) } function a() { console.log(this); } console.log(a); a()
下面咱們針對這個栗子解析一下面試
咱們知道變量和很熟定義都會提高到做用域最前邊瀏覽器
惟一須要確認的是變量和函數的前後順序函數
咱們預想 函數是用第一公民會不會提高到最前邊呢?測試
//若是是解析完順序是這樣的 function a() { console.log(this); } var a; console.log(a) if (a) { a = 1; console.log(a) } console.log(a); a()
按照咱們預想的解析結果應該是this
// undefined
// undefined
// 報錯spa
理由 函數在上var在下,第一個console時a未賦值,其結果是undefined,if爲false 只剩最後一個console也是undefined 最後a is not a function.3d
不過結果是code
我機智的認爲 預想錯了?blog
//再次測試 var a; function a() { console.log(this); } console.log(a) if (a) { a = 1; console.log(a) } console.log(a); a()
這樣?對比一下結果
人工解析結果 :
一、a()
二、1
三、1
四、a() 報錯作用域
瀏覽器執行結果:
沒毛病!
看到這裏一切完美,不過我仍是從新搜索了一些高質量文章,發現我錯了,雖然執行結果是對的,不過瀏覽器和人工解析仍是不同的,和咱們最開始預想的同樣,函數優先。
既然標題說到了 變量 和 函數,咱們就一塊來講說
//簡單的栗子 function a(){ console.log(a) } console.log(a) var a = 1 a()
首先上邊已經說到咱們預想和認爲的是錯的。
正確解析順序是這樣的
function a(){ console.log(a) } var a; console.log(a) a = 1 a()
可是,這個可是很重要瀏覽器執行結果是:
why?這就要講講我所瞭解到的原理。
function a(){ console.log(a) } var a;//忽略 console.log(a) //打印函數自己 a = 1 a()// a is not a function
完美!
還有呢?是的還有同名變量是怎樣的順序,同名函數是怎樣的順序。
console.log(a) var a = 1 console.log(a) var a = 2 console.log(a) //解析完順序是這樣的 var a; var a; //忽略 console.log(a) // undfined a = 1 console.log(a) //1 a = 2 console.log(a)//2
*同名變量,聲明會被提高,後邊會忽略。
function a(){console.log(1)} console.log(a) function a(){console.log(2)} console.log(a) a() //解析完 function a(){console.log(1)} function a(){console.log(2)} console.log(a) console.log(a) a()
執行結果
我想你已經猜到了,同名函數會被覆蓋。
終於完了!
您的點贊是我繼續下去的動力,謝謝!