理解 JavaScript（二）

luxixing 發布于2019-08-19 14:24 / 1442人閱讀

摘要：所以形式參數是本地的，不是外部的或者全局的。這叫做函數聲明，函數聲明會連通命名和函數體一起被提升至作用域頂部。這叫做函數表達式，函數表達式只有命名會被提升，定義的函數體則不會。

Scoping & Hoisting

var a = 1;

function foo() {
    if (!a) {
        var a = 2;
    }
    alert(a);
};

foo();

上面這段代碼在運行時會產生什么結果？

盡管對于有經驗的程序員來說這只是小菜一碟，不過我還是順著初學者常見的思路做一番描述：

創建了全局變量 a，定義其值為 1

創建了函數 foo

在 foo 的函數體內，if 語句將不會執行，因為 !a 會將變量 a 轉變成布爾的假值，也就是 false

跳過條件分支，alert 變量 a，最終的結果應該是輸出 1

嗯，看起來無懈可擊的推理啊，但讓人驚訝的是：答案竟然是 2！為什么？

別著急，我會解釋給你聽。首先我要告訴你這不是什么錯誤，而是 JavaScript 語言解釋器的一個（非官方的）特性，某人（Ben Cherry）把這個特性叫做：Hoisting（目前尚未有標準的翻譯，比較常見的是提升）。

聲明與定義

為了理解 Hoisting，我們先來看一個簡單的情況：

var a = 1;

你是否想過，上面這句代碼在運行的時候到底發生了什么？
你是否知道，就這句代碼而言，“聲明變量 a” 和 “定義變量 a”這兩個說法哪一個才是正確的？

下例叫做 “聲明變量”：

var a;

下例叫做 “定義變量”：

var a = 1;

聲明：是指你聲稱某樣東西的存在，比如一個變量或一個函數；但你沒有說明這樣東西到底是什么，僅僅是告訴解釋器這樣東西存在而已；

定義：是指你指明了某樣東西的具體實現，比如一個變量的值是多少，一個函數的函數體是什么，確切的表達了這樣東西的意義。

總結一下：

var a;            // 這是聲明
a = 1;            // 這是定義（賦值）
var a = 1;        // 合二為一：聲明變量的存在并賦值給它

重點來了：當你以為你只做了一件事情的時候（var a = 1），實際上解釋器把這件事情分解成了兩個步驟，一個是聲明（var a），另一個是定義（a = 1）。

這和 Hoisting 有何關系？

回到最開始的那個令人困惑的例子，我告訴你解釋器是如何分析你的代碼的：

var a;
a = 1;

function foo() {
    var a;        // 關鍵在這里
    if (!a) {
        a = 2;
    }
    alert(a);     // 此時的 a 并非函數體外的那個全局變量
}

如代碼所示，在進入函數體后解釋器聲明了新的變量 a，當時其值為 undefined，于是 if 語句條件判斷結果為真，接著為新的變量 a 賦值為 2。你若不相信可以在函數體外面 alert(a)，然后再執行 foo() 對比一下結果就知道了。

Scoping（作用域）

有人可能會問了：“為什么不是在 if 語句內聲明變量 a？”

因為 JavaScript 沒有塊級作用域（Block Scoping），只有函數作用域（Function Scoping），所以說不是看見一對花括號 {} 就代表產生了新的作用域，和 C 不一樣！

當解析器讀到 if 語句的時候，它發現此處有一個變量聲明和賦值，于是解析器會將其聲明提升至當前作用域的頂部（這是默認行為，并且無法更改），這個行為就叫做 Hoisting。

OK，大家都懂了，你懂了嗎……

懂了不代表就會用了，就拿最開始的例子來說，如果我就是想要 alert(a) 出那個 1 可咋整呢？

創建新的作用域

alert(a) 在執行的時候，會去尋找變量 a 的位置，它從當前作用域開始向上（或者說向外）一直查找到頂層作用域為止，若是找不到就報 undefined。

因為在 alert(a) 的同級作用域里，我們再次聲明了本地變量 a，所以它報 2；所以我們可以把本地變量 a 的聲明向下（或者說向內）移動，這樣 alert(a) 就找不到它了。

記住：JavaScript 只有函數作用域！

var a = 1;

function foo() {
    if (!a) {
        (function() {        // 這是上一篇說到過的 IIFE，它會創建一個新的函數作用域
            var a = 2;       // 并且該作用域在 foo() 的內部，所以 alert 訪問不到
        }());                // 不過這個作用域可以訪問上層作用域哦，這就叫：“閉包”
    };
    alert(a);
};

foo();

你或許在無數的 JavaScript 書籍和文章里讀到過：“請始終保持作用域內所有變量的聲明放置在作用域的頂部”，現在你應該明白為什么有此一說了吧？因為這樣可以避免 Hoisting 特性給你帶來的困擾（我不是很情愿這么說，因為 Hoisting 本身并沒有什么錯），也可以很明確的告訴所有閱讀代碼的人（包括你自己）在當前作用域內有哪些變量可以訪問。但是，變量聲明的提升并非 Hoisting 的全部。在 JavaScript 中，有四種方式可以讓命名進入到作用域中（按優先級）：

