一網(wǎng)打盡 JavaScript 的作用域

wing324 發(fā)布于2019-08-26 13:41 / 1199人閱讀

摘要：全局作用域在任何函數(shù)塊或模塊范圍之外定義的變量具有全局作用域。的局部函數(shù)作用域是函數(shù)的詞法作用域。作用域鏈每個(gè)作用域都有一個(gè)指向父作用域的鏈接。當(dāng)使用變量時(shí)，會向下查看作用域鏈，直到它找到所請求的變量或者到達(dá)全局作用域即作用域鏈的末尾。

一網(wǎng)打盡 JavaScript 的作用域

翻譯：瘋狂的技術(shù)宅
https://medium.freecodecamp.o...??-javascript-cbd957022652

本文首發(fā)微信公眾號：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

作用域決定了變量的生命周期和可見性，變量在作用域范圍之外是不可見的。

JavaScript 的作用域包括：模塊作用域，函數(shù)作用域，塊作用域，詞法作用域和全局作用域。

全局作用域

在任何函數(shù)、塊或模塊范圍之外定義的變量具有全局作用域。可以在程序的任意位置訪問全局變量。

當(dāng)啟用模塊系統(tǒng)時(shí)，創(chuàng)建全局變量會變得困難，但仍然可以做到這一點(diǎn)。可以在 HTML 中定義一個(gè)變量，這個(gè)變量需要在函數(shù)之外聲明，這樣就可以創(chuàng)建一個(gè)全局變量：


console.log(GLOBAL_DATA);

當(dāng)沒有模塊系統(tǒng)時(shí)，創(chuàng)建全局變量會容易很多。在任何文件中的函數(shù)外聲明的變量都是全局變量。

全局變量貫穿于程序的整個(gè)生命周期。

另一種創(chuàng)建全局變量的方法是在程序的任意位置使用 window 全局對象：

window.GLOBAL_DATA = { value: 1 };

這樣 GLOBAL_DATA 變量會隨處可見。

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è)自動執(zhí)行的函數(shù)，它將 import 的數(shù)據(jù)作為輸入，然后返回 export 的數(shù)據(jù)。

函數(shù)作用域

函數(shù)作用域意味著在函數(shù)中定義的參數(shù)和變量在函數(shù)內(nèi)的任何位置都可見，但是在函數(shù)外部不可見。

下面是一個(gè)自動執(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

這種事不會發(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)?var 已經(jīng)開始變得過時(shí)了。

塊作用域

塊作用域用花括號定義。它由 { 和 } 分隔。

用 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)都會創(chuàng)建一個(gè)新的變量并設(shè)置到塊作用域。下一段循環(huán)代碼將會顯示 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 會向下查看作用域鏈，直到它找到所請求的變量或者到達(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)格模式下返回錯誤。

"use strict";
x = 1;
console.log(x)
//Uncaught ReferenceError: x is not defined

非嚴(yán)格模式也被稱為“草率模式”，它會草率的創(chuàng)建一個(gè)全局變量。

x = 1;
console.log(x); //1

總結(jié)

在全局作用域中定義的變量可在程序的任何位置使用。

在模塊中，在函數(shù)外部聲明的變量都是隱藏的，除非被顯式導(dǎo)出，否則不可用于其他模塊。

函數(shù)作用域意味著函數(shù)中定義的參數(shù)和變量在函數(shù)的任意位置都可見

用 let 和 const 聲明的變量具有塊作用域。 var 沒有塊作用域。

本文首發(fā)微信公眾號：jingchengyideng 歡迎掃描二維碼關(guān)注公眾號，每天都給你推送新鮮的前端技術(shù)文章

歡迎繼續(xù)閱讀本專欄其它高贊文章：

12個(gè)令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

世界頂級公司的前端面試都問些什么

CSS Flexbox 可視化手冊

過節(jié)很無聊？還是用 JavaScript 寫一個(gè)腦力小游戲吧！

從設(shè)計(jì)者的角度看 React

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實(shí)現(xiàn)動畫效果

程序員30歲前月薪達(dá)不到30K，該何去何從

7個(gè)開放式的前端面試題

React 教程：快速上手指南

GPU云服務(wù)器云服務(wù)器 javascript作用域鏈 python的作用域 java 的作用域域管理服務(wù)器的作用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/109341.html

發(fā)表評論

登陸后可評論

0條評論

wing324

男|高級講師

我要關(guān)注我要私信

TA的文章

實(shí)現(xiàn)出棧入棧以及獲取棧中最小值，主要是獲取最小值

閱讀 2950·2021-11-24 09:39
2021最新jmeter接口測試入門到精通實(shí)戰(zhàn)講解，手把手教學(xué)

閱讀 2858·2021-09-29 09:34
RUNIDC：香港E3服務(wù)器$30/月起,臺灣E3服務(wù)器$50/月起

閱讀 3549·2021-09-24 10:23
如何計(jì)算網(wǎng)絡(luò)號和主機(jī)號-如何計(jì)算IP地址的網(wǎng)絡(luò)號和主機(jī)號？

閱讀 1731·2021-09-22 15:41
解決移動端一像素問題的Vue指令

閱讀 1690·2019-08-30 15:55
提高開發(fā)效率之VS Code基礎(chǔ)配置篇

閱讀 3506·2019-08-30 13:58
CSS3 transform 詳解

閱讀 2614·2019-08-30 13:11
CSS3新特性學(xué)習(xí)

閱讀 1662·2019-08-29 12:31

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

一網(wǎng)打盡 JavaScript 的作用域

相關(guān)文章

**Spring IOC知識點(diǎn)一網(wǎng)打盡！**

Java面試前需要了解的東西

Vue源碼詳細(xì)解析:transclude,compile,link,依賴,批處理...一網(wǎng)打盡，全解

枯木：天貓雙11項(xiàng)目組織協(xié)同

**Python 進(jìn)階之路 (五) map, filter, reduce, zip 一網(wǎng)打盡**

發(fā)表評論

0條評論

wing324

男|高級講師

TA的文章

實(shí)現(xiàn)出棧入棧以及獲取棧中最小值，主要是獲取最小值

2021最新jmeter接口測試入門到精通實(shí)戰(zhàn)講解，手把手教學(xué)

RUNIDC：香港E3服務(wù)器$30/月起,臺灣E3服務(wù)器$50/月起

如何計(jì)算網(wǎng)絡(luò)號和主機(jī)號-如何計(jì)算IP地址的網(wǎng)絡(luò)號和主機(jī)號？

解決移動端一像素問題的Vue指令

提高開發(fā)效率之VS Code基礎(chǔ)配置篇

CSS3 transform 詳解

CSS3新特性學(xué)習(xí)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

一網(wǎng)打盡 JavaScript 的作用域

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！