5个常见的前端手写功能：New、call apply bind、防抖和节流、instanceof、ajax

'# 5个常见的前端手写功能：New、call apply bind、防抖和节流、instanceof、ajax

一、背景与问题

在前端开发中，手写核心函数是考察开发者对底层原理理解的重要方式。这五个功能分别涉及对象创建、函数调用、性能优化、类型判断和网络请求，它们构成了前端开发的基石。理解这些功能的实现原理，不仅能提升代码质量，还能帮助开发者在遇到问题时快速定位和修复。

本文将深入探讨这些功能的实现原理，结合真实开发场景，提供完整的代码示例和性能分析，并指出常见错误和最佳实践。

二、New 的实现原理

1. 核心原理

new 是 JavaScript 中创建对象的最常用方式。其核心原理包括以下步骤：

1. 创建一个空对象
2. 将新对象的原型指向构造函数的 prototype
3. 执行构造函数，将 this 绑定到新对象
4. 返回新对象（若构造函数未显式返回对象，则返回新对象）

2. 代码示例

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

3. 关键代码解释

• Object.create(null)：创建一个没有原型链的空对象，避免继承 Object 的原型方法。
• obj.__proto__ = Constructor.prototype：通过 __proto__ 直接设置原型链（现代开发中更推荐使用 Object.setPrototypeOf）。
• Constructor.apply(obj, args)：将构造函数的 this 绑定到新对象，并执行函数。

4. 实际使用场景

• 在工厂模式中创建对象时，避免使用 new 的语法糖。
• 在需要动态创建对象时，例如通过配置创建不同类型的对象。

5. 常见错误与解决方案

错误示例：

function Person(name) {
  this.name = name;
}
const p = myNew(Person, 'Alice');
console.log(p.name); // 输出 Alice

错误分析： 若构造函数返回对象（如 return { name: 'Bob' }），myNew 会返回该对象而非新创建的 obj。

解决方案： 在 myNew 中增加类型判断逻辑，确保返回正确的对象。

三、call、apply、bind 的实现原理

1. 核心原理

call、apply、bind 是用于改变函数执行上下文（this）的函数。它们的区别在于参数传递方式：

• call：参数按顺序传递
• apply：参数作为数组传递
• bind：返回一个新函数，绑定 this 并保持参数

2. 代码示例

Function.prototype.myCall = function(context, ...args) {
  const fn = this;
  const key = Symbol();
  context[key] = fn;
  const result = context[key](...args);
  delete context[key];
  return result;
};

Function.prototype.myApply = function(context, args) {
  const fn = this;
  const key = Symbol();
  context[key] = fn;
  const result = context[key](...args);
  delete context[key];
  return result;
};

Function.prototype.myBind = function(context, ...args) {
  const fn = this;
  return function(...callArgs) {
    return fn.apply(context, args.concat(callArgs));
  };
};

3. 关键代码解释

• Symbol()：创建唯一标识符，避免与对象已有属性冲突。
• context[key] = fn：将函数挂载到目标对象上，模拟 this 绑定。
• delete context[key]：清理临时挂载的函数，避免内存泄漏。

4. 实际使用场景

• 在事件处理中绑定 this 上下文，例如 button.addEventListener('click', this.myMethod.bind(this))。
• 在不同对象之间共享方法，例如 Object.prototype.toString.call(obj)。

5. 常见错误与解决方案

错误示例：

function greet(name) {
  console.log(this.name + ', ' + name);
}
const obj = { name: 'Alice' };
greet.myCall(obj, 'Bob'); // 输出 Alice, Bob

错误分析： 若 this 是 null 或 undefined，myCall 会报错。

解决方案： 在 myCall 中处理 context 为 null 的情况，例如：

context = context || window;

四、防抖和节流的实现原理

1. 核心原理

• 防抖（Debounce）：在事件被频繁触发时，只在最后一次触发后执行。适用于搜索框输入、窗口调整等场景。
• 节流（Throttle）：在事件被频繁触发时，每隔一定时间执行一次。适用于滚动、拖拽等场景。

2. 代码示例

// 防抖
function debounce(func, delay) {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 节流
function throttle(func, delay) {
  let lastTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastTime >= delay) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

3. 关键代码解释

• clearTimeout(timer)：清除之前的定时器，防止重复触发。
• Date.now()：获取当前时间戳，用于节流的间隔计算。

4. 实际使用场景

• 防抖：搜索框输入时，延迟 500ms 后发送请求，避免频繁请求。
• 节流：滚动事件中，每隔 200ms 执行一次加载操作。

5. 常见错误与解决方案

错误示例：

function search(input) {
  console.log('Searching...');
}
const debouncedSearch = debounce(search, 500);
debouncedSearch('Alice'); // 输出 Searching...
debouncedSearch('Bob'); // 输出 Searching...

错误分析： 防抖会在最后一次触发后执行，但可能未处理连续触发。

解决方案： 使用 requestAnimationFrame 优化性能，或在防抖中设置 immediate 参数控制立即执行。

五、完整案例：搜索框防抖 + Ajax 请求

1. 项目需求

实现一个搜索框，用户输入时，使用防抖延迟 500ms 后发送 Ajax 请求，获取搜索结果。

2. 代码示例

<!DOCTYPE html>
<html>
<head>
  <title>Search Debounce</title>
</head>
<body>
  <input type="text" id="searchInput" placeholder="Search...">
  <div id="results"></div>

  <script>
    // 假设的 Ajax 请求函数
    function fetchData(query) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(`Results for: ${query}`);
        }, 1000);
      });
    }

    // 防抖函数
    function debounce(func, delay) {
      let timer = null;
      return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, args);
        }, delay);
      };
    }

    // 点击事件处理
    const input = document.getElementById('searchInput');
    const results = document.getElementById('results');

    input.addEventListener('input', debounce(async (query) => {
      const response = await fetchData(query);
      results.textContent = response;
    }, 500));
  </script>
