Javascript原型与一般功能 - 性能/可读性 [英] Javascript Prototype vs General Functions - Performance/Readability
问题描述
所以我写了这些测试，看看使用原型会有多快...
function User（）{
返回{
名称：Dave，
setName：function（n）{
this.name = n;
}，
getName：function（）{
return this.name;
}
};
}
函数UserPrototype（）{
if（！（this instanceof UserPrototype））返回新的UserPrototype（）;
this.name =戴夫;
}
UserPrototype.prototype.getName = function（）{
return this.name;
};
UserPrototype.prototype.setName = function（n）{
this.name = n;
};
函数setName（obj，name）
{
obj.name = name;
}
函数getName（obj）
{
return obj.name;
}
//测试1
var c = 10000000;
var tstart = 0;
var tend = 0;
tstart = new Date（）。getTime（）;
for（var j = 0; j< c; j ++）{
var newUser = User（）;
newUser.setName（michael）;
newUser.getName（）;
}
tend = new Date（）。getTime（） - tstart;
console.log（使用方法返回对象：+ tend / 1000.0 +seconds）;
//测试2
tstart = new Date（）。getTime（）;
for（var j = 0; j< c; j ++）{
var newUser = new UserPrototype（）;
newUser.setName（michael）;
newUser.getName（）;
}
tend = new Date（）。getTime（） - tstart;
console.log（使用原型：+ tend / 1000.0 +秒）;
//测试3
tstart = new Date（）。getTime（）;
for（var j = 0; j< c; j ++）{
var newUser = {name：dave};
setName（newUser，michael）;
getName（newUser）;
}
tend = new Date（）。getTime（） - tstart;
console.log（使用一般函数：+ tend / 1000.0 +seconds）;
我的结果：
使用方法返回对象：9.075秒
使用原型：0.149秒
使用常规函数：0.099秒
我写了前两个测试，当我看到结果时，我想到了为什么我看到它们......我在想是因为返回的物体由于每次实例化对象时都会创建两个新的方法属性实例，而原型方法更快，因为它只创建一次函数，因此速度很慢。一般函数调用和原型之间的性能接近使我认为我的假设是正确的。
所以我的第一个问题是，我对我的假设是对的吗？ / p>
我的第二个问题是，如何使原型的写作更具可读性，同时保持高性能？有没有办法以一种看起来像是在类中的方式对原型进行编码（如果有意义的话）
*编辑 - 我忘了做一个用Object.create（）测试，只做一个并发布结果。 JSFiddle :( http://jsfiddle.net/k2xl/SLVLx/ ）。
我现在得到：
使用方法返回对象：0.135秒fiddle.jshell.net ：63
使用原型：0.003秒fiddle.jshell.net:72
使用一般函数：0.002秒fiddle.jshell.net:81
返回object.create版本：0.024秒
看起来这可能是解决方案吗？
我同意你的假设。如果代码是这样写的，这也是一个问题：
function UserObject（）{
this.name = 戴夫;
this.getName = function（）{
return this.name;
};
this.setName = function（n）{
this.name = n;
};
}
在这种情况下，就像你的对象方法一样，<$ c每次构造 UserObject 对象时，都会创建$ c> getName 和 setName 方法。
原型和函数方法之间的代码略有不同。删除 if（！（此instanceof UserPrototype））返回新的UserPrototype（）; （这是一个不必要的安全防护）剃掉了相当多的东西。也可以说，与...进行更密切的比较......
var newUser = new UserPrototype（）;
[newUser] .name =Dave;
...是......
var newUser = new Object（）;
newUser.name =dave;
...因为......
var newUser = {name：dave};
...在创建对象并添加名称属性。
在这种情况下，结果翻转和原型方法出来的速度更快。在这里看一个jsFiddle：
关于如何使原型更具可读性，我忍不住。对我来说，它们是可读的： - ）
So I wrote these tests to see how much faster using prototypes would be...
function User() {
return {
name: "Dave",
setName: function(n) {
this.name = n;
},
getName: function() {
return this.name;
}
};
}
function UserPrototype() {
if (!(this instanceof UserPrototype)) return new UserPrototype();
this.name = "Dave";
}
UserPrototype.prototype.getName = function() {
return this.name;
};
UserPrototype.prototype.setName = function(n) {
this.name = n;
};
function setName(obj,name)
{
obj.name = name;
}
function getName(obj)
{
return obj.name;
}
//Test 1
var c = 10000000;
var tstart = 0;
var tend = 0;
tstart = new Date().getTime();
for (var j = 0; j < c; j++) {
var newUser = User();
newUser.setName("michael");
newUser.getName();
}
tend = new Date().getTime() - tstart;
console.log("Returning object with methods: " + tend / 1000.0 + " seconds");
//Test 2
tstart = new Date().getTime();
for (var j = 0; j < c; j++) {
var newUser = new UserPrototype();
newUser.setName("michael");
newUser.getName();
}
tend = new Date().getTime() - tstart;
console.log("Using prototypes: " + tend / 1000.0 + " seconds");
//Test 3
tstart = new Date().getTime();
for (var j = 0; j < c; j++) {
var newUser = {name:"dave"};
setName(newUser,"michael");
getName(newUser);
}
tend = new Date().getTime() - tstart;
console.log("Using general functions: " + tend / 1000.0 + " seconds");
My results:
Returning object with methods: 9.075 seconds
Using prototypes: 0.149 seconds
Using general functions: 0.099 seconds
I wrote the first two tests and when I saw the results I thought about why I was seeing them... I'm thinking the reason is that the object returning is slow due to the fact that two new method property instances are created every time the object is instantiated while the prototype method is faster because it just creates the function once. The closeness of performance between general function calls and prototypes makes me think I'm right about my assumption.
So my first question is, am I right about my assumption?
My second question is, how can I make writing with prototypes more readable but with keeping the high performance? Is there a way to code prototypes in a way that would look like they are in a "class" (if that makes sense)
*EDIT - I forgot to do a test with Object.create(), just did one and posted results. JSFiddle: (http://jsfiddle.net/k2xl/SLVLx/).
I get now :
Returning object with methods: 0.135 seconds fiddle.jshell.net:63
Using prototypes: 0.003 seconds fiddle.jshell.net:72
Using general functions: 0.002 seconds fiddle.jshell.net:81
Returning object.create version: 0.024 seconds
Looks like this might be the solution?
I agree with your assumption. This is also bourn out if the code is written like this:
function UserObject() {
this.name = "Dave";
this.getName = function() {
return this.name;
};
this.setName = function(n) {
this.name = n;
};
}
In this case, like in your "object" method, the getName and setName methods are created every time a UserObject object is constructed.
There are slight differences in your code between the "prototypes" and "functions" methods. Removing if (!(this instanceof UserPrototype)) return new UserPrototype(); (which is an unnecessary safe guard) shaves quite a bit off. Arguably too, a closer comparasion to ...
var newUser = new UserPrototype();
[newUser].name = "Dave";
... is ...
var newUser = new Object();
newUser.name = "dave";
... because ...
var newUser = {name:"dave"};
... rides high on native code when creating the Object and adding the name property.
In that case, the results flip and the "prototypes" methods comes out faster. See a jsFiddle here:
About how to make your prototypes more readable, I can't help. To me, they are readable :-)
这篇关于Javascript原型与一般功能 - 性能/可读性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
