2026-01-19-杂记 2026-01-19

闭包应用场景#

• 在定时器、事件监听、Ajax 请求、Web Workers 或者任何异步中，只要使用了回调函数，实际上就是在使用闭包：

1
// 定时器
2
setTimeout(function handler(){
3
  console.log('1');
4
}，1000);
5
// 事件监听
6
document.getElementById(app).addEventListener('click', () => {
7
  console.log('Event Listener');
8
});

• 作为函数参数传递的形式：

1
var a = 1;
2
function foo(){
3
  var a = 2;
4
  function baz(){
5
    console.log(a);
6
  }
7
  bar(baz);
8
}
9
function bar(fn){
10
  // 这是闭包
11
  fn();
12
}
13
foo();  // 输出2，而不是1

• IIFE（立即执行函数），创建了闭包，保存了全局作用域（window）和当前函数的作用域，因此可以输出全局的变量：

1
var a = 2;
2
(function IIFE(){
3
  console.log(a);  // 输出2
4
})();

IIFE 是一种自执行匿名函数，这个匿名函数拥有独立的作用域。这不仅可以避免了外界访问此 IIFE 中的变量，而且又不会污染全局作用域。

• 结果缓存（备忘模式）

备忘模式就是应用闭包的特点的一个典型应用。比如下面函数：

1
function add(a) {
2
    return a + 1;
3
}

当多次执行 add() 时，每次得到的结果都是重新计算得到的，如果是开销很大的计算操作的话就比较消耗性能了，这里可以对已经计算过的输入做一个缓存。所以这里可以利用闭包的特点来实现一个简单的缓存，在函数内部用一个对象存储输入的参数，如果下次再输入相同的参数，那就比较一下对象的属性，如果有缓存，就直接把值从这个对象里面取出来。实现代码如下：

1
function memorize(fn) {
2
    var cache = {}
3
    return function() {
4
        var args = Array.prototype.slice.call(arguments)
5
        var key = JSON.stringify(args)
6
        return cache[key] || (cache[key] = fn.apply(fn, args))
7
    }
8
}
9

10
function add(a) {
11
    return a + 1
12
}
13

14
var adder = memorize(add)
15

16
adder(1)            // 输出: 2    当前: cache: { '[1]': 2 }
17
adder(1)            // 输出: 2    当前: cache: { '[1]': 2 }
18
adder(2)            // 输出: 3    当前: cache: { '[1]': 2, '[2]': 3 }

使用 ES6 的方式实现：

1
function memorize(fn) {
2
    const cache = {}
3
    return function(...args) {
4
        const key = JSON.stringify(args)
5
        return cache[key] || (cache[key] = fn.apply(fn, args))
6
    }
7
}
8

9
function add(a) {
10
    return a + 1
11
}
12

13
const adder = memorize(add)
14

15
adder(1)            // 输出: 2    当前: cache: { '[1]': 2 }
16
adder(1)            // 输出: 2    当前: cache: { '[1]': 2 }
17
adder(2)            // 输出: 3    当前: cache: { '[1]': 2, '[2]': 3 }

备忘函数中用 JSON.stringify 把传给 adder 函数的参数序列化成字符串，把它当做 cache 的索引，将 add 函数运行的结果当做索引的值传递给 cache，这样 adder 运行的时候如果传递的参数之前传递过，那么就返回缓存好的计算结果，不用再计算了，如果传递的参数没计算过，则计算并缓存 fn.apply(fn, args)，再返回计算的结果。

循环输出问题#

最后来看一个常见的和闭包相关的循环输出问题，代码如下：

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

这段代码输出的结果是 5 个 6，那为什么都是 6 呢？如何才能输出 1、2、3、4、5 呢？

可以结合以下两点来思考第一个问题：

• setTimeout 为宏任务，由于 JS 中单线程 eventLoop 机制，在主线程同步任务执行完后才去执行宏任务，因此循环结束后 setTimeout 中的回调才依次执行。
• 因为 setTimeout 函数也是一种闭包，往上找它的父级作用域链就是 window，变量 i 为 window 上的全局变量，开始执行 setTimeout 之前变量 i 已经就是 6 了，因此最后输出的连续就都是 6。

那如何按顺序依次输出 1、2、3、4、5 呢？

1）利用 IIFE

可以利用 IIFE（立即执行函数），当每次 for 循环时，把此时的变量 i 传递到定时器中，然后执行，改造之后的代码如下。

1
for(var i = 1;i <= 5;i++){
2
  (function(j){
3
    setTimeout(function timer(){
4
      console.log(j)
5
    }, 0)
6
  })(i)
7
}

可以看到，通过这样改造使用 IIFE（立即执行函数），可以实现序号的依次输出。利用立即执行函数的入参来缓存每一个循环中的 i 值。

2）使用 ES6 中的 let

