言

JavaScript（簡稱JS）作為現(xiàn)代Web開發(fā)的基石，其靈活性和強大功能為前端開發(fā)人員提供了無限可能。理解和掌握JS的作用域機制，包括全局變量、局部變量以及作用域鏈的概念，對于編寫高效、可維護的代碼至關(guān)重要。本文旨在深入剖析這些概念，通過實例講解它們的工作原理，幫助初學(xué)者和有經(jīng)驗的開發(fā)者鞏固知識，提升編程技能。

技術(shù)概述

全局變量與局部變量

• 全局變量：在任何函數(shù)外部聲明的變量，可以在整個程序范圍內(nèi)被訪問。
• 局部變量：在函數(shù)內(nèi)部聲明的變量，僅在該函數(shù)或其閉包中可見。

核心特性與優(yōu)勢

• 隔離性：局部變量有助于代碼模塊化，避免命名沖突。
• 封裝性：作用域規(guī)則保護了變量，防止外部意外修改。

代碼示例

var globalVar='I am global';

function localScope() {
    var localVar='I am local';
    console.log(localVar); // 輸出: I am local
}

localScope();
console.log(globalVar); // 輸出: I am global
console.log(localVar); // 報錯: localVar is not defined

技術(shù)細節(jié)

作用域鏈

作用域鏈是JS引擎在函數(shù)執(zhí)行時創(chuàng)建的一個鏈表，用于確定變量的可訪問性。每個函數(shù)都有自己的作用域鏈，鏈的最前端是當前函數(shù)的局部變量，隨后是包含它的函數(shù)的作用域，直到全局作用域。

原理分析

當JS引擎查找一個變量時，它會從當前作用域開始搜索，如果沒有找到，則沿著作用域鏈向上查找，直到找到變量或者到達全局作用域。

難點解析

• 閉包：閉包允許函數(shù)訪問并修改其外部作用域中的變量，即使該函數(shù)在外部作用域之外被調(diào)用。

代碼示例

function outerFunction() {
    var outerVar='Outer Variable';

    function innerFunction() {
        console.log(outerVar); // 輸出: Outer Variable
    }

    return innerFunction;
}

var innerFunc=outerFunction();
innerFunc();

實戰(zhàn)應(yīng)用

應(yīng)用場景

在構(gòu)建模塊化和可復(fù)用的代碼時，理解作用域機制是至關(guān)重要的。例如，在異步回調(diào)或事件處理程序中正確使用閉包，可以避免“變量泄漏”。

代碼示例

function setupEvent() {
    var counter=0;

    document.getElementById('myButton').addEventListener('click', function() {
        counter++;
        console.log('Clicks:', counter);
    });
}

setupEvent();

優(yōu)化與改進

性能考量

過度依賴全局變量可能導(dǎo)致內(nèi)存泄漏和命名空間污染。使用模塊模式或ES6的let和const關(guān)鍵字可以有效避免這些問題。

代碼示例

(function(module) {
    module.init=function() {
        // 初始化代碼
    };
})(window.MyModule={});

// 或者使用ES6
const myModule=(()=> {
    let privateVar='Private';

    return {
        getPrivate: ()=> privateVar
    };
})();

常見問題

• Q: 什么是變量提升（hoisting）？
• A: JS會自動將所有變量和函數(shù)聲明提升到當前作用域的頂部，但只有聲明會被提升，初始化不會。

總結(jié)與展望

全局變量、局部變量以及作用域鏈是JS編程的基礎(chǔ)概念，深刻理解它們有助于編寫健壯、高效的代碼。隨著ES6及后續(xù)版本的推出，諸如塊級作用域、箭頭函數(shù)等新特性進一步增強了作用域管理的能力，為開發(fā)者提供了更多的工具和可能性。未來，隨著前端工程化的發(fā)展，作用域管理和模塊化的最佳實踐將變得更加重要，助力開發(fā)者構(gòu)建更加復(fù)雜和高性能的應(yīng)用。

希望本文能幫助你建立對JS作用域機制的深入理解，并在實際項目中加以運用，不斷精進你的編程技藝。

帶領(lǐng)學(xué)生學(xué)習(xí)JavaScript，都講到計時事件了。發(fā)現(xiàn)如果不講清楚全局變量，便沒辦法把停止計時事件講清楚。

clearInterval() 方法用于停止 setInterval() 方法執(zhí)行的函數(shù)代碼。

要使用 clearInterval() 方法, 在創(chuàng)建計時方法時你必須使用全局變量-----------菜鳥教程 JavaScript計時事件

便補充一下：

原本全局變量這個東西，在講了函數(shù)后就應(yīng)該介紹一下的，只是一直沒有較好的應(yīng)用場景，一直拖著。正好，借著這個機會，現(xiàn)講現(xiàn)用。

舉例1:

<script>function aa(){ var a=10; alert(a);}function bb(){ alert(a);}</script>

在函數(shù)bb中就無法訪問到a這個變量。

每一個花括號（｛｝）好比我們的一間教室，而這個a好比是老師我，現(xiàn)在老師在這間教室上課，隔壁班的學(xué)生能聽到嗎？

不能！

類比一下，所以這種情況為什么是錯誤的，就能夠理解了。

現(xiàn)在，如果老師我跑出去，跑到廣播室，大聲地宣布：都去到操場，課不上了，請問隔壁班的能聽到嗎？

<script>

var a=10;

functionaa(){

alert(a);

}

functionbb(){

alert(a);

}

</script>

能聽到！

這種情況下，a就是一個全局變量！

這樣比方之后，感覺學(xué)生大部分能理解了。但是出現(xiàn)了惡意抬杠的（感覺還是沒理解透），問我這種情況a的值為什么變了：

<script>

ar a=10;

function aa(){

var a=100;

alert(a);

}

function bb(){

alert(a);

}

</script>

首先，函數(shù)aa里面的var 是多余的，有或者沒有，一個意思。其次，這種情況好比：老師在廣播里通知大家去操場， 回頭又跑到你們班來說，不用去了。你們聽哪一個？是去還是不去？

不去。

同樣的道理，雖然全局變量的初始值是10，但是在函數(shù)里重新賦值為100，這個時候已經(jīng)改變了變量的值。

學(xué)生進一步胡攪蠻纏：

<script>

var a=10;

function aa(){

var b=100;

alert(a);

}

function bb(){

alert(a);

}

</script>

那這種情況呢？

好比老師在廣播通知你們班接下來兩節(jié)課到機房上，然后你們班主任跑到教室通知你們下午的衛(wèi)生要好好打掃，你們聽誰的？

班主任的！這一次異口同聲。

我倒忘了這茬，反問，接下來兩節(jié)課都不是她的，你們也聽她的啊？

兩個變量毫不相干，沒有任何影響嘛。

全局變量就講了這么多，覺得這個比方還算貼切，所以貼了出來……

隨后在計時事件中完善代碼，終于完成了停止功能，按下不表……

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取

作者：yulele
鏈接：https://www.jianshu.com/p/06e8f6a2fb65