</body>
</html>

3. 关键代码解释

• debounce：在输入事件中应用防抖，避免频繁请求。
• fetchData：模拟 Ajax 请求，返回搜索结果。
• async/await：处理异步请求，简化代码。

4. 性能优化

• 使用 requestAnimationFrame 替代 setTimeout，减少 CPU 消耗。
• 在防抖中添加 immediate 参数，控制是否立即执行第一次触发。

六、instanceof 的实现原理

1. 核心原理

instanceof 用于判断对象是否属于某个类的实例。其实现基于原型链查找：

1. 检查目标对象的 __proto__ 是否指向构造函数的 prototype
2. 若未找到，则继续查找原型链
3. 若找到，返回 true，否则返回 false

2. 代码示例

function myInstanceof(obj, constructor) {
  let proto = obj.__proto__;
  while (proto) {
    if (proto === constructor.prototype) {
      return true;
    }
    proto = proto.__proto__;
  }
  return false;
}

3. 关键代码解释

• obj.__proto__：获取对象的原型链。
• constructor.prototype：获取构造函数的原型。

4. 实际使用场景

• 在类型判断中替代 typeof，例如判断是否为数组。
• 在继承关系中判断对象的归属。

5. 常见错误与解决方案

错误示例：

function Person() {}
const p = new Person();
console.log(myInstanceof(p, Person)); // 输出 true

错误分析： 若修改了 Person.prototype，myInstanceof 可能无法正确识别。

解决方案： 使用 Object.getPrototypeOf 替代 __proto__，避免兼容性问题。

七、Ajax 的实现原理

1. 核心原理

Ajax 是通过 XMLHttpRequest 或 fetch 实现的异步请求。其核心步骤包括：

1. 创建请求对象
2. 设置请求方法、URL、头部
3. 发送请求
4. 处理响应数据

2. 代码示例

function myAjax(options) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(options.method, options.url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject(new Error(xhr.statusText));
        }
      }
    };
    xhr.send(JSON.stringify(options.data));
  });
}

3. 关键代码解释

• XMLHttpRequest：创建请求对象。
• setRequestHeader：设置请求头，例如 Content-Type。
• onreadystatechange：处理响应状态，判断是否成功。

4. 实际使用场景

• 获取远程数据，例如从 API 接口获取数据。
• 在页面加载时动态加载内容。

5. 常见错误与解决方案

错误示例：

myAjax({ url: 'https://api.example.com/data' }).then(data => {
  console.log(data);
});

错误分析： 若未处理跨域问题，请求会被浏览器阻止。

解决方案： 使用 fetch 替代 XMLHttpRequest，或配置服务器支持 CORS。

八、性能与工程实践

1. 性能优化

• 防抖：减少高频事件的执行次数，避免资源浪费。
• 节流：控制资源使用频率，防止 CPU 过载。
• 使用 requestAnimationFrame：在动画或重绘时优化性能。

2. 安全风险

• 跨域问题：使用 fetch 时需配置 CORS 头信息。
• CSRF 攻击：在 Ajax 请求中添加 XSRF-TOKEN 验证。

3. 方案比较

九、常见问题与踩坑

1. new 的返回值问题

问题： 构造函数返回对象时，new 会返回该对象，否则返回新创建的对象。

解决方案： 在 myNew 中增加返回值判断逻辑。

2. call/apply 的 this 绑定问题

问题： 若 this 是 null 或 undefined，会报错。

解决方案： 在 myCall 中处理默认上下文。

3. instanceof 的原型链变化

问题： 若修改了对象的 __proto__，instanceof 判断可能失效。

解决方案： 使用 Object.getPrototypeOf 替代 __proto__。

十、最佳实践

1. 使用 new 时：优先使用语法糖，避免手动实现，除非有特殊需求。
2. 使用 call/apply/bind 时：根据场景选择合适的方法，避免频繁生成新函数。
3. 使用防抖/节流时：根据业务需求选择，防抖适用于输入，节流适用于滚动。
4. 使用 instanceof 时：优先使用内置方法，避免手动实现。
5. 使用 Ajax 时：配置 CORS 头，处理错误和超时，避免跨域问题。

十一、总结

本文深入探讨了前端开发中五个常见手写功能的实现原理，结合真实场景提供了代码示例和性能分析。通过理解这些功能的底层逻辑，开发者可以更好地应对复杂场景，提升代码质量和可维护性。同时，注意常见错误和最佳实践，避免在实际项目中踩坑。