ES6 中新增的 let 定义变量的方式，使得 ES6 之后 JS 发生革命性的变化，让 JS 有了块级作用域，代码的作用域以块级为单位进行执行。

1
for(let i = 1; i <= 5; i++){
2
  setTimeout(function() {
3
    console.log(i);
4
  },0)
5
}

可以看到，通过 let 定义变量的方式，重新定义 i 变量，则可以用最少的改动成本，解决该问题。

3）定时器第三个参数

setTimeout 作为经常使用的定时器，它是存在第三个参数的。我们经常使用前两个，一个是回调函数，另外一个是定时时间，setTimeout 从第三个入参位置开始往后，是可以传入无数个参数的。这些参数会作为回调函数的附加参数存在。那么结合第三个参数，调整完之后的代码如下：

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

可以看到，第三个参数的传递，可以改变 setTimeout 的执行逻辑，从而实现想要的结果

1. call()#

立即执行，参数逐个传入

1
greet.call(person, "您好", "！");
2
// 输出：您好，我是张三！
3

4
greet.call(anotherPerson, "早上好", "～");
5
// 输出：早上好，我是李四～

2. apply()#

立即执行，参数以数组形式传入（非常适合处理 arguments 或类数组对象）

1
greet.apply(person, ["下午好", "。"]);
2
// 输出：下午好，我是张三。
3

4
// 经典用法：求数组最大/最小值（以前常考，现在 Math.max(...arr) 更常用）
5
const numbers = [5, 2, 9, 1, 7];
6
console.log(Math.max.apply(null, numbers)); // 9
7
// 现代写法：Math.max(...numbers)

3. bind()#

最重要的特点：不立即执行，而是返回一个永久绑定了 this 的新函数

1
// 绑定 this，并预设部分参数（函数柯里化常用）
2
const greetZhangSan = greet.bind(person, "你好");
3

4
greetZhangSan("!");
5
// 输出：你好，我是张三!
6

7
greetZhangSan("呀～");
8
// 输出：你好，我是张三呀～
9

10
// 事件处理中最常见的用法
11
class Button {
12
  constructor(text) {
13
    this.text = text;
14
    this.element = document.createElement("button");
15
    this.element.textContent = text;
16

17
    // 错误写法：this.handleClick 中的 this 会指向 DOM 元素
18
    // this.element.addEventListener("click", this.handleClick);
19

20
    // 正确写法：
21
    this.element.addEventListener("click", this.handleClick.bind(this));
22
  }
23

24
  handleClick() {
25
    console.log(`按钮 ${this.text} 被点击了`);
26
  }
27
}

场景：

• 需要立刻执行 → 选 call 或 apply
• 处理数组/类数组参数 → 优先考虑 apply
• 需要保存一个固定 this 的函数（最常见：事件回调、setTimeout、React class 组件等）→ 选 bind
• 想同时固定 this 又预设部分参数（函数柯里化）→ 也用 bind

事件循环一次完整循环的执行顺序#

1. 执行当前调用栈中的所有同步代码（直到调用栈清空）
2. 清空微任务队列（执行所有微任务，直到微任务队列为空） 只要有微任务，就会一直执行完所有微任务
3. 从宏任务队列中取一个任务执行（注意：只取一个！）
4. 执行完这个宏任务后 → 回到第 2 步，再次清空微任务队列
5. 重复 3～4 步，直到所有任务处理完毕

代码示例与执行顺序演示#

1
console.log('1');
2

3
setTimeout(() => {
4
  console.log('2');
5
  Promise.resolve().then(() => console.log('3'));
6
  setTimeout(() => console.log('4'));
7
}, 0);
8

9
Promise.resolve().then(() => {
10
  console.log('5');
11
  Promise.resolve().then(() => console.log('6'));
12
});
13

14
console.log('7');

执行结果顺序：

1
1
2
7
3
5
4
6
5
2
6
3
7
4

1. 同步代码 → 打印 1、7
2. 微任务队列有 then(5) → 执行 → 打印 5，并产生新的微任务 then(6)
3. 继续清空微任务 → 执行 then(6) → 打印 6
4. 微任务队列清空，执行第一个宏任务（setTimeout 0ms）→ 打印 2
5. 宏任务执行中产生微任务 then(3) → 宏任务结束后立即清微任务 → 打印 3
6. 微任务清空，继续下一个宏任务（setTimeout 里面的）→ 打印 4

JS中异步的概念是什么？#

JavaScript异步是指代码的执行不必等待某个操作完成，可以继续执行后续代码。当异步操作完成后，通过回调函数、Promise或async/await来处理结果。这是为了解决JS单线程可能导致的阻塞问题。

核心机制：事件循环 + 回调队列

• 同步任务在主线程执行
• 异步任务交由Web APIs处理
• 完成后的回调进入任务队列
• 事件循环从队列中取出回调执行

为什么JS是单线程还需要事件循环？#

