JavaScript:Scope(域)的基本指南
Scope決定了程式碼中變數,函式和物件的可見性。在這裡瞭解所有細節。
Scope是JavaScript和程式設計的一個重要方面。Scope限制了整個程式碼中變數,函式和物件的可見性以及可用性。
這帶來了很多好處,其中包括:
安全 - 變數只能在需要的地方訪問。
減少變數名空間衝突 - 當兩個或更多變數共享一個通用名稱時,會發生變數名衝突。變數範圍有助於減少阻止這種情況發生。
在最基本的層面上,JavaScript有兩種型別的範圍:
Global Scope(全域性作用域)
Local Scope(區域性作用域)
全域性作用域
當你開始用JavaScript編寫程式碼時,你就已經在全域性範圍內。任何在全域性範圍內編寫的東西都可以在JavaScript程式碼中的任何地方訪問
var cat = 'Jerry';
function localScopeExample(){ // LOCAL SCOPE console.log(cat); // Jerry}
// GLOBAL SCOPEconsole.log(cat); // Jerry
區域性作用域
區域性作用域稍微複雜一點。區域性作用域變數只能在區域性作用域(它們被定義的地方)中可見和可訪問。您可以將區域性作用域視為您在全域性範圍內建立的任何新範圍。
一個簡單的例子就是在使用函式時。用JavaScript編寫的每個函式都會建立一個新的區域性作用域。這些區域性作用域的變數只能在它們定義的函式中訪問。
我們來看一個例子。我們將建立一個函式並在該函式中宣告變數cat。貓可以訪問並且可以在該功能的任何地方使用。但是,在函式之外呼叫cat將導致Uncaught ReferenceError:
function localScopeExample(){ // LOCAL SCOPE var cat = 'Jerry'; console.log(cat); // Jerry}
// GLOBAL SCOPEconsole.log(cat); // Uncaught ReferenceError: cat is not defined
由於區域性變數只能在其函式中訪問,因此可以在不同的函式中使用相同的變數名稱:
function func1(){ var cat = 'Jerry'; console.log(cat); // Jerry}
function func2(){ var cat = 'Tom'; console.log(cat); // Tom}
詞法作用域
學習詞法作用域也很重要。詞法作用域(也稱為靜態作用域)是內部函式訪問外部函式範圍的能力。
我們來看一個例子。在下面的程式碼中,我們定義了兩個函式 - func1
在全域性範圍內,func2
在func1
範圍內宣告。由於詞彙範圍的限制,您可以在範圍2中訪問全域性作用域和範圍1中的所有內容:
// GLOBAL SCOPEvar dog = 'Lewis';
function func1(){ // SCOPE 1 var cat = 'Jerry';
var func2 = function(){ // SCOPE 2 console.log(cat); // Jerry console.log(dog); // Lewis } }
塊級作用域
使用var
時,變數既可以是全域性作用域,也可以區域性作用於定義它的函式。塊級作用域如if
,for
,while
,{}
對var
沒有影響。
let
& const
,另一方面,它們被限定在它們所定義的區塊內。我們來看一個例子:
let x = 1;
{ let x = 2; console.log(x); // 2}
console.log(x); // 1
正如你在上面看到的那樣,簡單地使用括號來建立一個程式碼塊將在本地範圍內在該塊內宣告的任何變數。相同的概念適用於其他塊範圍:
let x = 1;
if (x !== 2) { let x = 2; console.log(x); // 2}
console.log(x); // 1
但要小心。如果您不小心重新宣告具有相同塊範圍的相同變數,則會出現錯誤:
{ let x = 1; let x = 2; }
Uncaught SyntaxError: Identifier 'x' has already been declared
關鍵要點:
全域性範圍的持續時間與系統一樣長。
區域性變數在函式啟動時建立,並在函式結束時刪除。
詞法作用域允許內部函式訪問其外部函式的作用域
const
和let
是塊範圍變數。塊範圍不適用於var
。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/3209/viewspace-2801085/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- JavaScript 閉包基本指南JavaScript
- Maven中的dependency的scope作用域詳解Maven
- 擒賊先擒王,簡單談一下JavaScript作用域鏈(Scope Chain)JavaScriptAI
- JavaScript作用域面試題避坑指南JavaScript面試題
- Vue作用域插槽 :slot-scope 例項Vue
- 【譯】學習JavaScript中提升、作用域、閉包的終極指南JavaScript
- Javascript物件的基本知識JavaScript物件
- DevOps生命週期的基本指南dev
- 【譯】JavaScript 原型的深入指南JavaScript原型
- 理解 JavaScript 中的作用域JavaScript
- 談談 JavaScript 的作用域JavaScript
- alter system set ... scope=... 中的scope的含義是什麼?
- javaScript 作用域JavaScript
- JavaScript作用域JavaScript
- Javascript函式的基本知識JavaScript函式
- javascript基本語法JavaScript
- javascript:基本概念JavaScript
- JavaScript 作用域 與 作用域鏈JavaScript
- JavaScript編碼指南JavaScript
- [譯] JavaScript 之 this 指南JavaScript
- JavaScript IndexedDB 完整指南JavaScriptIndex
- 【Spring註解驅動開發】使用@Scope註解設定元件的作用域Spring元件
- 《Spring》(六)---- Bean的scopeSpringBean
- maven中Scope的作用Maven
- 作用域(scope), 定義空間(declaration space) 和 生存期(lifetime)
- (譯)理解javascript中的作用域JavaScript
- JavaScript 變數的作用域鏈JavaScript變數
- JavaScript cookie 跨域JavaScriptCookie跨域
- 硬碟的基本知識與選購指南硬碟
- Sentry 開發者貢獻指南 - 什麼是 Scope, 什麼是 Hub?
- JavaScript權威指南(11)——JavaScript的子集和擴充套件JavaScript套件
- javascript之作用域與作用域鏈JavaScript
- Javascript中使用RegExp的簡略指南JavaScript
- 攻破javascript面試的完美指南【譯】JavaScript面試
- 域內滲透基本技巧
- OSPF多區域基本配置
- JavaScript 日期權威指南JavaScript
- Google JavaScript 風格指南GoJavaScript