前端性能优化：创建对象二

来源：互联网发布：网络盗刷信用卡能查到编辑：程序博客网时间：2024/05/22 14:08

既然使用var obj = { name1: name1, name2: name2, name3: name3 ,name4:name1+name2}; 方式是最快的，那么使用原型的方式会变快吗？

测试代码：

var length=30000;/*构造函数创建对象*/function mYObj(name1,name2,name3){  this.name1=name1;  this.name2=name2;  this.name3=name3;  this.name4=name1+name2;    this.name5=name1+name3;  this.name6=name1;  this.name7=name2;  this.name8=name3;}/*工厂方法创建对象*/function CreateObj1(name1,name2,name3){    var obj = { name1: name1, name2: name2, name3: name3 ,name4:name1+name2, name5:name1+name3,name6:name1,name7:name2,name8:name3};    return obj;}function CreateObj2(name1,name2,name3){    var obj =new mYObj(name1,name2,name3);    return obj;}function Test1(){var date1=new Date().getTime();  var t=[];for(var i=0;i<length;i++){ t[i]=CreateObj1(1,"name"+i,i+10);}var date12=new Date().getTime();console.log("1Test"+((date12-date1)));}function Test2(){var date1=new Date().getTime();  var t=[];for(var i=0;i<length;i++){ t[i]=CreateObj2(1,"name"+i,i+10);}var date12=new Date().getTime();console.log("2Test"+((date12-date1)));}

测试发现还是var obj = { name1: name1}这种方式速度快。

但如果创建的对象包含方法呢？

/*构造函数创建对象*/function mYObj(name1,name2,name3){  this.name1=name1;  this.name2=name2;  this.name3=name3;  this.name4=name1+name2;    this.name5=name1+name3;  this.name6=name1;  this.name7=name2;  this.name8=name3;}mYObj.prototype.fun1=function(){return this.name1+this.name2;}mYObj.prototype.fun2=function(){return this.name1+this.name2;}mYObj.prototype.fun3=function(){return this.name1+this.name2;}/*工厂方法创建对象*/function CreateObj1(name1,name2,name3){    var obj = { name1: name1, name2: name2, name3: name3 ,name4:name1+name2, name5:name1+name3,name6:name1,name7:name2,name8:name3,fun1:function(){return this.name1+this.name2},  fun2:function(){return this.name1+this.name2},fun3:function(){return this.name1+this.name2}};    return obj;}

测试发现，使用原型的方式创建对象变快了，而且随着对象包含方法越来越多，差别越来越大。因为方法没有共享，创建方法的代价很大，每一个对象都需要创建方法。

有没有方法改进呢？既然创建方法的代价很大，那就改进，是方法共享，改进如下

function fun1(){return this.name1+this.name2;}function fun2(){return this.name1+this.name2;}function fun3(){return this.name1+this.name2;}/*工厂方法创建对象*/function CreateObj1(name1,name2,name3){    var obj = { name1: name1, name2: name2, name3: name3 ,name4:name1+name2, name5:name1+name3,name6:name1,name7:name2,name8:name3,fun1:fun1,  fun2:fun2,fun3:fun3};    return obj;}

这样修改后，差别确实变小了，但原型的方式还是快，毕竟原型的方式不需要给这些方法赋值。其实在实际使用中，还是需要测试，根据实际情况进行修改。

1 0