Javascript原型vs $ .extend
相关的问题，但没有提到我的具体'错误' -
原型vs扩展对象
使用原型的优点，vs直接在构造函数中定义方法？
我有一个我不明白的表现问题。 我创建了一个类，可以调用并具有方法（类似于jQuery）。
我允许“可选择”可调用部分，假定用方法扩展函数比使用原型要慢。 这个假设在最基本的情况下是正确的。
但是，当我真正计算代码的时间并查看内存使用情况时，我惊讶地发现原型方法速度较慢，占用内存较多。
仔细研究之后，很明显，调用将DOM元素绑定到“this”的“init”方法时效率较低。 如果您将init调用注释掉（小提琴中的第49行），原型方法会更快，正如我所期望的那样。
jsfiddle here - http://jsfiddle.net/pnsfogem/1/
编辑：jsPerf在下面列出所有Bergi的建议 - http://jsperf.com/different-types-of-constructors-vs-extend
运行这些perfs后，它看起来像只在我正在运行的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倍。
（显然，允许访问原型还有其他的好处/权衡，但是我认为它们不在这个问题的范围之内）
我创建了一个类，可以调用并具有方法（类似于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（Google Chrome的JS引擎）中，在构造函数调用期间创建的属性已经过优化，并且没有其他插槽保持打开状态。 如果在构建对象后创建新属性，则可能需要将其内部结构更改为较少优化（但更加易于使用的属性），而这种方法相当慢。 如果这个猜测是正确的，那么你应该能够看到显着的加速
function constructor() {
this.init();
}
constructor.prototype = methods;
…
return new constructor();
上一篇: Javascript prototype vs $.extend
下一篇: JS: Why Is This Slower? It Shouldn't Test Other OR Conditions But It Does?