feat: 更新执行栈

thinkings/basic-data-structure.md

@@ -6,9 +6,16 @@
 本篇文章的定位是侧重于前端的，通过学习前端中实际场景的数据结构，从而加深大家对数据结构的理解和认识。
 
 ## 线性结构
+数据结构我们可以从逻辑上分为线性结构和非线性结果。线性结构有
+数组，栈，链表等， 非线性结构有树，图等。
 
+需要注意的是，线性和非线性不代表存储结构是线性的还是非线性的，这两者没有任何关系，它只是一种逻辑上的划分。
+比如我们可以用数组去存储二叉树。
 ### 数组
 
+数组是最简单的数据结构了，很多地方都用到它。 比如有一个数据列表等，用它是再合适不过了。
+
+我们来讲几个有趣的例子来加深大家对数组这种数据结构的理解。
 #### React Hooks
 
 Hooks的本质就是一个数组， 伪代码：
@@ -64,6 +71,35 @@ message queue
 
 call stack, view stack
 
+其实浏览器的执行栈就是一个基本的栈结构，从数据结构上说，它就是一个栈。
+这也就解释了，我们用递归的解法和用循环+栈的解法本质上是差不多。
+
+比如如下JS代码：
+
+```js
+function bar() {
+  const a = 1
+  const b = 2;
+  console.log(a, b)
+}
+function foo() {
+  const a = 1;
+  bar();
+}
+
+foo();
+
+
+```
+
+真正执行的时候，内部大概是这样的：
+
+![basic-data-structure-call-stack](../assets/thinkings/basic-data-structure-call-stack.png)
+
+> 我画的图没有画出执行上下文中其他部分（this和scope等）， 这部分是闭包的关键，而我这里不是将闭包的，是为了讲解栈的。
+
+> 社区中有很多“执行上下文中的scope指的是执行栈中父级声明的变量”说法，这是完全错误的， JS是词法作用域，scope指的是函数定义时候的父级，和执行没关系
+
 ### 链表
 
 #### React Fiber