发表于
  • 浏览器每次发起请求之前都会先在浏览器缓存中查找该请求的结果以及缓存标识
  • 浏览器每次拿到返回的请求结果都会将该结果缓存和缓存表识存入浏览器缓存中

强制缓存规则的三种场景

  • 没有找到请求的缓存结果以及缓存标识（直接发起http请求）
  • 找到了请求的缓存结果以及缓存标识，但是显示已经失效（携带资源的缓存标识发起http请求—-协商缓存的过程）
  • 找到了请求的缓存结果和缓存标识，并且未失效，直接使用缓存中的结果

强制缓存的规则字段

按优先级 

Cache-Control > Expires

Expires

Expires是HTTP/1.0中控制网页缓存的字段，值为服务器返回的请求结果缓存的到期时间，即再次发起请求时，客户端的时间如果小于Expires的值，就可以直接使用缓存。

缺点：客户端的时间是可以“灵活”改变的，你懂的～（不同时区，或者人为修改系统时间…）

Cache-Control

到了http/1.1，为了修复Expires的不可靠性，引入了Cache-Control的规则，他的值主要有：

  • public: 允许中间代理服务器和客户端缓存
  • private: 只允许客户端缓存不允许中间代理服务缓存（默认值）
  • no-store: 所有内容不允许缓存（强制缓存和协商缓存都不用）
  • no-catch: 客户端缓存内容，但是是否使用缓存需要经过协商缓存来验证
  • max-age=xxx: 缓存会在xxx秒之后失效

memory cache和disk cache

刷新页面的时候我们会看到有些资源是from memory cache 有些则是from disk cache,这两个分别代表的是内存缓存和硬盘缓存。

memory cache
  • 快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取
  • 时效性：一旦该进程关闭，则该进程的内存则会清空。
disk cache
  • 硬盘缓存(from disk cache)：硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢

在浏览器中浏览器会在js和图片等文件解析执行后直接存入内存缓存中，而css文件则会存入硬盘文件中，所以每次刷新页面有些是从内存缓存中读取，而有些则是从硬盘中读取。

协商缓存

协商缓存就是强缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否可以使用缓存的过程。主要有两种情况

  • 协商缓存生效，返回304
  • 协商缓存失效，返回一个新的请求结果以及200状态码

控制协商缓存的头字段

Last-Modified/If-Modified-Since 和 Etag/If-None-Match

  • If-Modified-Since则是客户端再次发起该请求时，携带上次请求返回的Last-Modified值，通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求，发现请求头含有If-Modified-Since字段，则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比，若服务器的资源最后被修改时间大于If-Modified-Since的字段值，则重新返回资源，状态码为200；否则则返回304，代表资源无更新，可继续使用缓存文件.
  • Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)If-None-Match是客户端再次发起该请求时，携带上次请求返回的唯一标识Etag值，通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后，发现该请求头中含有If-None-Match，则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比，一致则返回304，代表资源无更新，继续使用缓存文件；不一致则重新返回资源文件，状态码为200.

Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since，同时存在则只有Etag / If-None-Match生效。

总结

强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存。

发表于

React元素是创建的开销极小的普通对象。ReactDOM会负责更新DOM来与React元素保持一致。

元素描述了你在屏幕上看到的内容

const element = <h1>Hello World</h1>

仅使用React创建的应用通常只有单一的根dom节点。如果你在将react集成进一个已有应用，那么你可以在应用中包含任意多个独立的根dom节点。

React元素是不可变对象。一旦被创建，就无法更改它的子元素或者属性。一个元素就像是电影里的单帧：它代表了某个特定时刻的UI。
根据我们已有的知识，更新UI的唯一方式是创建一个全新的元素，并将其传入ReactDOM.render().

尽管每一秒我们都会新创建一个描述整个ui树的元素，reactDOM只会更新实际改变了的内容。考虑UI在任意给定时刻的状态，而不是随时间变化的过程，能够消灭一整类的bug.(此处是在diss Vue吗)

组件和Props

组件允许你将UI拆分为独立可复用的代码片段，并对每个片段进行独立构思。

