Javascript 函數和變量提升

王陸寬發布于2019-08-23 14:35 / 516人閱讀

摘要：同名變量和函數，函數會提升到最前邊，變量其次，為什么不那為什么結果不是我們人工執行的呢原因是變量會被忽略，是的是忽略。。。同名變量解析完順序是這樣的忽略同名變量，聲明會被提升，后邊會忽略。

變量提升和函數提升基本上是面試必問題目

//先從一個面試題說起
        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()

按照我們預想的解析結果應該是

// undefined
// undefined
// 報錯

理由函數在上var在下，第一個console時a未賦值，其結果是undefined，if為false 只剩最后一個console也是undefined 最后a is not a function.

不過結果是

我機智的認為預想錯了？

//再次測試
        var a;
        function a() {
            console.log(this);
        }
        console.log(a)
        if (a) {
            a = 1;
            console.log(a)
        }
        console.log(a);

        a()

這樣？對比一下結果
人工解析結果：
1、a()
2、1
3、1
4、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？這就要講講我所了解到的原理。

同名變量和函數，函數會提升到最前邊，變量其次，為什么不那為什么結果不是我們人工執行的undefined呢？原因是變量會被忽略，是的是忽略。。。

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()

執行結果

我想你已經猜到了，同名函數會被覆蓋。

終于完了！

您的點贊是我繼續下去的動力，謝謝！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100823.html

JavaScript 變量聲明提升

摘要：輸出的結果為輸出的結果為提升后輸出的結果為重新定義了變量輸出的結果為如果定義了相同的函數變量聲明，后定義的聲明會覆蓋掉先前的聲明，看如下代碼輸出練習的值是多少的值是多少第二題的解析請看這里參考資料文章文章中文版鏈接文章推薦文章變量提升 JavaScript 變量聲明提升原文鏈接一個小例子先來看個例子： console.log(a); // undefined var a =...

fireflow 2019-08-20 10:39 評論0 收藏0
javascript聲明提升

摘要：但是碰到聲明提升，這種想法就會被打破。聲明一個函數進行相應的操作，會得到函數聲明提升的結果。由此可以發現變量和函數的聲明都會被提升在其他代碼的前面執行。一個普通塊內部的函數聲明通常會被提升到所在的作用域的頂部。的創建初始化和賦值均會被提升。 Javascript聲明提升在分析聲明提升之前，我認為有必要知道的兩點：一、引擎查詢變量的兩種方式引擎查詢變量的方式可以分為LHS和RHS兩...

evin2016 2019-08-23 16:15 評論0 收藏0
【6】JavaScript 函數高級——執行上下文與執行上下文棧、變量提升（圖解+典型實例分析）

摘要：函數和變量相比，會被優先提升。這意味著函數會被提升到更靠前的位置。僅提升聲明，而不提升初始化。 JavaScript 函數高級——執行上下文與執行上下文棧（圖解+典型實例分析）變量提升與函數提升變量聲明提升通過 var 定義（聲明）的變量，在定義語句之前就可以訪問到值：undefined /* 面試題 : 輸出 undefined */ var a = 3 ...

niuxiaowei111 2019-08-23 17:19 評論0 收藏0
ES6 變量作用域與提升：變量的生命周期詳解

摘要：不同的是函數體并不會再被提升至函數作用域頭部，而僅會被提升到塊級作用域頭部避免全局變量在計算機編程中，全局變量指的是在所有作用域中都能訪問的變量。 ES6 變量作用域與提升：變量的生命周期詳解從屬于筆者的現代 JavaScript 開發：語法基礎與實踐技巧系列文章。本文詳細討論了 JavaScript 中作用域、執行上下文、不同作用域下變量提升與函數提升的表現、頂層對象以及如何避免創建...

lmxdawn 2019-08-21 11:55 評論0 收藏0
JavaScript變量提升

摘要：發布自的博客，歡迎大家轉載，但是要注意注明出處。另外，該文章收納在的個人的知識整理倉庫，歡迎投稿介紹變量提升是人們對執行上下文工作方式的一種認識，并不是官方給出的改變從字面上理解，變量提升的意思是變量和函數的聲明會在物理層移動到作用域的最前發布自Kindem的博客，歡迎大家轉載，但是要注意注明出處。另外，該文章收納在Kindem的個人的 IT 知識整理倉庫，歡迎 Star、Fork、...

yzd 2019-08-23 11:59 評論0 收藏0
譯：函數提升與提升面試的相關問題

摘要：函數提升在里有兩種方式創建函數，通過函數聲明和函數表達式。函數聲明用指定的參數來定義函數。提示不要在中進行函數聲明。問題輸出兩個都是用函數聲明的函數，將被提升到的局部作用域頂端。函數本身將作為函數聲明在全局范圍內提升。作者關于提升的話題，總共有兩篇。（后來又有一個討論篇），再次搬過來。水平有限，如果翻譯的不準確請包涵，并去看原文。下面開始：這是我之前的關于提升的文章，標題為《用le...

wuaiqiu 2019-08-21 18:25 評論0 收藏0