看似矛盾实则巧妙的设计：

1. 单线程的必然性：避免多线程的复杂性（锁、竞态条件）
2. 事件循环的价值：
   • 处理I/O密集型操作（网络、文件）
   • 维持UI响应性
   • 管理定时器、用户交互
   • 实现”非阻塞”的并发

简单比喻：就像餐厅里只有一个服务员（单线程），但通过叫号系统（事件循环）可以高效服务多桌客人。

栈内存和堆内存的差异？#

为什么数组要存在堆内存而不是栈内存？#

根本原因：

1. 大小不确定：数组长度动态变化，栈内存固定大小无法满足
2. 性能考虑：复制大数组到栈中成本高
3. 内存管理：堆内存可动态扩展，GC负责回收
4. 引用语义：多个变量可共享同一数组

JS中有哪些基本数据类型？#

7种基本类型：

1. String
2. Number
3. Boolean
4. Undefined
5. Null
6. Symbol（ES6）
7. BigInt（ES2020）

1种引用类型：Object（包括Array、Function、Date等）

函数内部的this含义是什么？#

this的指向规则：

1. 默认绑定：独立函数调用 → window/undefined（严格模式）
2. 隐式绑定：作为对象方法调用 → 该对象
3. 显式绑定：call/apply/bind → 指定的对象
4. new绑定：构造函数调用 → 新创建的对象
5. 箭头函数：无自己的this，继承外层

call、apply、bind的区别？#

1
func.call(thisArg, arg1, arg2);
2
func.apply(thisArg, [arg1, arg2]);
3
const newFunc = func.bind(thisArg, arg1, arg2);

TypeScript联合类型和交叉类型的概念？#

联合类型 (Union Types)：|表示”或”

1
type Status = "success" | "error" | "loading";
2
let value: string | number;

交叉类型 (Intersection Types)：&表示”且”

1
interface A {
2
    x: number;
3
}
4
interface B {
5
    y: string;
6
}
7
type C = A & B; // { x: number, y: string }

区别：

• 联合：可接受任一类型
• 交叉：必须同时满足所有类型

什么是同源策略？#

同源：协议、域名、端口完全相同

限制内容：

• DOM访问
• Cookie/LocalStorage访问
• AJAX请求
• 脚本执行

目的：防止恶意网站窃取用户数据

如何实现跨域请求？#

常用方案：

1. CORS：服务器设置响应头
2. JSONP：利用<script>标签
3. 代理服务器：同源服务器转发
4. WebSocket：不受同源限制
5. postMessage：窗口间通信
6. nginx反向代理：服务器端代理

为什么代理可以绕过同源限制？#

核心原理：

1. 同源限制是浏览器的安全策略，不是服务器的
2. 代理服务器与页面同源，不受限制
3. 服务器间无同源限制，可自由通信

流程：

1
浏览器(同源) → 代理服务器(同源) → 目标服务器(不同源)

Cookie和Session的定义和差异？#

Cookie是怎么种下的？#

两种方式：

1. HTTP响应头：Set-Cookie: name=value; options
2. JavaScript设置：document.cookie = "name=value; options"

关键属性：

• HttpOnly：禁止JS访问
• Secure：仅HTTPS传输
• SameSite：限制跨站发送
• Domain/Path：作用域

LocalStorage和SessionStorage的区别？#

HTTP强缓存和协商缓存的区别？#

强缓存：

• 响应头：Cache-Control、Expires
• 状态码：200 (from cache)
• 过程：不请求服务器，直接使用缓存

协商缓存：

• 响应头：ETag/If-None-Match、Last-Modified/If-Modified-Since
• 状态码：304 (Not Modified)
• 过程：请求服务器，验证缓存有效性

301和302状态码的区别？#

301 Moved Permanently：

• 永久重定向
• 搜索引擎更新索引
• 浏览器缓存新地址
• 权重传递

302 Found (临时重定向)：

• 临时重定向
• 搜索引擎不更新
• 浏览器不缓存
• 权重不传递

实际使用：

• 网站改版用301
• 登录跳转用302
• 移动端适配用302

1. 设备像素和逻辑像素的区别？#

设备像素 (Physical Pixel)：

• 物理像素，屏幕实际发光点
• 固定不变
• 高DPI设备像素更密集

逻辑像素 (CSS Pixel)：

• 编程使用的像素单位
• 与实际像素有比例关系
• 由devicePixelRatio决定

关系：物理像素 = 逻辑像素 × devicePixelRatio

2. CSS两种盒模型的差异#

标准盒模型 (content-box)：

• width/height= 内容宽度
• 总宽度 = width + padding + border + margin

IE盒模型 (border-box)：

• width/height= 内容 + padding + border
• 总宽度 = width + margin

设置方式：

1
box-sizing: content-box; /* 默认 */
2
box-sizing: border-box; /* 常用 */