组件：类似于函数，接受任意的入参，返回用于描述展示内容的React元素。

建议从组件自身的角度命名props，而不是依赖调用组件的上下文命名。

Props的只读性

组件无论是使用函数声明还是通过class声明，都不能修改自身的props。

在不违反此规则的情况下，state允许react组件随用户的操作、网络响应或者其他变化而动态的更改输出的内容。

State和生命周期

State与porps类似，但是state是私有的，并且完全受控于当前组件。

每次组件更新的时候render方法都会被调用。只要在相同的DOM节点中渲染,就仅有一个Clock组件的class实例被创建使用。

Class组件应该始终使用props参数来调用父类的构造函数。

在具有许多组件的应用程序中，当组件被销毁时释放所占用的资源是非常重要的。

当Clock组件第一次被渲染到DOM中的时候，就为其设置一个计时器，这在React中被称为“挂载”，同时当DOM中Clock组件被删除的时候，应该清除计时器，这在react中被称为‘卸载’。我们可以为class组件声明一些特殊的方法，当组件挂载或卸载时就会去执行这些方法。

这些方法叫做“生命周期方法”，componentDidMount()方法会在组件已经被渲染到DOM中后运行，所以最好在这里设置计时器。

尽管this.props和this.state是react本身设置的，且都拥有特殊的含义，但是我们可以向class中随意添加不参与数据流的额外字段。

比如计时器ID

this.timerID = setInterval(() => this.tick(), 1000);

使用this.setState()来时刻更新组件state:

当clock的输出被插入到DOM后，React就会调用componentDidMount()生命周期方法。

State的更新可能是异步的

this.setState((state, props) => {
    counter: state.counter + this.props.increment
});

这个函数用上一个state作为第一个参数，将此次更新被应用时的porps做为第二个参数。

数据瀑布

受控组件

由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，这使得 React 的 state 成为唯一数据源。由于 handlechange 在每次按键时都会执行并更新 React 的 state，因此显示的值将随着用户输入而更新。

总的来说，这使得input textarea select之类的标签都非常相似，它们都接受一个value属性，可以通过value来实现受控组件。

可以将数组传递到value属性中，以支持在select标签中选择多个选项。

打包📦是一个将文件引入并合并到一个单独文件的过程，最终形成一个’bundle’.接着在页面上引入该bundle，整个应用即可一次性加载。

代码分割

import {add} from './math';

console.log(add(16,26));

// =>

import('./math').then(math => {
    console.log(math.add(16, 26))
});

异常捕获边界

context

const ThemeContext = React.createContex('light');

class App extends React.Component {
    render() {
        return (
            <ThemeContext.Provider value="dard">
                <Toolbar />
            </ThemeContext.Provider>
        )
    }
}

如此中间的组件再也不用指明往下传递theme了。

一种无需context的解决方案，是将Avatar自身传递下去，因而中间组件无需知道user或者avatarSize等props

当react渲染了一个订阅了这个context对象的组件，这个组件会从组件树中离自己最近的那个匹配的Provider中读取到当前的context值。只有当组件树中没有匹配到Provider时，其默认参数才会生效。

Provider 接收一个 value 属性，传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。

当Provider的value值发生变化时，它内部的所有消费者组件都会重新渲染。Provider及其内部的consumer组件都不受控于shouldComponentUpdate函数，因此当consumer组件在其祖先组件退出更新的情况下也能更新。

Class.contextType

挂载在class上的contextType属性会被重新赋值为一个由React.createContext()创建的context对象。

错误边界

部分UI的js错误不应该导致整个应用崩溃，为了解决这个问题react16引入了一个新的概念—-错误边界。

只有class组件才能成为错误边界组件。大多数情况下只需要声明一次错误边界，并在整个应用中使用它。

事件处理器不会在渲染期间触发，因此如果他们跑出异常。

如果你需要在事件处理器内部捕获错误，使用普通的js try / catch 语句。

Refs和DOM

下面几个适合使用refs的情况：

  • 管理焦点、文本选择或媒体播放
  • 触发强制动画
  • 集成第三方dom库

