javascript - 为什么单独定义 JS 原型(prototype)函数比在字典中更快?

标签 javascript performance prototype

这似乎是一个特别晦涩的问题,但是我正试图从整体上提高我在 Javascript 语言中的基础(更具体地说是它的最佳和最有效的实践)。

http://jsperf.com/ 中测试理论时我得出了一些奇怪的结果:

假设我们有两个“相同”的原型(prototype),定义如下:

对象 1

var Object1 = function() {}

Object1.prototype.defaults = {
    radius: 400,
    up: 1
}

Object1.prototype.centerOffset = function() {
    return this.defaults.radius*this.defaults.up;
}

对象 2

var Object2 = function() {}

Object2.prototype = {
    defaults: {
        radius: 400,
        up: 1
    },

    centerOffset: function() {
        return this.defaults.radius*this.defaults.up;
    }
}

Object1 在执行以下简单操作时,相对于 Object2 具有一致的(如果边缘:~3%)速度优势:

var o = new Object1();
var offset = o.centerOffset();

&

var o = new Object2();
var offset = o.centerOffset();

您可以自己运行测试 here .我在 OSX 10.6.8 上使用 Chrome 25。

我想知道的是:

  • 造成这种性能差异的原因是什么?
  • 此性能是否表明了 javascript 中的一些最佳实践?

提前谢谢你们。

编辑:感谢您的回复 - 正如一些人所提到的,我的进一步测试似乎表明这个问题是浏览器(或者更确切地说,Javascript 编译器特定的)。我还在 Safari、IE 10 和 Firefox 中进行了额外测试。 IE 10 和 Firefox 都给出了非常接近的结果,没有什么不同。 Safari 对 Object2 执行操作的速度略快于 Object1(平均约 2%)。不过,我想知道异常值(其他)是什么,因为在这种情况下性能差异似乎很大。

最佳答案

当你声明一个函数时,它的原型(prototype)属性被初始化为一个包含默认构造函数的对象。

对于 Object1,您正在向现有原型(prototype)函数添加一个属性。 使用 Object2,您将用您自己的无构造函数替换现有原型(prototype)。

两者并不相同。

为什么速度不同?好吧,V8 可以在您每次创建实例时向您的 object2 原型(prototype)添加一个构造函数。

或者更有可能的是,预先存在的原型(prototype)函数是用机器代码实现的,以使其更快,当您将自己的对象分配给 Object2.prototype 时,原型(prototype)函数现在是纯 javascript,因此速度更慢。

细节并不那么重要,因为不同的解释器会以不同的方式处理这个问题,重要的是要意识到 Object1 和 Object2 并不完全相同。

关于javascript - 为什么单独定义 JS 原型(prototype)函数比在字典中更快?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15178417/

相关文章:

javascript - Accounts-UI 在登录期间挂起加载

javascript - ajax 后上传进度 - 仅限客户端

php - 速度性能 : Mysql data fetching order by OR php sort of unfiltered data?

MySQL 日期通配符性能

java - 线程数和 Java 应用程序性能

javascript - 未捕获的类型错误 : Immutable prototype object '#<Object>' cannot have their prototype set

javascript - 如何更改点击传单上的 map

javascript - 检查 Gulp 中是否存在文件

javascript - 不使用 Object.create 创建具有 null 原型(prototype)的 javascript 对象

jquery - 使用 jquery 将函数添加到 dom 元素