通过 e.preventDefault() 阻止默认的页面刷新，然后用 fetch 或 XMLHttpRequest 异步提交数据，这就是 Ajax 的核心思想。页面不再刷新，用户感知到的只有数据的局部更新，体验大大提升。

三、this：函数运行时的“灵魂”

如果说 JavaScript 中哪个概念最让人困惑，this 一定名列前茅。很多人把 this 理解为“函数声明时”确定的，这是错误的。正确的理解是：

this 在函数运行时确定，指向函数的调用者。

我们来看一段代码（来自 2.html）：

var name = "用户A";
let obj = {
  name: "用户B",
  say: function() {
    console.log(this.name);
  }
}
obj.say(); // 输出：用户B

这里 say 作为对象 obj 的方法被调用，this 指向 obj，所以输出 "用户B"。

但如果把函数引用赋值给一个变量再调用呢？

const fn = obj.say;
fn(); // 输出：用户A（在非严格模式下）

这时 fn 作为普通函数被调用，this 指向全局对象 window，所以输出 "用户A"。但如果在 common.js 中我们开启了严格模式：

"use strict";
// 严格模式下，普通函数的 this 为 undefined

document.querySelector('.lnk')
  .addEventListener('click', goBaidu);


function goBaidu(e) {
  console.log(this); // 指向 <a class="lnk" href="..."> 元素
  e.preventDefault();
}

let obj = {
  name: "用户C",
  speak: function(a, b) {
    console.log(a, b);
    console.log(this.name);
  }
}


let obj2 = { name: "用户D" };


// 使用 call，将 this 指向 obj2
obj.speak.call(obj2, '你好', '我是用户D');
// 输出：你好 我是用户D  用户D

obj.speak.apply(obj2, ['你好', '我是用户D']);
// 效果与 call 相同，但参数以数组形式传递

当参数数量不确定或来自数组时，apply 会更加方便。

4.3 bind：延迟调用，返回新函数

bind 与前两者最大的区别是：它不立即执行函数，而是返回一个绑定好 this 的新函数。

const fn2 = obj.speak.bind(obj2);
console.log(fn2); // 返回一个新函数
fn2('你好', '我是用户D'); // 此时 this 已经绑定为 obj2

这在异步场景中非常有用，比如 setTimeout 或事件监听：

// common.js 中的示例
const addItemBind = addItem.bind(obj);
oForm.addEventListener('submit', addItemBind);

这里用 bind 将 addItem 函数的 this 永久绑定为 obj，这样在事件触发时，this 就不会指向表单元素，而是指向我们指定的对象。

4.4 异步场景中的 this 陷阱

在 2.html 中，有一段被注释掉的代码：

setTimeout((function() {
  console.log(this.name)
}).bind(this), 1000);

为什么要用 bind(this)？因为在 setTimeout 中，回调函数是作为普通函数被调用的，this 会指向 window（非严格模式）。为了让 this 保持在当前上下文中，我们需要手动绑定。

而箭头函数则天然解决了这个问题：

setTimeout(() => {
  console.log(this.name)
}, 1000);

五、箭头函数：没有 this 的“另类”

箭头函数是 ES6 引入的语法，它没有自己的 this，而是继承外层作用域的 this。

var name = "用户A";
let obj = {
  name: "用户B",
  say: function() {
    setTimeout(() => {
      console.log(this.name); // 继承 say 函数的 this → obj
    }, 1000);
  }
}
obj.say(); // 1秒后输出：用户B

在 say 方法中，箭头函数的 this 沿用了外层 say 函数的 this（即 obj），所以输出 "用户B"。

如果用普通函数：

setTimeout(function() {
  console.log(this.name); // 普通函数，this 指向 window
}, 1000);
// 输出：用户A（非严格模式）

const oForm = document.querySelector('.add-items');
let obj = {
  name: "用户C",
  // ...
}


const addItemBind = addItem.bind(obj);
oForm.addEventListener('submit', addItemBind);