避免使用refs来做任何可以通过声明式实现来完成的事情

🌰：避免在Dialog组件里暴露open和close方法，最好传递isOpen属性

Render Props

是指一种在react组件之间使用一个值为函数的props共享代码的简单技术

高阶组件

hoc是react中用于复用组件逻辑的一种高级技巧。hoc自身不是reactapi的一部分，它是一种基于react的组合特性而形成的设计模式

具体而言，高阶组件是参数为组件，返回值为组件的函数。

组件是将prps转化为ui，而高阶组件是将组件转化为另一个组件

hoc在react的第三方库中很常见，例如redux的connet和Relay的createFragmentContainer.

之前react建议使用mixins用于解决横切关注的问题，但是后来意识到mixins会产生更多麻烦。

hoc不会修改传入的组件，也不会使用继承来复制其行为。相反，hoc将通过将组件包装在容器组件中来组成新的组件。hoc是纯函数，没有副作用。

函数签名

定义了函数或者方法的输入与输出。

签名可以包含以下内容；

  • 参数与参数的类型
  • 一个返回值及其类型
  • 可能会抛出或传回的异常
  • 方法在面向对象程序中的可用性方面的信息（public、static或者prototype）

connect是一个返回高阶组件的高阶函数。

不应该在组件的render方法中对一个组件使用hoc：

重新挂载组件会导致组件及其所有的子组件的状态丢失。

ref实际上并不是一个prop就像key一样，它是由react专门处理的。如果将ref添加到hoc的返回组件中，则ref引用指向容器组件，而不是被包装组件。

React可以被用于任何web应用中，可以被嵌入到其他应用，其他应用也可以被嵌入到react.

React不会理会React自身之外的dom操作。

深入jsx

实际上jsx仅仅只是React.createElement(component, props, …children)函数的语法糖。

js表达式作为props

可以把包裹在{}中的js表达式作为一个props传递给jsx元素。

注意： if 语句以及for循环不是js表达式，所以不能在jsx中直接使用。

props默认值是true,如果你没给props赋值，它的默认值是true.

包含在开始和结束标签之间的jsx表达式内容将作为特定属性props.children传递给外层组件。

React组件可以返回存储在数组中的一组元素：

render() {
    return [
        <li key="A">A</li>
        <li key="B">B</li>
        <li key="C">C</li>
    ]
}

发表于

什么是函数式编程？

数学中的函数
f(x) = y
  • 函数必须总是接受一个参数
  • 函数必须总是返回一个值
  • 函数应该依据接收到的参数而不是外部环境运行
  • 对于一个给定的x,只会输出唯一的一个y
var percentValue = 5;
var calculateTex = (value) => {
    return value/100 * (100 + percentValue )）
}

上面的计税函数不是一个纯函数在于它依赖了全局变量percentValue ，修复方法很简单，只需要移动全局变量percentValue ，把它作为函数的参数改写如下：

var calculateTex = (value, percentValue ) => {
return value/100 * (100 + percentValue )
}

现在calculateTex 可以被称为一个真正的纯函数了。
将函数对全局变量的依赖移到函数的参数中是最常见的一种“纯函数化”的方式，移除函数对全局变量的访问会使得函数的测试更加容易。

引用透明性 （Referential Transparency）

函数对于相同的输入都将返回相同的值，这一属性被称为引用透明性。依据函数的这一属性可以直接用函数的结果替换掉函数的调用，这个过程被称为替换模型，这些特性使得并发代码和缓存称为可能。多线程和同步的问题在于对全局数据的依赖上，而遵循引用透明性的函数只依赖参数的输入而不依赖全局数据，所以线程可以自由的运行且没有锁的机制。
引用透明性是一种分析哲学

函数式编程与命令式编程的对比

命令式编程遍历数组
let array = [1,2,3]
for (let i = 0; i< array.length; i++) {
console.log(array[i])
}
函数式编程
let array = [1,2,3]
array.forEach(item => console.log(item))

在函数式编程中我们移除了“如何做”的部分将他抽象到一个函数中（高阶函数），如此可以让开发者只需要关心手头的问题

