JavaScript进阶必会：七大核心手写功能全解析

作者：渣渣辉2025.09.19 12:56浏览量：0

简介：本文深入解析JavaScript进阶阶段必须掌握的七大核心手写功能，涵盖从基础工具函数到高级设计模式的实现细节。通过代码示例和场景分析，帮助开发者突破框架依赖，提升代码质量与工程能力。

JavaScript进阶必会的手写功能：从工具到架构的深度实践

在JavaScript开发中，依赖第三方库虽能快速实现功能，但过度依赖会限制开发者对语言本质的理解。本文将系统梳理进阶阶段必须掌握的七大核心手写功能，涵盖工具函数、设计模式、异步处理等关键领域，帮助开发者构建扎实的底层能力。

一、核心工具函数实现

1. 深度克隆函数

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  // 处理循环引用
  if (hash.has(obj)) return hash.get(obj);
  const cloneObj = Array.isArray(obj) ? [] : {};
  hash.set(obj, cloneObj);
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key], hash);
    }
  }
  // 处理Symbol属性
  const symbolKeys = Object.getOwnPropertySymbols(obj);
  for (let key of symbolKeys) {
    cloneObj[key] = deepClone(obj[key], hash);
  }
  return cloneObj;
}

该实现突破了JSON.parse(JSON.stringify())的三大局限：

正确处理函数、Symbol、循环引用等特殊类型
保持原型链完整性
支持Date、RegExp等内置对象的克隆

2. 防抖与节流优化

// 可配置的防抖函数
function debounce(fn, delay = 300, immediate = false) {
  let timer = null;
  return function(...args) {
    const context = this;
    if (immediate && !timer) {
      fn.apply(context, args);
      immediate = false;
    }
    clearTimeout(timer);
    timer = setTimeout(() => {
      if (!immediate) fn.apply(context, args);
    }, delay);
  };
}
// 带取消功能的节流
function throttle(fn, delay = 200) {
  let lastTime = 0;
  let timer = null;
  const throttled = function(...args) {
    const now = Date.now();
    const remaining = delay - (now - lastTime);
    if (remaining <= 0) {
      clearTimeout(timer);
      lastTime = now;
      fn.apply(this, args);
    } else if (!timer) {
      timer = setTimeout(() => {
        lastTime = Date.now();
        timer = null;
        fn.apply(this, args);
      }, remaining);
    }
  };
  throttled.cancel = function() {
    clearTimeout(timer);
    lastTime = 0;
  };
  return throttled;
}

优化点：

支持首次立即执行选项
提供取消功能
精确计算剩余时间

二、设计模式手写实现

1. 单例模式实现

// 透明单例（需注意this指向）
const Singleton = (function() {
  let instance;
  class Single {
    constructor() {
      if (instance) {
        return instance;
      }
      instance = this;
      this.init();
    }
    init() {
      console.log('初始化');
    }
  }
  return Single;
})();
// 更安全的实现方式
function createSingleton(className) {
  let instance;
  return function(...args) {
    if (!instance) {
      instance = new className(...args);
    }
    return instance;
  };
}

关键考量：

延迟创建实例
线程安全处理
继承支持

2. 发布订阅模式

class EventEmitter {
  constructor() {
    this.events = {};
  }
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }
  emit(event, ...args) {
    if (this.events[event]) {
      this.events[event].forEach(cb => cb(...args));
    }
  }
  off(event, callback) {
    if (!callback) {
      delete this.events[event];
    } else {
      const callbacks = this.events[event];
      if (callbacks) {
        this.events[event] = callbacks.filter(cb => cb !== callback);
      }
    }
  }
  once(event, callback) {
    const onceWrapper = (...args) => {
      callback(...args);
      this.off(event, onceWrapper);
    };
    this.on(event, onceWrapper);
  }
}

设计要点：

支持一次性监听
安全的移除机制
事件参数透传

三、异步编程进阶

1. Promise实现解析

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];
    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };
    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
    const promise2 = new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      }
    });
    return promise2;
  }
}
function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected'));
  }
  let called = false;
  if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      const then = x.then;
      if (typeof then === 'function') {
        then.call(
          x,
          y => {
            if (called) return;
            called = true;
            resolvePromise(promise2, y, resolve, reject);
          },
          r => {
            if (called) return;
            called = true;
            reject(r);
          }
        );
      } else {
        resolve(x);
      }
    } catch (e) {
      if (called) return;
      called = true;
      reject(e);
    }
  } else {
    resolve(x);
  }
}

