事件机制，函数进阶，闭包

03前端进阶核心知识点总结

本文档总结了事件冒泡与委托、函数进阶（this、arguments）、递归与闭包等 JavaScript 进阶概念。

1.Axios基础使用

Axios 是一个基于 Promise 的 HTTP 客户端，简化了 Ajax 请求。1.1 GET 请求带参数

// 方式一：params 配置项
axios.get('http://localhost:3008/list', {
  params: {
    _page: 2,
    _limit: 1
  }
}).then(function (res) {
  console.log(res.data)
})// 方式二：URL 拼接（效果相同）
axios.get('http://localhost:3008/list?_page=2&_limit=1').then(function (res) {
  console.log(res.data)
})

1.2 POST 请求

javascript

axios.post('http://localhost:3008/list', { name: 123 }).then(function (res) {
  console.log(res.data)
})

2. 事件机制

2.1 事件冒泡

当一个元素的事件被触发时，该事件会沿着 DOM 树向上逐级传播，触发祖先元素上绑定的同类型事件。

text

子元素按钮点击 → 父元素 → 祖父元素 → ... → document

2.2 事件对象

事件处理函数的参数，提供事件相关的信息和方法。

方法	作用
e.preventDefault()	阻止默认行为（如 a 标签跳转、表单提交）
e.stopPropagation()	阻止事件冒泡

2.3 事件委托

利用事件冒泡机制，将事件监听器绑定到父元素上，通过判断 e.target 来执行对应逻辑。

javascript

var list = document.querySelector('.list')
list.onclick = function (e) {
  var target = e.target
  if (target.classList.contains('btn')) {
    console.log('点击了 btn 按钮')
    // 执行删除等操作...
  }
}

优点：

• 动态添加的子元素无需重新绑定事件
• 减少事件监听器数量，提升性能

3. 函数进阶

3.1 函数内的 this

this 指向调用函数的对象，在函数执行时动态确定。

javascript

// 全局调用 → this 指向 window
function fun() {
  console.log(this) // window
}

// 对象方法调用 → this 指向该对象
var obj = {
  method: function() {
    console.log(this) // obj
  }
}

3.2 arguments 关键字

函数内部自动生成的类数组对象，包含所有传入的实参。

javascript

function fun(a, b, c, d, e, f, g) {
  var sum1 = 0
  for (var i = 0; i < arguments.length; i++) {
    sum1 += arguments[i]
  }
  return sum1
}
var sum = fun(1, 23, 4, 5, 5, 7)
console.log(sum) // 45

特点：

• 有 length 属性
• 不是真正的数组，无法使用数组方法
• 适用于不确定参数个数的函数

3.3 递归函数

函数内部调用自身的函数，需要设置退出条件避免无限循环。

javascript

// 示例：阶乘
function factorial(n) {
  if (n === 1) return 1
  return n * factorial(n - 1)
}

4. 闭包

4.1 定义

闭包 = 函数 + 其所在的词法环境。一个函数能够访问其外部作用域的变量，即使外部函数已执行完毕。

javascript

function fun() {
  var a = 10
  return function () {
    a++
    console.log(a)
  }
}
var fn = fun()
fn() // 输出 11
fn() // 输出 12

4.2 经典问题：循环中的 setTimeout

问题：var 声明的变量没有块级作用域，异步回调执行时循环已结束，i 变为 5。

javascript

for (var i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i) // 输出 5 个 5
  })
}

解决方案一：立即执行函数（IIFE）创建闭包

javascript

for (var i = 0; i < 5; i++) {
  (function () {
    var j = i  // 保存当前 i 的值
    setTimeout(function () {
      console.log(j) // 输出 0 1 2 3 4
    })
  })()
}

解决方案二：使用 let（ES6）

javascript

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

4.3 闭包的作用

• 创建私有变量
• 保存函数执行状态
• 实现模块化

5. 知识图谱

text

┌─────────────────────────────────────────┐
│           前端进阶核心知识               │
├─────────────────────────────────────────┤
│ 事件机制                                 │
│ ├── 事件冒泡                             │
│ ├── 事件对象 (preventDefault, stopProp) │
│ └── 事件委托 ★                           │
├─────────────────────────────────────────┤
│ 函数进阶                                 │
│ ├── this 指向                            │
│ ├── arguments 类数组                     │
│ └── 递归函数                             │
├─────────────────────────────────────────┤
│ 闭包 ★★★                                 │
│ ├── 定义：函数 + 词法环境                 │
│ ├── 应用：私有变量、状态保存              │
│ └── 经典问题：循环 + setTimeout          │
├─────────────────────────────────────────┤
│ HTTP 请求                                │
│ ├── Axios 基本用法                       │
│ ├── GET 参数传递 (params / URL拼接)      │
│ └── POST 请求体                          │
└─────────────────────────────────────────┘

6. 总结

概念	核心要点	常见应用
事件委托	利用冒泡，父元素监听子元素事件	动态列表的删除/编辑操作
this	由调用方式决定，箭头函数继承外层	对象方法、构造函数、回调函数
arguments	类数组，存放所有实参	实现重载、累加器等
闭包	函数 + 外部作用域引用	模块化、循环异步问题、防抖节流

---

延伸学习建议：

• 深入理解事件循环（Event Loop）机制
• 掌握 call、apply、bind 手动改变 this 指向
• 学习 ES6 的 let/const、箭头函数、Promise 等特性