- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
相关问题,但没有提及我的具体“错误”-
prototypes vs extending objects
Advantages of using prototype, vs defining methods straight in the constructor?
我有一个我不明白的性能问题。我正在创建一个既可调用又具有方法(类似于 jQuery)的类。
我允许“选择退出”可调用部分,假设使用方法扩展函数比使用原型(prototype)要慢。这个假设在最基本的情况下是正确的。
在调查之后,很明显它只是在调用将 DOM 元素绑定(bind)到“this”的“init”方法时效率较低。如果您注释掉对 init 的调用( fiddle 中的第 49 行),原型(prototype)方法会快得多,正如我所期望的那样。
jsfiddle 在这里 - 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
所以,我的问题是
一旦它们被实例化,我希望它们能够处理添加新属性以在性能方面相对相同,但它似乎将原型(prototype)方法的速度降低了 10 倍。
(显然,允许访问原型(prototype)与拥有没有原型(prototype)的函数还有其他好处/权衡,但我认为它们超出了这个问题的范围)
最佳答案
I was creating a class with the ability to be both callable and have methods (similar to jQuery).
不是真的。 jQuery 集合实例不可调用。
Am I doing something wrong?
您的“原型(prototype)”分支看起来有点奇怪。在每次调用时,您都会创建一个新的 constructor
函数。让它全局化应该会有所帮助。此外,带有额外 init
方法的空构造函数是一种非常不寻常的模式。您可能想从构造函数中调用 init
方法(见下文),甚至直接使用
var constructor = methods.init;
constructor.prototype = methods;
function get() {
…
return new constructor();
}
如果您只是简单地使用该模式来创建一个以 methods
为原型(prototype)的对象,您应该使用 Object.create
:
… returnedInstance = Object.create(methods);
Once they're instantiated, I would expect them to handle adding new properties to be relatively the same performance wise, but it seems to slow down the prototype approach by 10x.
不,属性优化了很多。使用不寻常的模式会导致速度急剧下降。例如,在 V8(Google Chrome 的 JS 引擎)中,优化了在构造函数调用期间创建的属性,并且没有更多的插槽处于打开状态。当您在构造对象后创建一个新属性时,它可能需要将其内部结构更改为优化程度较低(但对添加属性更友好)的结构,这相当慢。如果这个猜测是正确的,您应该能够通过使用
看到显着的加速function constructor() {
this.init();
}
constructor.prototype = methods;
…
return new constructor();
关于Javascript 原型(prototype)与 $.extend - 内存难题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25664525/
这段代码: interface I {} public class Test { TableView table; Test(ObservableList list) {
我们从 .NET 2.0 升级到 .NET 3.5。我的一位同事尝试在 Visual Studio 2008 中的调试器下运行 ASP .NET Web 项目时出现以下对话框。他可以正常构建,但无法调
我有一个具有class User extends Authenticatable的用户模型类,并且我也创建了另一个具有class Foo extends Model的模型类 这会在显示路线文件中的数据
我遇到的一个常见问题 @extend当试图用另一个 @extend 覆盖继承的属性时. 这是一个例子: // class selectors to be @extended // these coul
我对以下代码的 typescript 编译错误感到困惑: function f(x: T, y: S) { if (x === y) { // ERROR: This condition
这与对象 {} === {} 无关, found this issues不知道这个是不是一样 类型集 - AUnion 不是空集。另外两种类型(L 和R)正在扩展它。我的理解是这些 L、R 至少和 A
我收到以下错误: Extender Provider failed to return an Extender for this object 尝试为 .Net v4.7.2 加载 WCF 项目时。我
我收到以下错误: Extender Provider failed to return an Extender for this object 尝试为 .Net v4.7.2 加载 WCF 项目时。我
我刚刚在读Javascript: Module Pattern vs Constructor/Prototype pattern?我很好奇,当我们使用 $.fn.extend 或 $.extend 扩
我正在用 extend 做一些测试,在我做了一些观察后我有点困惑。初步观察: console.log($.extend === $.fn.extend); // trure // and since
我一直在使用一些通用方法从元素的可变参数创建集合,例如 public Set createSet( T... elements ) { ... 然而,最近我遇到了编译器没有按照我的预期去做的情况。以
刚去面试,问了一个问题。 面试官 - Java 是否支持多重继承? 我 - 不 面试官 - Java 中的每个类都扩展了类 Object(类 Object 除外),如果我们从外部扩展一个类,例如 Cl
我目前正在实现我的第一个 GWT 应用程序,我只是有一个快速的问题,关于在创建复杂的自定义小部件时 Extends Composite 和 Extend a specified widget 之间的区
使用 Observable 扩展 Object 和应用于以下类的扩展 Observable 之间有什么区别。 当应用程序运行时,结果是一样的。 library models; import 'pack
我制作了一个类装饰器,我想限制这个装饰器只能应用于某些类,所以我这样做了: @decorator() class A { foo:string; } @decorator() class B
在这个例子中: import java.util.*; public class Example { static void doesntCompile(Map> map) {} st
注意:这个问题与 Enum 无关,所以它不是重复的。Enum 被迫只与自身比较,因为编译器生成类型参数,而不是因为 java 递归类型参数。 我试图找到将类声明为的优势: public class S
我是 Java 的新手,正在尝试从 Java 泛型和集合一书中理解以下奇怪的语法。(我广泛使用 C++ 模板,因此可以声称了解泛型编程的基础知识和可能的陷阱): interface Collect
注意:这个问题与 Enum 无关,所以它不是重复的。Enum 被迫只与自身比较,因为编译器生成类型参数,而不是因为 java 递归类型参数。 我试图找到将类声明为的优势: public class S
有人知道是否可以延长 child Blade 吗? 我的应用程序有一个通用的布局模板,然后每个页面都从该模板@extends。每个页面都可以根据需要为其他 HTML block (例如模态)引入一系列
我是一名优秀的程序员,十分优秀!