前端开发核心知识：Ajax、原型链、事件循环与Vue原理

埃琳娜莱农

1. 前端核心知识体系全景解析

作为从业八年的前端老司机，我深知那些高频面试题背后隐藏的知识体系才是真正决定开发者水平的关键。今天要聊的这五个主题——Ajax、原型链、事件循环、Vue和浏览器渲染，就像前端领域的"五绝"，掌握它们就相当于拿到了高级开发的通行证。记得刚入行时，每次被问到"从输入URL到页面展示发生了什么"就头皮发麻，后来才发现只要吃透这几个核心概念，90%的面试场景都能从容应对。

2. Ajax：现代Web应用的基石

2.1 XMLHttpRequest与Fetch API的进化史

2005年诞生的XMLHttpRequest彻底改变了Web的交互方式，让我们看看经典GET请求的完整实现：

javascript复制const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // 异步模式
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4 && xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

而现代的Fetch API则更加简洁：

javascript复制fetch('/api/data')
  .then(response => {
    if(!response.ok) throw new Error('Network error');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

关键点：注意Fetch不会自动携带cookie且默认不处理HTTP错误状态码，这点与XHR不同

2.2 实际项目中的Ajax优化策略

取消请求：使用AbortController实现请求中断

javascript复制const controller = new AbortController();
fetch(url, { signal: controller.signal });
// 需要时调用 controller.abort()

并发控制：Promise.all结合错误处理
缓存策略：根据API特性设置Cache-Control头部

3. JavaScript原型系统深度剖析

3.1 从构造函数到原型链

当我们创建一个构造函数时：

javascript复制function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}!`);
};

实例访问方法时的查找路径：

code复制实例对象 → 构造函数prototype → Object.prototype → null

3.2 ES6 class的语法糖本质

class写法只是原型继承的语法糖：

javascript复制class Person {
  constructor(name) { this.name = name; }
  sayHello() { console.log(`Hello, ${this.name}!`); }
}
// 等同于
function Person(name) { /*...*/ }
Person.prototype.sayHello = function() { /*...*/ };

常见误区：直接修改内置原型（如Array.prototype）是危险操作，会导致不可预期的行为

4. 事件循环：JavaScript的并发模型

4.1 浏览器中的运行时架构

典型的事件循环流程：

执行同步代码（调用栈）
处理微任务队列（Promise.then, MutationObserver）
渲染页面（如果需要）
处理宏任务队列（setTimeout, 事件回调）

4.2 实战中的执行顺序问题

看这段代码的输出顺序：

javascript复制console.log('script start');

setTimeout(() => console.log('timeout'), 0);

Promise.resolve().then(() => {
  console.log('promise1');
}).then(() => console.log('promise2'));

console.log('script end');

正确输出顺序：

code复制script start
script end
promise1
promise2
timeout

性能提示：长时间运行的同步代码会阻塞渲染，Web Worker是解决方案之一

5. Vue响应式原理揭秘

5.1 数据劫持的实现路径

Vue2使用Object.defineProperty：

javascript复制function defineReactive(obj, key) {
  let value = obj[key];
  Object.defineProperty(obj, key, {
    get() {
      console.log(`读取${key}`);
      return value;
    },
    set(newVal) {
      console.log(`设置${key}`);
      value = newVal;
    }
  });
}