为何JavaScript原型扩展比普通函数慢3-4倍？如何优化？

测试代码 #

function NormalizeSpace(str)
{
    return str.trim().replace(/\s+/g, " ");
}

String.prototype.NormalizeSpace = function ()
{
    return this.trim().replace(/\s+/g, " ");
};

function MeasureDuration(fun, label)
{
    const t0 = performance.now();
    for (let i = 0; i < 100000000; i++)
        fun();
    const t1 = performance.now();

    const seconds = (t1 - t0) / 1000;
    console.log(label.padEnd(13) + " : " +
                seconds.toFixed(3).padStart(6) + " s");
}

MeasureDuration(() => NormalizeSpace("abcd"),  "As a function");
MeasureDuration(() => "abcd".NormalizeSpace(), "As a method");

测试结果 #

As a function :  4.915 s
As a method   : 18.823 s

性能差异的核心原因 #

• this绑定与原型链查找开销：调用原型方法时，JS引擎需要遍历调用者的原型链定位目标方法，同时完成this上下文的绑定与校验；而普通函数直接接收参数，无需这一步额外操作。
• 字符串包装对象的隐式创建：对字符串字面量调用原型方法时，JS会自动创建临时String包装对象，方法执行后再销毁该对象。1亿次循环中，这种创建-销毁的累积开销非常显著；普通函数直接处理字符串原始值，不存在包装过程。
• 引擎优化限制：JS引擎对普通函数的内联、类型推断优化更激进；原型方法的调用涉及动态原型链查找，引擎难以做针对性的高频优化。

原型扩展方法的性能优化方案 #

1. 启用严格模式消除包装对象
   严格模式下，原型方法中的this会直接指向字符串原始值，避免隐式包装对象的创建，这是最有效的优化手段：

   String.prototype.NormalizeSpace = function ()
   {
       'use strict';
       return this.trim().replace(/\s+/g, " ");
   };
   

2. 手动获取原始值
   如果无法使用严格模式，可手动将this转为字符串原始值，跳过包装对象操作：

   String.prototype.NormalizeSpace = function ()
   {
       const rawStr = String(this);
       return rawStr.trim().replace(/\s+/g, " ");
   };
   

3. 缓存重复使用的资源
   提前缓存正则表达式（虽然本例中引擎已缓存字面量正则，但动态场景下必须做），避免重复编译：

   const spaceRegex = /\s+/g;
   String.prototype.NormalizeSpace = function ()
   {
       'use strict';
       return this.trim().replace(spaceRegex, " ");
   };
   

4. 避免不必要的原型链查找
   如果高频调用该方法，可临时将原型方法赋值给局部变量，减少原型链查找次数：

   const normalize = String.prototype.NormalizeSpace;
   MeasureDuration(() => normalize.call("abcd"), "Optimized method");
   

内容的提问来源于stack exchange，提问作者Dr. Gut