当前位置：首页 > JavaScript

js实现扩展方法

2026-03-15 17:55:24JavaScript

在JavaScript中，可以通过原型链（Prototype）或类（Class）扩展来实现类似其他语言中的“扩展方法”。以下是几种常见实现方式：

通过原型链扩展

为内置对象（如String、Array）添加自定义方法：

js实现扩展方法

String.prototype.capitalize = function() {
  return this.charAt(0).toUpperCase() + this.slice(1);
};
console.log("hello".capitalize()); // 输出 "Hello"

使用ES6类继承扩展

通过继承原生类并添加新方法：

class ExtendedArray extends Array {
  shuffle() {
    return this.sort(() => Math.random() - 0.5);
  }
}
const arr = new ExtendedArray(1, 2, 3);
console.log(arr.shuffle()); // 随机排序数组

使用Object.assign扩展

混合模式扩展现有对象：

js实现扩展方法

const arrayExtensions = {
  last() {
    return this[this.length - 1];
  }
};
Object.assign(Array.prototype, arrayExtensions);
console.log([1, 2, 3].last()); // 输出 3

使用Proxy实现动态扩展

通过代理对象拦截方法调用：

const extend = (target, extensions) => {
  return new Proxy(target, {
    get(obj, prop) {
      return prop in extensions ? 
        extensions[prop].bind(obj) : 
        obj[prop];
    }
  });
};

const extended = extend([1, 2, 3], {
  sum() { return this.reduce((a, b) => a + b, 0); }
});
console.log(extended.sum()); // 输出 6

注意事项

扩展内置原型可能引发命名冲突，建议添加前缀标识
修改原型会影响所有实例，需谨慎操作
现代项目建议使用组合模式（如工具函数模块）替代原型扩展

TypeScript中的扩展方法

通过声明合并实现类型安全的扩展：

declare global {
  interface Array<T> {
    sum(): number;
  }
}

Array.prototype.sum = function() {
  return this.reduce((a, b) => a + b, 0);
};
console.log([1, 2, 3].sum()); // 输出 6