前言
随着 React hooks 的遍及以及 Vue3 等各类函数式组件风靡前端圈子后，咱们的开发逐渐开端向更轻量级的形式转型，在这个进程中，函数式编程又再一次被拉回了前端工程师的视界，比方咱们会运用 compose 让咱们写的 HOC 更像 Decorator：
// with compose
compose(W 2 x {
withRouter,
LoadingHOC,
React.memo
)(+ b 0 k u 9 } ~FuncComponent)
// without compose
withRouter(LoadingHOC(React.memo(FuncComponent)))
也或许咱们会写更多的纯函数让咱们的逻辑 V , P Y 4 G 能够得到更抽T 2 t D L象地复用，咱们会搬出许多或许四五年前咱们就在研究的各种骚操作来赋Z 4 } I予今日咱们所写的逻辑一些新的变幻。但这些咱们曾了解的，在咱们习气了面向目标后，如今却又感到些许陌生了。当然，今日咱们的主题天然不是函数式编程。
搬了这么多年的前端砖，你必0 o * c Z定知道变量声明提高、JS 函数Q . H d作用域链吧，那今日要说的便是那些你从前以为很了解的 JSN O B = o U h P ) 函数和它的作用域链，却在如今给你抛出许多让A a % U你困惑的异常呈现的那些事。咱们先看一个最典型事例，我在编写一个再普通不过、平平无奇的 React hooks 函数式组件时遇到了这样的一个问题，先给咱们看一段 demo 代码：
function s ) ^n Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
setTimeout(() => {
console.log(`You clicked ${count} time - Os`);
}, 3000);
});
return (
<div>
<p>You clicked {c# l / e E %oy # D t i 1 #unt} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div] % I 0>
);
}
组件在 useEffect 中会履行一段异步回调，异步1 [ : ? G l W V使命在事务开发中是再平常p ` 9 2 + 不过的场景了，但现在发生了一件和咱们代码习气相悖的一件作业，比方我接连点击五次按钮，你觉得控制台的输出成果C G J t O p c T会是什么呢？这儿我也就不卖关子啦，写习气面向目标的咱们，或许下意识的想到最后输出的必定是 5 个 5，由于异步使命是被压入异步行列里了，可是) T d v + n R , 4组件的烘托又是同步进行的，天然最后取到的成果就应该和页面烘托呈现是一致的。可是最X h y ~ s q i 8后的输出却# Z – [ h 3 u和咱们的一向的主意并不太一致，成果告知咱们，React 似乎保存了异步函数声明时的状况，又或许说，有一份快照被存储u X = 9了下来。
我找了许多文章，其间也包含 Dan 的博客 《useEffect 完好攻H ^ # * g 0 ) 4略》等等（咱们能够在在文末的参阅文章里看见），大多数文章都抛出了一些有用的处理方案，同时也给出了更多奇怪的场景让我愈加迷惑（我本来是想处理问题的），但最让我纠` ] % v结的是，他们却没有解说发生这样的问题的原因，或许说，这一切仅仅源于y P j : c / n j结构的规划，或许# y `抛出一个很冗统而又让人司空见惯的概念——闭包~ Z D [ U / c K。作为寻求极N 3 | { +致的 ByteDancer，强迫症不容许我就这样放任不管了，因而{ G ) ` 8我决定，从头拿出那本封印多年的小红书，再回去深扒一下 JS 的函数，到底是个什么样的完结机制。
所以回到一4 9 H C k O开端的问题，那又是为什么会发生这样的现象呢？故事还得从一个叫 VO 的兄弟说起。
你在学变量声明时，可曾听过的的 VO 和 AO？
作为前端工程师，咱们对 JS 声明提高必定再了解不过了，比方下面这样一段代码：
function test(x) {
var b = 20; // local varik k u Qable of the function context
}
test(30)
alert(a) // undefined
alert(b) // "b" is not defined
alert(c) // "c" is not defined
var a = 10 // variable of the global context
c = 40
"b" is nZ [ 9 , i 7 o = `ot defined 应该很好了解，那这儿就会抛出一个问题了，已然声明会提早，为什么 c 会是 is not defined，咱们必定会说“由于 c 没有 var 所以没有声明”也有道理，这儿我也就不借题发挥了，直接切入正题。
由于变量会与履行上下文相关，所以解说引擎需求知道其数据存储在何处以及怎么获取它们，人们为了更好的描述这一机制，变P – & % k |给他起了个名字叫 Variable object，即变量（办理）目标。 ——《ECMA-262-3 in detail. Chapter 2. Variable object.》
所以，能够把一个 JS 脚本能够完好跑起来的进程分为两个阶段，分别是声明阶段现U + G ) B 4 0 u已履行阶段。声明阶段担任收集变量构建 VO 以及 VO 之间的引证指向，履行阶段担任给 VO 带入履行上下文生成 AO，给 VO 上声明的变量进行赋值或许其他改变流程。
由于咱们都知道，JS 函数履行都会生成一个独立的作用域，因而，每次只9 P 2 W [ P x L f需有函数声明，都会生& 2 R 9 g成一份新的 VO 用来存储G ) ? 4 F ` T作用域内的变量。所以c F ! 4 n ! : _ V刚刚咱们写的那段 JS 代码，在解说引擎进入声( 0 D 9 = I c * j明阶h [ + + k I I y H段后，得到的 VO 便是如下面的代码所示：
// Variable objectD { e of the global context
VO(globalContext) = {
a: undefined,
test: <reference to FunctionDeclaration 'test'>
};
// Variable object of the "test" function cont1 3 { N B 2 { | Pext
VO(test funcW + o 1 (tionContext) = {
x: undefined,
b: undefined
};
天然，解说引擎在声明阶段解析到 c! o ` + ? = 40，会以为这是一个赋值句子，因而不会被( T f Q挂在 VO 上，当履行到 alert(c) 时，解析引* ; ~ D擎在 VO(globalContexi W J D p $ A [ Kt) 上找不到变量 c 的定义，天然就抛出了Y D ! D v [ f g "c" is not defined 的 Error，当履行到 c = 40 这段代码的时候，VO 被句子履行复写了，这时候全体的 VO 便是变成下面! # x这样了：
// Variable oF 4 i 4 _ Gbject oZ ] 2f tm l ; 8 | |he global context
VO[ t q p g(globaf 3 ] 8 r p N h lContext) = {
a: 10,
c: 40,
test: <reference to FunctionDeclaration 'test'>
};
//l x ) Variable object of the "test" function context
VO(test functionContext) = {
x: 30,
b: 20
};
这样你就能够了解了吧，为什么 JS 的声明会被提早，为什么函数的声明会覆盖变量的声明，为什么有些时候会抛出 XXX is not defined，其实本质便是他们被挂载到 VO 上的既定次序不同，或许说他们在履行时是否现已被挂在 VO 上的差异罢了。
Lexical environm, ; o 7 D Rents (词法~ H $ 2 C A (环境)与 Call-Stack (调用仓R 2 5 g k j _ [ S库)
刚刚讲完了 VO 和 AO，ES5 标准为了让其间的概念愈加明晰而又通俗易懂（其实我自己从传闻 VO 到彻底了解也差不多花了快小半年时间了），又引入了词法] 4 ` z r F | , `环境（Lexical environmeg k D g b z + pnts）这样一个概念，别看这个词特别巨大上，其实他要处理3 @ g M w t & w的便是咱们平常了解的，子级作用域能够拿到父级作用域的变量这一个问题。
为了用咱们最了解的 JS 语法结构来阐明这一机制，咱们来举一个比较简单的比如：
var x = 10;
function foo() {
var y = 20;
}
比G v I L S方这样一段代码，咱们都1 x 知道，function foo 会由于是函数所以会构成独立的作用域，并且，他也能够获取到他的父级上下文里的变量J m X 8 4，3 N B a M I ; b t因而1 B ; V a被转译成词法环境后得到的成果就如下面这样：Z u @ v # f
// environment of the global context
globalEnvironment = {
environment$ | 4 ] B k j f IRecord: {
// built-ins:
Object: functig V 5 Ion,
Array: function,
// etc ...
// our bindings:
x: 10
},
outer: null // no parent environment
};
// environment of the "foo" function
fooEnvironment = {
environmentRecord: {
y: 20
},
outer: globalEnvironment
};
这儿咱们能够看到，在每个 Environment 里都有一个 outeM * s k D I 4r 字段来符号当时作用域的父级上下文，因而，在当时上下文内找不到的变量，解说引擎就会顺着 outer 字段不断递归向上找寻，直到找到这一变量为止m H 2 f 8 [ B {。因而，咱们能够知道，一P @ ( K / C B 3个函数在声明时，它能够获取到的变量，就现已被确认了。
现在，咱们现已知道了函数要从哪里获取自己的变量，并且在此之前你应该了解过，当函数履行时，它会被压入 JS 的调用仓库中，而这 ( m样的仓库结构，正好能够用来存储函数履行时具体变量的值。
Call-! * y t S N : & tStack 存在的意义：每逢一个函数被履行时，它的履行记载（包含它的形参和局部变量）都会被压入到调用仓库中。因而，假如函数调用另一个函数（或递归地调用自身），则会将另一个仓库推入当时函数的仓] 2 h M t J 5库中。函数上下文履行结束后，解说引擎便会将履行记载从仓库中删除（出栈） ——《ECMA-n D T262-5 in detail. Chapter 3.1. Lexical environments: Common Theory.》
这儿举一个代码示例来为咱们解说这样 Call-Stack 函数出栈入栈的进程m D J g ( N l ; R：
var bar =} @ = $ (function foo() {
var x = 10;
var y = 20;
return function bar() {
return x + y;
};
})();
bar(); // 30
这是咱们平常或许经常都会M : _书写的一类闭包，它真正在 Call-Stack 中的存在进程如下图所示：
- 首要，进入– c m ^ n L h IIFE，函数 foo 声明，根据之前咱们所知道的 ES N b * w . , nvironmenV b , U ! & o t 生成方法，它知道内部有两个局部变U n %量 x 和 y，还有一个 function bar，函数有独立的作用域需求独自生成一个 Enviro; G D R X z Vnment，bar 函数里运用了 x 和 y 两个变量，能够经过 Environment 的 outerK o F 属性在 foo 的 EnvironmenU 3 d d : P ` Ot 中找到
- 接着，0 k i函数 foo 被履行并被压入 Call-$ ] h T : C b w :Stack，经过在履行进程中给 EnvironmeO / . M l ^nt 赋值生成了一份 EnvironmX f ; e {entRecord 写入内存，构成~ 7 C S R L ! 4一个静态引证，这个引证包含了当时函数的 Environment 在内存中的信息，作为一份“快照”被保留了下来，函数履行后的 return 的 bar，指向了当时这份引证
- bar 被履行，找到了 foo 的 EnvironmentRecord 并读取到了所需的变量 x 和 y 的值，完结 return
这便是咱们平常书写的函数在 Call-Stack 中的存在进程。并且咱j L H g们# u G V k n : A在图中也不难发现，这儿的大局 baX B F yr 函数对内存中的 EnvironmentRecord 的引证一向存在，假如没有断开这段引证，解说引擎无法知道何时会再调用 bar 函数，何时还会需求用到 E| T 2 9 s FnvironmentRecord 里边的变量，因而 EnvironmentRecord 在内存中就永远不会被 GC 收回，内存也不会被释放，这便是内存走漏，这对于在 node 或许服务端运行环境中，是丧命的。当然处理方法也很简单，只需求一行代码：
bar =5 1 ^ E w ! Z 7 _ null
咱们及时告知 GC 来收回引证就不会导致上面的问题了。
这儿留下一个K 5 2 3 q给咱们考虑的问题，再举另w = |一个咱们在事务编码中比较常见的比如，你能R ! 7 0 8 9 M ? |够亲手测验一下经过自己的了解验证上面咱们的定论：
function createIncrement(i) {
let value =y ( 9 6 0;
function increment() {
value += i;
console.log(value);
const message = `Current vv d T q Kalue is ${value}`;
return function lR M T D [ A C JogValue() {
console.log(messai Z Y 2 + Z Cge);
};
}
return increment;
}
const inc = createInu 9 - h ^ P 6 mcrement(1);
const log = inc(); // 打印 1
inc(); // 打印 2
inc(); // 打印 3
log(); // 打印 "Current value is 1"
你能够依照刚刚咱们的思路，梳理出这个函数履行流程在 Call-Stack 中的存在进程吗？假如你做到了，我相信你也能很轻松的了解为什么会是这样的输出了。
再回头解说 Hooks 中那些过时的变量
咱们回到一开端咱们就( – ! ! % E E抛出的那个函数组件} ~ q 1 | F：
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
setTimeout(() => {
console.log(`You clicked ${co* ` D 8 g F Iunt} times`);
},i E 9 v u , H 3000);
});
return (
<div>
<p>You clicked {count} timy ^ s S V Oes</p>
<button onClick={() =>4 s _ setCount(count + 1)}>
Click me
</button>
</div>
);
}
咱们依照刚刚的定J s 1 L 0 g论从头梳理一下五次点击后的 Environment 生成和 Call-Stack 收支栈进2 ) 5 程。
- 首要初次点击，触发
setCount，state更新，组件从头烘托，函数式组件则被从头履行 - Counter 函数履行：函数被压入 Call-Stack，EnvironmentRecord 被确认构成引证，
count为setCount传入的值，setTimeo& T y x b ut回调被声明，发现其间引证了 Counter 的count局部变量，指向 Counter 的 EnvironmentRecord 引证，setTimeout回调被压入异步行列，等待触发 - 再次点击，
state被更新，Counter 从头履行，生成了新的 EnvironmentRecord，也生成了新的setTimeout回调，此刻的回调指向的是当时的 EnvironmentRecord，并被压入异步行列等待触发 - 第一个 setTimeout 的回调被触发，找到对应的 EnvironmentRecord 引证，拿到 EnvironmentR. f ~ vecord 内的
couc ` h x I m M 5nt值，履行consol ! h 4 A {e.log
这样一来，是不是就能完好解说咱们一开端遇到的奇怪现象了吧。不仅如此，《useEffect 完好攻略》这篇文章里说到许多现象，B e h A 7 U R都能完好解说N U 7 x 了。
随着咱们编写的函数式组件的数量快速增加，咱们或许经意间或许不经意间都会写下了很多的闭包，因而在这进程中，当咱们了解了 JS 函数的“快照”特性后，咱们天然就会愈加当心这些或许会“过时”的变量们，或许说，当咱们发现履行的回来成果不符X ! : ^合预期时，N ^ : =咱们也能合理地解说为什么会发生这样的作用，怎么去躲避他们。
结语
经过这样完好的梳理，其实不单单处理了咱们一开端发生的问题——为什么这些函数会u r e / Y p存在“过时”的状况或许变量，咱们还了解了 JS 变量提高的完结机制，为什么能够经过作用域链找到上层的变量r 6 y k D，为什么会发生内存走漏，遇到这些问题的处理办法又是什么。
所以这一切并不是 React hooks 或许是一些新式的函数式编程结构引l r 8 k v g D V W入的新特性，其实这一切一向都是 JS 这门言语发生以来就有的语法特性罢了，仅仅在之前，咱& O g们由于闭包不稳定、存在性能问题等等，没有去很多运用它们，并且，在前几年的 JS 开展历程中，咱们也一向在追逐着面向目标编程，自身目标的引证指针机制，之所以他们不会 # ( 1 6 J 1 ?“过时”，正是由于他们永远仅仅引证，他们仅仅代表一个指向，这就更符合传统编程的思想和咱们编码一向的思想定势，这类函数式组件的呈现，我了解，仅仅把咱们过去不了解的那部分内容，从头搬回咱们的视界了。可是咱们之所以需求去适应这样一个转变的进程，其实仅仅一个返璞归真的进程，让咱们从头去看见 JS 这门Y V ;言语自身的特性。
这篇文章或许无法给你的技术能力带来一些什么质的` [ o p V L ^ + c提高和飞跃，可是我, j M q E ( o y 0想，在函数式组件日益蓬勃_ B n b x { * ]的今日，将会有越来越多: 1 u U H U X [ =的开发者参与进来，在编写这些函数式组件时，假如遇到了无法参透的瓶颈，或许这篇文章能给你一个解惑的方向，由于这篇文章，也仅仅~ % [ N | 1 j B :记载了我从在事务开发中遇到问题并不断测验解惑的进程罢了。
所以没有什么神乎其技的结构规划，这也不是你学不动的新型规划形式，这些没准都是 JS 这门言语在规划之初就留下的 feature 罢了！一切都源于那{ R c t W 6 B .个夸姣的开端——函数发y r ^ 6 s d Y生独立作用9 : s域。
所以，看完这篇文章今后，你觉得自己还认G 4 X识 JS 函数嘛？
参阅文章
文中部分内容及事例摘选自下面几篇文章，主张咱们在读完本篇后o v :一起食用：
useEfa d e a 6 }fect 完好攻略
运用 JS 及 React Hook 时需求留意过时闭包的坑(文中有处理方法)
你还要H a ?我怎样的JS系列（3） — VO
ECMA-262-3 in detail. Chapter 2. Variable object.
ECc % H e : ?MA-262-5 in detail. ChapY v L y Iter 3.2. Lexical environments: ECMAScript1 B { implementation.
ECMA-262 5 ] + V M l S2-5 in detaL r Y @ nil. Chapter 3.1. Lexical envirf f # h H { q a –onments: Common Theory.
硬广
咱们团队招人啦! f k 6 7 W E c J！！！欢迎参加字节跳H 3 0动商业变现前端团队，咱们在做的技术建造有：前端e & t B Q & 2工程化系统升级、团队 Node 基建搭建、前端一键式 CI 发布东西、组件服务化支撑、前端国际化通用处理方案、重依靠事务系统微前端改造、可视化页面搭建系统、商业智能 BI 系统、前端自动化测试等等等等，具有近百号人的北上杭大前端团队，必定会有你感兴趣的& X p – 0 a ! U O领域X O )，假如你想要参加咱们，欢迎点击我的内推通道：
✨✨✨✨✨
内推传送门(黄金招聘季，点击获取字节跳动内推时机！)
校招专属进口(字节跳动校招内推码: HTZYCHN，投递链接: 参加字节跳动-招聘)
✨✨✨✨✨
假如你想了解咱们部分的日常生(du)活(b)以及作业环(f)境(Y r 4 a 6l)，也能够点击这儿了解噢～