纯函数

  • 纯函数不应该依赖任何外部变量，同时也不应该改变任何外部变量。
  • 纯函数应该像Math.max(3,4,5,6)一样，不需要看max的内部实现就能得到结果。
  • 纯函数允许我们并发的执行代码，因为纯函数不会改变它的环境，意味着我们不需要关心同步的问题。
  • 纯函数使缓存函数的输出避免下次重新计算成为可能
  • 纯函数应该被设计成只做一件事（单一职责）就像UNIX哲学那样，我们可以通过组合或者管道来完成复杂的任务

发表于

语法规范

  • 数据模版定义规范 DTD
  • 数据占位符定义规范 DPD

DTD

数据模版中的每个属性由三个部分构成： 属性名、生成规则、属性值：

‘name|rule’: value

// name: 属性名
// rule: 生成规则
// value: 属性值

注意： 属性名和生成规则之间用竖线 ｜ 分隔

  • 生成规则是可以选择的

7种生成规则

  • ‘name|min-max’: value
  • ‘name|count’: value
  • ‘name|min-max.dmin-dmax’: value
  • ‘name|min-max.dcount’: value
  • ‘name|count.dmin-dmax’: value
  • ‘name|count.dcount’: value
  • ‘name|+step’: value

生成规则的含义需要依赖属性值的类型才能确定

属性值中可以含有@占位符
属性值还指定了最终值的初始值和类型

属性值是字符串String

‘name|min-max’: string // 通过重复string生成一个字符串，重复次数大于等于min,小于等于max

‘name|count’: string // 生成一个字符串，重复次数等于count

Number

‘name|+1’: number // 属性值自动加1，初始值为number

‘name|min-max’: number //生成一个大于等于min,小于等于max的整数，属性值number只是用来确定类型

‘name|min-max.dmin-dmax’: number // 生成一个浮点数，整数部分大于等于min、小于等于max,小数部分保留dmin到dmax位

Mock.mock({
    'number1|1-100': 1,
    'number2|123.1-10': 1,
    'number3|123.3': 1,
    'number4|123.10': 1.23
})

// => 

{
  number1: 34,
  number2: 123.3291431,
  number3: 123.132,
  number4: 123.2312349612
}

Boolean

‘name|1’: boolean // 随机生成一个布尔值，值为true的概率是1/2

‘name|min-max’: value // 随机生成一个布尔值，值为value的概率是min/(min + max)

Mock.mock({
    'boolean1|1': true,
    'boolean2|1-3': false
})

// => 


{ boolean1: true, boolean2: true }

Object

‘name|count’: object // 从属性object中随机选取count个属性

‘name|min-max’: object // 从属性值object中随机选取min到max个属性

Mock.mock({
    'obj|5': {
        name: 'xiaoyu',
        age: 20,
        sex: 'man',
        school: 'buaa',
        year: 2020
    }
})

// =>

{
  obj: {
              name: 'xiaoyu', 
              sex: 'man', 
              age: 20, 
              year: 2020, 
              school: 'buaa' 
          }
}

Array

‘name|1’: array // 从属性array中随机选取1个元素，作为最终值

‘name|+1’: array // 从属性array中顺序选取1个元素，作为最终值

‘name|min-max’: array // 通过重复属性值array生成一个新数组，重复次数大于等于min，小于等于max

‘name|count’: array // 通过重复属性值array生成一个新数组，重复次数为count

DPD

占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中

占位符的格式为：

@占位符
@占位符（参数 [,参数]）

发表于 
["red", "blue", "green"].forEach(v => {
const btn = document.getElementById(`${v}-theme-btn`);
    btn.addEventListener("click", () => document.body.style.setProperty("--bg-color", v));
});

使用css变量的好处

  • 减少样式代码的重复性
  • 增加样式代码的扩展性
  • 提高样式代码的灵活性
  • 增多一种css与js的通讯方式
  • 不用深层次遍历dom改变某个样式

未完待续…

发表于

Sort

想要吗？想要你说啊，你不说我怎么知道你想要

