Question

相关问题，但没有提到我的具体问题＆＃39; -

prototypes vs extending objects

Advantages of using prototype, vs defining methods straight in the constructor?

我有一个我不明白的性能问题。我正在创建一个能够兼容并具有方法（类似于jQuery）的类。

我允许“退出”＆＃39;可调用部分的假设，假设使用方法扩展函数比使用原型更慢。在最基本的情况下，这种假设是正确的。

但是，当我实际调整代码并查看内存使用情况时，我惊讶地发现原型方法速度较慢并占用更多内存。

在调查之后，很明显，在调用“初始化”时效率会降低。将DOM元素绑定到＆＃39; this＆＃39;的方法。如果你注释掉对init的调用（小提琴中的第49行），原型方法会更快，正如我所期望的那样。

jsfiddle here - http://jsfiddle.net/pnsfogem/1/

编辑：jsPerf在下面列出了所有Bergi的建议 - http://jsperf.com/different-types-of-constructors-vs-extend

运行这些性能之后，它确实看起来只是在我运行的Chrome版本中...

以及复制所需的所有代码。

var methods = {
    select: function(selector){
        var $this = this;
        var scopedMethods = {
            newMethod1: function( newParam ){
                $this.newMethod1( selector, newParam );
            },
            newMethod2: function( newParam ){
                $this.newMethod2( selector, newParam );
            }
        };
        return scopedMethods;
    },
    init: function(){
        // console.log(this); // Looks correct for all 2000 elements
        this.$el = $( "<div>" ).appendTo( $("body") );
    },
    newMethod1: function( selector, newParam ){
        // do stuff
    },
    newMethod2: function( selector, newParam ){
        // do stuff
    }
};

function getConstructor( noQuery ){

    var returnedInstance;

    if ( noQuery ){
        var constructor = function(){};
        constructor.prototype = methods;
        returnedInstance = new constructor();
        // Usage:
        // var s = getConstructor( 'justPrototype' );
        // s.newMethod1( '#whatever', 'stuff' );
    }
    else {
        returnedInstance = function(){
            return returnedInstance.select.apply( returnedInstance, arguments );
        };
        $.extend( returnedInstance, methods );
        // Can use either of these ways:
        // var s = getConstructor();
        // s.newMethod1( '#whatever', 'stuff' );
        // s( '#whatever' ).newMethod1( 'stuff' );
    }

    returnedInstance.init();

    return returnedInstance;

}

// When calling init
// This is both faster and more memory efficient. Why?
var arr1 = [];
console.time('normal');
for (var i=0; i<1000;i++){
    arr1.push( getConstructor() );
}
console.timeEnd('normal');
// arr1[0].$el != arr1[1].$el

var arr2 = [];
console.time('prototype');
for (var i=0; i<1000;i++){
    arr2.push( getConstructor( 'justPrototype' ) );
}
console.timeEnd('prototype');
// arr2[0].$el != arr2[1].$el

所以，我的问题是

为什么会这样？我做错了吗？

一旦他们被实例化，我希望他们能够处理添加新属性以获得相对相同的性能，但它似乎会使原型方法减慢10倍。

（显然，允许访问原型与没有原型的功能有其他好处/权衡，但我认为它们超出了这个问题的范围）

Answer 1

我正在创建一个能够兼容并具有方法（类似于jQuery）的类。

不是真的。 jQuery集合实例不可调用。

我做错了吗？

你的“原型”分支看起来有点奇怪。在每次调用时，您都在创建一个新的constructor函数。实现全球化应该有所帮助。此外，具有额外init方法的空构造函数是一种非常不寻常的模式。您可能希望从构造函数中调用init方法（参见下文），甚至直接使用

var constructor = methods.init;
constructor.prototype = methods;
function get() {
    …
    return new constructor();
}

如果您仅使用该模式创建一个以methods为原型的对象，则应该使用Object.create：

…  returnedInstance = Object.create(methods);

一旦它们被实例化，我希望它们能够处理添加新属性以获得相对相同的性能，但它似乎会使原型方法减慢10倍。

不，属性经过优化很多。使用不寻常的模式会导致严重的减速。例如，在V8（谷歌浏览器的JS引擎）中，优化了构造函数调用期间创建的属性，并且不再打开其他插槽。当你在构造对象之后创建一个新属性时，可能需要将其内部结构更改为不太优化（但更加友好的添加属性），这相当慢。如果这个猜测是正确的，你应该能够通过使用

看到显着的加速

function constructor() {
    this.init();
}
constructor.prototype = methods;
…
return new constructor();

Javascript原型与$ .extend - 内存难题

但是，当我实际调整代码并查看内存使用情况时，我惊讶地发现原型方法速度较慢并占用更多内存。

为什么会这样？我做错了吗？

1 个答案: