講基礎不容易,本文通過 7個demo、6張圖、1.6k文字串講作用域鏈、詞法作用域、閉包、閉包使用案例。 ...
前言
本文承接上篇 夯實基礎上篇-圖解 JavaScript 執行機制,請先閱讀上篇~
講基礎不容易,本文通過 7個demo和6張圖,和大家一起學習溫故作用域鏈和閉包,本文大綱:
- 什麼是作用域鏈
- 什麼是詞法作用域
- 什麼是閉包
- 閉包的實際使用案例
什麼是作用域鏈
正文開始~
請思考下麵 demo 的 name 列印什麼
function test() {
console.log(name)
}
function test1() {
const name = 'test1的name'
test()
}
const name = 'global的name'
test1()
通過執行上下文來分析代碼的執行流程,執行到 test 函數時:
那 test 函數里的 name 是哪個呢?這就涉及到了作用域鏈的定義:變數和函數的查找鏈條就是作用域鏈。它決定了各級上下文中的代碼在訪問變數和函數時的順序:查找變數和函數時,先在當前執行上下文找,當前沒有,到下一個執行上下文找,沒有再到下一個,直到全局執行上下文,都沒有就報錯使用未定義的變數或函數
。
而在每個執行上下文的變數環境中,都包含了一個外部引用 outer,用來指向外部的執行上下文,鏈條結構是當前執行上下文 > 包含當前上下文的上下文1 > 包含上下文1的上下文2 ...
。
而這個 demo 會列印global的name
,原因是 test 執行上下文的 outer 指向全局執行上下文,包括 test1 的 outer 也是指向全局執行上下文:
也許會有同學疑惑,為什麼 test 的 outer 指向全局執行上下文,而不是 test1,這是因為在 JavaScript 執行過程中,其作用域鏈是由詞法作用域決定的。
什麼是詞法作用域
詞法作用域就是作用域是由代碼中函數聲明的位置來決定的,它是靜態的作用域,通過它就能夠預測代碼在執行過程中如何查找標識符,它與函數是怎樣調用的沒有關係。所以剛纔的例子列印的是global的name
。
看個具體例子:
const count = 0
function test() {
const count = 1
function test1() {
const count = 2
function test2() {
const count = 3
}
}
}
其包含關係和作用域鏈:
事實上在 Global Scope 全局作用域(Window)之前,還有一個 Script Scope 腳本作用域,它存放的是當前 Script 內可訪問的 let 變數和 const 變數,而 var 變數存放在 Global 上的就不在 Script Scope,它類似於是腳本範圍內的全局作用域。在下麵的 demo 中再舉例。
什麼是閉包
閉包指的是那些引用了另一個函數作用域中變數的函數,通常是在嵌套函數中實現的。
比如這個例子:
var globalVariable = 1
const scriptVariable = 2
function test() {
let name = 'Jaychou'
return {
getName() {
const count = 1
return name
},
setName(newValue) {
name = newValue
}
}
}
const testFun = test()
console.log(testFun.getName()) // Jaychou
testFun.setName('小明')
console.log(testFun.getName()) // 小明
大家可以根據作用域鏈的知識,思考一下執行到console.log(testFun.getName())
的 getName 裡面的時候作用域鏈是怎樣的~
我們用瀏覽器的開發者工具看一下:
作用域鏈是當前作用域 》test 函數的閉包 》Script 作用域 》Global 作用域
- 為什麼叫 test 函數的閉包?因為當
const testFun = test()
的 test 函數執行完之後,test 的函數執行上下文已經被銷毀了,但它返回的{ getName(){}, setName(){} }
對象被 testFun 引用著,而 getName 和 setName 引用著 test 函數內定義的 name 變數,所以這些被引用的變數依然需要被保存在記憶體中,而這些變數的集合稱為閉包 Closure; - 目前閉包內的 name 變數就只能通過 getName 和 setName 去訪問和設置,而這也是閉包的作用之一:封裝私有變數;
- 剛纔說的 Script Scope 中保存著 scriptVariable 變數,globalVariable 變數是 var 聲明的,所以在 Global Scope(Window)中。
再看1個具體案例理解閉包:
const globalCount = 0
function test() {
const count = 0
return test1
function test1() {
const count1 = 1
return test2
function test2() {
const count2 = 2
console.log('test2', globalCount + count + count1 + count2)
}
}
}
test()()()
執行到 test2 內部的 console.log 那一行時,其作用域鏈是當前作用域 》test1 的閉包 》test 的閉包 》Script Scope 》Global Scope
閉包使用建議:當不需要使用了之後,註意要解除引用著閉包的變數,這樣閉包才會被釋放。比如第1個案例的 testFun 如果不需要用了,就把它釋放 testFun = null。
閉包的實際使用案例
封裝私有變數
就是剛纔的 getName、setName 案例,通過 getName 獲取 name,通過 setName 設置 name
封裝單例
const Single = (function () {
let instance = null
return function () {
if (!instance) {
instance = {
name: 'jaychou',
age: 40
}
}
return instance
}
})()
const obj1 = new Single()
const obj2 = new Single()
console.log(obj1 === obj2) // true
這裡只是舉個例子,具體的 instance 是什麼類型,支持什麼功能要看實際項目。
防抖和節流
防抖:
function debounce(fn, delay) {
let timer = null;
return function () {
let context = this;
let args = arguments;
timer && clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
}
}
節流:
function throttle(fn, interval) {
let last = 0;
return function () {
let now = +new Date()
if (now - last >= interval) {
fn.apply(this, arguments);
last = now;
}
}
}
更完整的防抖和節流的實現可參考 Lodash ,這裡主要是演示閉包的使用
總結
閉包的使用場景很多,功能很強大,可以說在前端項目中經常可見例如 React Hooks 等等,這裡只列舉了幾個很簡單的很實用的應用場景。
總結
本文主要介紹了作用域鏈和閉包,沿著 夯實基礎上篇-圖解 JavaScript 執行機制 來一起看的話應該比較容易理解,若對大家有所幫助,請不吝點贊關註~