“为了按照某个方式进行排序，必须给sort方法传递一个比较函数，该函数决定了它的两个参数在排好序的数组中的先后顺序。假设第一个参数应该在前，比较函数应该返回一个小于0的数值，假如第一个参数应该在后，函数应该返回一个大于0的数值，如果两个数值相等，那么他们的顺序无关紧要，此时函数应该返回0。”

这是js权威指南中对数组sort方法的描述，红包书中的描述与此类似，并给出了函数的例子：

function compare(value1, value2) {
    if (value 1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}

只要将compare函数作为参数传递给sort方法即可，如下所示：

var values = [0,1,5,10,15];

values.sort(compare); // 0,1,5,10,15

这里的解释是：如果第一个参数应该位于第二个参数之前，则返回一个负数，如果第一个参数应该位于第二个参数之后则返回一个正数。

所以其实这个函数的规则定义是一个从结果来推导条件的过程，函数的逻辑已经定义好了：无论你要比较什么，我的规则比较后的结果就是：如果第一个参数应该位于第二个参数之前，则返回一个负数，如果第一个参数应该位于第二个参数之后则返回一个正数，这里的a,b的理解就是待排序数组中的任意两个元素，没有什么顺序的规定，也不是什么一定相邻的两个元素，就是任意两个元素。我们使用sort来进行排序的时候实际是根据它比较结果的规则来去写我们的比较条件的，也就是if表达式，告诉它什么时候返回-1，什么时候返回1，也就是告诉它深呢时候把a排前面，什么时候把a排后面。这个规则要写完整，不能只写一半只告诉它什么情况下把a排在前面，其他情况不写，它就不知怎么排了。

简单记忆： a - b 是生序 b - a 是降序，其实是一中“偷懒”的记忆方式，可以用来快速的进行排序，但是也要记得sort函数最原始的规则：如果第一个参数应该位于第二个参数之前，则返回一个负数，如果第一个参数应该位于第二个参数之后则返回一个正数。

如果忘记了sort方法，可以去看自己在力扣上做的第1122题

https://leetcode-cn.com/problems/relative-sort-array/solution/sortfang-fa-zui-jing-jian-fang-shi-by-storm-24/

发表于

浏览器发起请求的几个重要步骤

  • DNS解析
  • TCP链接
  • 发送http请求
  • 服务器处理请求并返回http报文
  • 浏览器解析渲染页面
  • 连接结束

DNS缓存，减少浏览器访问dns服务器的时间

部署CDN：CDN的域名不要和主站的域名一样，这样就会防止访问CDN时还携带着主站cookies的问题。

浏览器端缓存

服务端渲染ssr

HTTP是不保存状态的协议，即无状态协议，协议本身对于请求或响应之间的通信状态不进行保存，因此连接双方不能知晓对方当前的身份和状态。这也是Cookie技术产生的重要原因之一：客户端的状态管理。浏览器会根据从服务器端发送的响应报文内 Set-Cookie 首部字段信息自动保持 Cookie。而每次客户端发送 HTTP 请求，都会在请求报文中携带 Cookie，作为服务端识别客户端身份状态的标识。

TCP/IP四层网络模型

应用层
传输层
网际层
链路层

持久连接采用队头阻塞模式，下次请求必须等到上次响应返回后才能发起，如果上次的请求还没有返回响应内容，下次请求就必须只能等着，就是常说的队头阻塞。（解决方案，管道化）

需要注意，如果使用反向代理，则在axios配置的时候，请求baseURL必须设置为字符串‘/’，否则proxy会匹配不到’/api’导致代理失败。

发表于

http所谓的“超文本传输协议”其实并不怎么管“传输”的事情。

http协议的核心部分是它传输的报文内容。

http是一个纯文本的协议，所以头数据都是ASCII码的文本，可以很容易地用肉眼

阅读，不用借助程序解析也能看懂。

起始行(start line) + 头部字段(header) = 请求头

消息正文又称为实体但是与header对应，很多时候就直接称为body

http协议规定报文必须有header并且header之后必须要有一个空行，但是可以没有body

在很多时候，特别是浏览器发送get请求的时候都是这样，http报文经常是只有header而没有body,相当于只发了一个超级“大头”过来，可以想象为：每时每刻网络上都有数不清的“大头儿子”在跑来跑去。不过这个大头也不能太大，虽然http协议对header的大小没有做限制，但是各个web服务器都不会允许过大的请求头，因为头部太大可能会占用大量的服务器资源，影响运行效率。

请求行简要描述了客户端想要如何操作服务器端的资源。

由三部分构成：

  • 请求方法
  • 请求目标
  • 版本号

这三个部分通常使用空格来分隔。

例如：GET / HTTP/1.1

  • GET是请求方法
  • /是请求目标
  • HTTP/1.1是版本号

意思就是： “服务器你好，我想获取网站根目录下的默认文件，我用的协议版本号是1.1请不要用1.0或者2.0回复我。

请求行或状态行再加上头部字段集合就构成了http报文里完整的请求头或响应头。

http头字段非常灵活，不仅可以使用标准里的host、connection等已经定义的头，也可以任意添加自定义头，这就给http协议带来了无限的扩展可能。

注意：

  • 字段名不区分大小写，但是首字母大写的可读性更好
  • 字段里不允许出现空格、下划线_,但是可以使用连字符

常用头字段

  • 通用字段
  • 请求字段
  • 响应字段
  • 实体字段： 实际上可以归为通用字段，但是专门用来描述body的额外信息

对http报文的解析和处理实际上就是对头字段的处理，理解了头字段也就理解了http报文

Host

属于请求字段，只能出现在请求头里，同时也是唯一一个http1.1规范里要求必须出现的字段，如果请求头部字段里没有这个host，那这就是一个错误的报文。host字段用来告诉服务器这个请求应该由哪个主机来处理，当一台计算机上托管了多个虚拟主机的时候，服务器端就需要用host字段来选择，有点像一个简单的“路由重定向”。

1:如果拼 HTTP 报文的时候，在头字段后多加了一个 CRLF，导致出现了一个空行，会发生什么？
在header 下面第一个空行以后都会被当作body 体

2:讲头字段时说“:”后的空格可以有多个，那为什么绝大多数情况下都只使用一个空格呢？
头部多一个空格就会多一个传输的字节，去掉无用的信息，保证传输的头部字节数尽量小

发表于

px2rem或postcss-px2rem

  • 在移动端中，为了适配不同的设备，通常用rem来做适配
  • rem是通过根元素进行适配的，网页中的根元素指的是，我们通过设置

假值列表：

以下这些是假值

  • undefined
  • null
  • false
  • +0、-0、NaN
  • “”

除了以上这些假值以外的值都是真值，也就是说没有一个真值列表，真值的列表可以无限长，无法一一列举，我们只能通过假值列表做为参考来判断一个值是不是真值。

= 0 和 == -1 这样的写法不是很好，称为”抽象泄漏“，意思是在代码中暴露了底层的实现细节，这里指的是用-1作为失败时的返回值，这些细节应该被屏蔽掉。

html是浏览器构建dom的蓝图，为了正确构建每个dom，浏览器还会修复它在蓝图中发现的问题。

像普通人一样编写代码和像忍者一样编写代码的最大区别在于是否把js当成函数式语言来理解，对这一点的认知水平决定了你编写的代码的水平。

对象能做的任何一件事，函数也都能做，函数也是对象，唯一的特殊之处在于它是可调用的，即函数会被调用以便执行某项动作。

把函数作为第一类对象，是函数式编程的第一步

回调函数不一定都是异步的，两码事

发表于

js是单线程的编程语言，单线程的运行环境，它有且只有一个调用栈，它每次只能够做一件事，这是单线程的意思，程序每次只可以运行一段代码

调用栈是一个记录当前程序所在位置的数据结构，如果当前进入了某个函数，这个函数就会被放入栈里面，如果当前离开了某个函数，这个函数就会被弹出栈外，这是栈所做的事。

function foo() {
    throw new Error('Oops!');
}

function bar() {
    foo();
}

function baz() {
    bar();
}

baz();