語言定義的命名：比如 this 或者 arguments，它們在所有作用域內都有效且優先級最高，所以在任何地方你都不能把變量命名為 this 之類的，這樣是沒有意義的

形式參數：函數定義時聲明的形式參數會作為變量被 hoisting 至該函數的作用域內。所以形式參數是本地的，不是外部的或者全局的。當然你可以在執行函數的時候把外部變量傳進來，但是傳進來之后就是本地的了

函數聲明：函數體內部還可以聲明函數，不過它們也都是本地的了

變量聲明：這個優先級其實還是最低的，不過它們也都是最常用的

另外，還記得之前我們討論過聲明和定義的區別吧？當時我并沒有說為什么要理解這個區別，不過現在是時候了，記住：

Hosting 只提升了命名，沒有提升定義

這一點和我們接下來要講到的東西息息相關，請看：

函數聲明與函數表達式的差別

先看兩個例子：

function test() {
    foo();

    function foo() {
        alert("我是會出現的啦……");
    }
}

test();

function test() {
    foo();

    var foo = function() {
        alert("我不會出現的哦……");
    }
}

test();

同學，在了解了 Scoping & Hoisting 之后，你知道怎么解釋這一切了吧？

在第一個例子里，函數 foo 是一個聲明，既然是聲明就會被提升（我特意包裹了一個外層作用域，因為全局作用域需要你的想象，不是那么直觀，但是道理是一樣的），所以在執行 foo() 之前，作用域就知道函數 foo 的存在了。這叫做函數聲明（Function Declaration），函數聲明會連通命名和函數體一起被提升至作用域頂部。

然而在第二個例子里，被提升的僅僅是變量名 foo，至于它的定義依然停留在原處。因此在執行 foo() 之前，作用域只知道 foo 的命名，不知道它到底是什么，所以執行會報錯（通常會是：undefined is not a function）。這叫做函數表達式（Function Expression），函數表達式只有命名會被提升，定義的函數體則不會。

尾記：Ben Cherry 的原文解釋的更加詳細，只不過是英文而已。我這篇是借花獻佛，主要是更淺顯的解釋給初學者聽，若要看更多的示例，請移步原作，謝謝。

GPU云服務器云服務器 javascript理解如何理解javascript 深入理解javascript 全面理解

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

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

談談javascript語法里一些難點問題（二）

摘要：講作用域鏈首先要從作用域講起，下面是百度百科里對作用域的定義作用域在許多程序設計語言中非常重要。原文出處談談語法里一些難點問題二 3) 作用域鏈相關的問題作用域鏈是javascript語言里非常紅的概念，很多學習和使用javascript語言的程序員都知道作用域鏈是理解javascript里很重要的一些概念的關鍵，這些概念包括this指針，閉包等等，它非常紅的另一個重要原因就...

Enlightenment 2019-08-21 10:27 評論0 收藏0
細說 Javascript 對象篇（二） : 原型對象

摘要：并沒有類繼承模型，而是使用原型對象進行原型式繼承。我們舉例說明原型鏈查找機制當訪問一個對象的屬性時，會從對象本身開始往上遍歷整個原型鏈，直到找到對應屬性為止。原始類型有以下五種型。此外，試圖查找一個不存在屬性時將會遍歷整個原型鏈。 Javascript 并沒有類繼承模型，而是使用原型對象 prototype 進行原型式繼承。盡管人們經常將此看做是 Javascript 的一個缺點，然...

lansheng228 2019-08-19 14:40 評論0 收藏0
JavaScript對象的深入理解（二）

摘要：原型的概念不同于構造函數模式創建對象只能單級即成，得益于原型鏈的概念，原型模式可實現類似其他語言的多級繼承。組合使用構造函數與原型模式單一使用原型對象的問題在于所有屬性皆共享，若不想共享某屬性，則可放入構造函數中。之前提到，構造函數方法創建對象存在著方法不共享的問題，因此引申出了原型模式創建對象原型模式原型模式旨在創建一個模版對象，該對象的所有屬性和方法被其實例所共享。原型的概...

tommego 2019-08-21 17:24 評論0 收藏0
由ES規范學JavaScript(二)：深入理解“連等賦值”問題

摘要：有這樣一個熱門問題其實這個問題很好理解，關鍵要弄清下面兩個知識點引擎對賦值表達式的處理過程賦值運算的右結合性一賦值表達式形如的表達式稱為賦值表達式。賦值表達式是右結合的。有這樣一個熱門問題： var a = {n: 1}; var b = a; a.x = a = {n: 2}; alert(a.x); // --> undefined alert(b.x); // --> {n: ...

JasonZhang 2019-08-19 17:18 評論0 收藏0
JavaScript Bitwise NOT Operator

摘要：心血來潮地跑到做了個，結果當然是慘不忍睹，發現自己對不少的基礎知識的理解是模模糊糊，甚至是錯的。讀到又琢磨了一會兒，才搞明白為啥補碼這么反直覺。二補碼只能腦補，或者用代碼打印腦補的內容。寫了半天，一言以蔽之相當于調用參考鏈接心血來潮地跑到Upworks做了個JavaScript Test，結果當然是慘不忍睹，發現自己對不少JavaScript的基礎知識的理解是模模糊糊，甚至是錯的。 ...

zengdongbao 2019-08-22 11:19 評論0 收藏0