关键实现点：

三态管理（pending/fulfilled/rejected）
异步执行保证
链式调用支持
循环引用检测

2. Async/Await原理模拟

function asyncToGenerator(generatorFn) {
  return function(...args) {
    const generator = generatorFn.apply(this, args);
    function handle(result) {
      if (result.done) return Promise.resolve(result.value);
      return Promise.resolve(result.value).then(
        res => handle(generator.next(res)),
        err => handle(generator.throw(err))
      );
    }
    try {
      return handle(generator.next());
    } catch (err) {
      return Promise.reject(err);
    }
  };
}
// 使用示例
const asyncFunc = asyncToGenerator(function* () {
  const a = yield 1;
  const b = yield a + 2;
  return b;
});

核心机制：

Generator自动执行
状态机管理
Promise链式调用

四、性能优化技巧

1. 惰性函数实现

// 传统方式每次调用都判断
function createXHR() {
  return window.XMLHttpRequest 
    ? new XMLHttpRequest()
    : new ActiveXObject('Microsoft.XHR');
}
// 惰性函数优化
function createXHR() {
  if (window.XMLHttpRequest) {
    createXHR = function() {
      return new XMLHttpRequest();
    };
  } else {
    createXHR = function() {
      return new ActiveXObject('Microsoft.XHR');
    };
  }
  return createXHR();
}
// 更简洁的ES6实现
const createXHR = (function() {
  const xhr = window.XMLHttpRequest 
    ? function() { return new XMLHttpRequest(); }
    : function() { return new ActiveXObject('Microsoft.XHR'); };
  return xhr();
})();

优势分析：

减少重复判断
提升后续调用性能
代码更简洁

2. 函数柯里化实现

// 基础柯里化
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}
// 带占位符的柯里化
function curryWithPlaceholder(fn) {
  return function curried(...args) {
    const context = this;
    const placeholderIndex = args.indexOf('_');
    if (placeholderIndex === -1 && args.length >= fn.length) {
      return fn.apply(context, args);
    } else {
      return function(...args2) {
        const newArgs = [...args];
        let offset = 0;
        args2.forEach(arg => {
          const argIndex = newArgs.indexOf('_');
          if (argIndex !== -1) {
            newArgs[argIndex] = arg;
            offset++;
          } else {
            newArgs.push(arg);
          }
        });
        return curried.apply(context, newArgs);
      };
    }
  };
}

应用场景：

参数复用
延迟执行
函数组合

五、实践建议

渐进式学习：从工具函数开始，逐步掌握设计模式和底层原理
代码对比：实现后与原生方法或成熟库进行性能对比
单元测试：为每个手写功能编写完整的测试用例
场景分析：在实际项目中寻找应用场景，避免过度设计
性能监控：使用Performance API监控手写功能的实际性能

结语

手写核心功能不仅是技术能力的体现，更是深入理解JavaScript语言特性的有效途径。通过系统掌握这些进阶技能，开发者能够：

减少对第三方库的依赖
编写更高效、可控的代码
在复杂场景中设计出更优雅的解决方案
提升问题排查和调试能力

建议开发者在日常工作中刻意练习，从简单的工具函数开始，逐步挑战更复杂的设计模式和底层实现，最终形成自己的技术体系。

发表评论

开发者关注产品榜

最热文章

关于作者

被阅读数
被赞数
被收藏数

开发者热搜

JavaScript进阶必会：七大核心手写功能全解析

JavaScript进阶必会的手写功能：从工具到架构的深度实践

一、核心工具函数实现

1. 深度克隆函数

2. 防抖与节流优化

二、设计模式手写实现

1. 单例模式实现

2. 发布订阅模式

三、异步编程进阶

1. Promise实现解析

2. Async/Await原理模拟

四、性能优化技巧

1. 惰性函数实现

2. 函数柯里化实现

五、实践建议

结语

相关文章推荐

文心一言接入指南：通过百度智能云千帆大模型平台API调用

从 MLOps 到 LMOps 的关键技术嬗变

Sugar BI教你怎么做数据可视化 - 拓扑图，让节点连接信息一目了然

更轻量的百度百舸，CCE Stack 智算版发布

打造合规数据闭环，加速自动驾驶技术研发

LMOps 工具链与千帆大模型平台

发表评论

开发者关注产品榜

千帆大模型服务与开发平台ModelBuilder

千帆大模型应用开发平台AppBuilder

秒哒-生成式应用开发平台

百度智能云客悦智能客服平台

最热文章

关于作者