Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

对象字面量与对象模板

  v8里面有对象模板(ObjectTemplate)的概念,当我们new Object时会先创建一个对象模板作为常量,然后再拷贝这个常量作为变量使用。这种情况下对象模板往往无法复用。而字面量定义函数就不同,所以它比较快。而且不仅限于v8,几乎所有引擎都是类似的性质。
<input type="button" value="普通定义" />
<input type="button" value="字面量定义" />
<script>
onclick=function(e){
  var v,o,i,t=new Date;
  switch(v=e.target.value){
    case "普通定义":
      for(i=0;i<1E6;i++)
        o=new Object,
        o.a=0,o.b=1,o.c=2,o.d=3,o.e=4,o.f=5,o.g=6,o.h=7,o.i=8,o.j=9,
        o.k=10,o.l=11,o.m=12,o.n=13,o.o=14,o.p=15,o.q=16,o.r=17,
        o.s=18,o.t=19,o.u=20,o.v=21,o.w=22,o.x=23,o.y=24,o.z=25;
    break;
    case "字面量定义":
      for(i=0;i<1E6;i++)o={
        a:0,b:1,c:2,d:3,e:4,f:5,g:6,h:7,i:8,j:9,
        k:10,l:11,m:12,n:13,o:14,p:15,q:16,r:17,
        s:18,t:19,u:20,v:21,w:22,x:23,y:24,z:25
      };
    break;
    default:return;
  };
  console.log(new Date-t+" <- "+v);
};
</script>

  使用字面量定义显然是快的多的,因此,当我们需要大量拷贝一个现有对象时可以Function或eval定义一个函数,并直接在里面返回一个字面量。 <input type="button" value="for in 拷贝" />
<input type="button" value="JSON.parse" />
<input type="button" value="返回字面量" />
<script>
//现在我们要把o这个对象复制好多次
var o=new Object,s,f;
o.a=0,o.b=1,o.c=2,o.d=3,o.e=4,o.f=5,o.g=6,o.h=7,o.i=8,o.j=9,
o.k=10,o.l=11,o.m=12,o.n=13,o.o=14,o.p=15,o.q=16,o.r=17,
o.s=18,o.t=19,o.u=20,o.v=21,o.w=22,o.x=23,o.y=24,o.z=25;
s=JSON.stringify(o);
f=new Function("return "+s+";");
onclick=function(e){
  var v,x,i,j,t=new Date;
  switch(v=e.target.value){
    case "for in 拷贝":
      for(i=0;i<1E6;i++){
        x=new Object;
        for(j in o)x[i]=o[i];
      };
    break;
    case "JSON.parse":
      for(i=0;i<1E6;i++)x=JSON.parse(s);
    break;
    case "返回字面量":
      for(i=0;i<1E6;i++)x=f();
    break;
    default:return;
  };
  console.log(new Date-t+" <- "+v);
};
</script>

  这里使用了Function构造器,实际上使用eval也一样,所以不要畏惧这些方法,它们有时候对于性能优化很有效。
  字面量相当于把一些琐碎的事情在编译期间就做好了,使用时直接从对象模板中创建对象。虽然ES5中对它的描述是相当于new Object创建对象,但只是要求结果,并不明细过程。即便如此,在目前主流的引擎上字面量形式的对象定义确实比较快。这篇文章只是用一些比较极端的测试来宣传字面量形式定义对象,真正项目中需要完全复制对象的情况并不多见,而且能用原型继承直接搞定的就不必这么大费周章的去复制。
网名:
54.226.58.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^