這篇文章主要介紹了JavaScript中全局作用域的示例,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站建設(shè)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的觀山湖網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!作用域決定了變量的生命周期和可見性,變量在作用域范圍之外是不可見的。
JavaScript 的作用域包括:模塊作用域,函數(shù)作用域,塊作用域,詞法作用域和全局作用域。
全局作用域在任何函數(shù)、塊或模塊范圍之外定義的變量具有全局作用域。可以在程序的任意位置訪問全局變量。
當(dāng)啟用模塊系統(tǒng)時(shí),創(chuàng)建全局變量會(huì)變得困難,但仍然可以做到這一點(diǎn)??梢栽?HTML 中定義一個(gè)變量,這個(gè)變量需要在函數(shù)之外聲明,這樣就可以創(chuàng)建一個(gè)全局變量:
console.log(GLOBAL_DATA);
當(dāng)沒有模塊系統(tǒng)時(shí),創(chuàng)建全局變量會(huì)容易很多。在任何文件中的函數(shù)外聲明的變量都是全局變量。
全局變量貫穿于程序的整個(gè)生命周期。
另一種創(chuàng)建全局變量的方法是在程序的任意位置使用window
全局對象:
window.GLOBAL_DATA = { value: 1 };
這樣GLOBAL_DATA
變量會(huì)隨處可見。
console.log(GLOBAL_DATA)
不過你也知道這種做法是不好的。
模塊作用域如果不啟用模塊,在所有函數(shù)之外聲明的變量是全局變量。在模塊中,在函數(shù)外部聲明的變量都是隱藏的,除非顯式導(dǎo)出,否則不可用于其他模塊。
導(dǎo)出使函數(shù)或?qū)ο罂捎糜谄渌K。在這個(gè)例子中,我從模塊文件sequence.js
中導(dǎo)出了一個(gè)函數(shù):
// in sequence.js export { sequence, toList, take };
當(dāng)前模塊可以通過導(dǎo)入來使用其他模塊的函數(shù)或?qū)ο蟪伞?/p>
import { sequence, toList, toList } from "./sequence";
在某種程度上,我們可以認(rèn)為模塊是一個(gè)自動(dòng)執(zhí)行的函數(shù),它將 import 的數(shù)據(jù)作為輸入,然后返回 export 的數(shù)據(jù)。
函數(shù)作用域函數(shù)作用域意味著在函數(shù)中定義的參數(shù)和變量在函數(shù)內(nèi)的任何位置都可見,但是在函數(shù)外部不可見。
下面是一個(gè)自動(dòng)執(zhí)行的函數(shù),被稱為IIFE。
(function autoexecute() { let x = 1; })(); console.log(x); //Uncaught ReferenceError: x is not defined
IIFE 的意思是立即調(diào)用函數(shù)表達(dá)式,是一個(gè)在定義后立即運(yùn)行的函數(shù)。
用var
聲明的變量只有函數(shù)作用域。更重要的是,用var
聲明的變量被提升到其作用域的頂部。通過這種方式,可以在聲明之前訪問它們??纯聪旅娴拇a:
function doSomething(){ console.log(x); var x = 1; } doSomething(); //undefined
這種事不會(huì)發(fā)生在let
中。用let
聲明的變量只能在定義后訪問。
function doSomething(){ console.log(x); let x = 1; } doSomething(); //Uncaught ReferenceError: x is not defined
用var
聲明的變量可以在同一作用域下多次重新聲明:
function doSomething(){ var x = 1 var x = 2; console.log(x); } doSomething();
用let
或const
聲明的變量不能在同一作用域內(nèi)重新聲明:
function doSomething(){ let x = 1 let x = 2; } //Uncaught SyntaxError: Identifier 'x' has already been declared
也許我們可以不必關(guān)心這一點(diǎn),因?yàn)?code>var已經(jīng)開始變得過時(shí)了。
塊作用域塊作用域用花括號(hào)定義。它由{
和}
分隔。
用let
和const
聲明的變量可以受到塊作用域的約束,只能在定義它們的塊中訪問。
思考下面這段關(guān)于let
塊范圍的代碼:
let x = 1; { let x = 2; } console.log(x); //1
相反,var
聲明不受塊作用域的約束:
var x = 1; { var x = 2; } console.log(x); //2
另一個(gè)常見問題是在循環(huán)中使用類似setTimeout()
的異步操作。下面的循環(huán)代碼將顯示五次數(shù)字 5。
(function run(){ for(var i=0; i<5; i++){ setTimeout(function logValue(){ console.log(i); //5 }, 100); } })();
帶有let
聲明的for
循環(huán)語句在每次循環(huán)都會(huì)創(chuàng)建一個(gè)新的變量并設(shè)置到塊作用域。下一段循環(huán)代碼將會(huì)顯示0 1 2 3 4 5
。
(function run(){ for(let i=0; i<5; i++){ setTimeout(function log(){ console.log(i); //0 1 2 3 4 }, 100); } })();詞法作用域
詞法作用域是內(nèi)部函數(shù)訪問定義它的外部作用域的能力。
看一下這段代碼:
(function autorun(){ let x = 1; function log(){ console.log(x); }; function run(fn){ let x = 100; fn(); } run(log);//1 })();
log
函數(shù)是一個(gè)閉包。它從父函數(shù)autorun()
引用x
變量,而不是run()
函數(shù)中的x
變量。
閉包函數(shù)可以訪問創(chuàng)建它的作用域,而不是它自己的作用域。
autorun()
的局部函數(shù)作用域是log()
函數(shù)的詞法作用域。
每個(gè)作用域都有一個(gè)指向父作用域的鏈接。當(dāng)使用變量時(shí),JavaScript 會(huì)向下查看作用域鏈,直到它找到所請求的變量或者到達(dá)全局作用域(即作用域鏈的末尾)。
看下面這個(gè)例子:
let x0 = 0; (function autorun1(){ let x1 = 1; (function autorun2(){ let x2 = 2; (function autorun3(){ let x3 = 3; console.log(x0 + " " + x1 + " " + x2 + " " + x3);//0 1 2 3 })(); })(); })();
內(nèi)部函數(shù)autorun3()
可以訪問本地x3
變量。還可以從外部函數(shù)訪問變量x1
和x2
和全局變量x0
。
如果找不到變量,它將在嚴(yán)格模式下返回錯(cuò)誤。
"use strict"; x = 1; console.log(x) //Uncaught ReferenceError: x is not defined
非嚴(yán)格模式也被稱為“草率模式”,它會(huì)草率的創(chuàng)建一個(gè)全局變量。
x = 1; console.log(x); //1總結(jié)
在全局作用域中定義的變量可在程序的任何位置使用。
在模塊中,在函數(shù)外部聲明的變量都是隱藏的,除非被顯式導(dǎo)出,否則不可用于其他模塊。
函數(shù)作用域意味著函數(shù)中定義的參數(shù)和變量在函數(shù)的任意位置都可見
用let
和const
聲明的變量具有塊作用域。var
沒有塊作用域。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享JavaScript中全局作用域的示例內(nèi)容對大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站,關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道,遇到問題就找創(chuàng)新互聯(lián)建站,詳細(xì)的解決方法等著你來學(xué)習(xí)!