`
bazhuang
  • 浏览: 149620 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

js中创建Object对象的性能分析

阅读更多
在javascript中创建一个对象有以下几种方式,如下:
1、
var obj = new Object();
obj.id=1;
obj.name="test";
obj.callFunc=function(){
	alert("callFunc");
}

2、
var obj = {};
obj.id=1;
obj.name="test";
obj.callFunc=function(){
	alert("callFunc");
}

3、
var obj = {
	id:1,
	name:"test",
	callFunc:function(){
			alert("callFunc");
		}
	};

那这3种方式各自的性能怎样呢,下面通过一段代码进行分析:
  <script>
  var start = new Date();
  for (var i=0;i<100000 ;i++ )
  {
	var obj = new Object();
	obj.id=i;
	obj.name="test";
	obj.callFunc=function(){
		alert("callFunc");
	}
  }
  
  document.write(""+(new Date() - start)+"ms");
  document.write("<br/>");
  
  start = new Date();

  for (var i=0;i<100000 ;i++ )
  {
	var obj = {};
	obj.id=i;
	obj.name="test";
	obj.callFunc=function(){
		alert("callFunc");
	}
  }
  document.write(""+(new Date() - start)+"ms");
  document.write("<br/>");
  

	start = new Date();
  for (var i=0;i<100000 ;i++ )
  {
	var obj = {
	id:i,
	name:"test",
	callFunc:function(){
			alert("callFunc");
		}
	};
  }
  document.write(""+(new Date() - start)+"ms");
  
  </script>

当然这里每次执行的结果有一定的差别,但差别不会很大,我这里某一次运行的结果如下:
1078ms
938ms
812ms
这里可以说,第一种方法创建对象是效率最低的,第二种方式居中,第三种方式最快,但这种效率只有在对象的属性特别多,或者创建的对象特别多的时候才可以看出来。

这个执行效率和对象的多少以及对象属性的多少有关系,代码如下:
   <script>
  var start = new Date();

  for (var i=0;i<5000 ;i++ )
  {
	var obj = {
	id:i,
	name:"test",
	callFunc:function(){
			alert("callFunc");
		}
	,
	callFunc2:function(){
			alert("callFunc2");
		}
	,
	callFunc3:function(){
			alert("callFunc3");
		}
	,
	callFunc4:function(){
			alert("callFunc4");
		}
	}
  }
  document.write(""+(new Date() - start)+"ms");
  document.write("<br/>");
  

	start = new Date();
  for (var i=0;i<10000 ;i++ )
  {
	var obj = {
	id:i,
	name:"test",
	callFunc:function(){
			alert("callFunc");
		}
	};
  }
  document.write(""+(new Date() - start)+"ms");
  
  </script>

140ms
63ms
上面这段代码同样可以看出,虽然都是采用相同的第三种办法来创建对象,但由于第一段代码中的属性有6个(function也算属性的一种),执行5000次,而第二段代码属性为3个,执行10000次,显然第一段代码的效率明显要慢。

在我们自己写js代码的时候,尽量使用var obj = {};这种方式去创建代码,既可以节省空间,也有利于提高性能。还有就是定义尽可能少的属性。
分享到:
评论
1 楼 hax 2008-05-06  
这个性能差异基本可忽略不计。

相关推荐

    在javascript中创建对象的各种模式解析

    在JavaScript中创建对象的各种模式对于掌握这门语言的面向对象编程特性至关重要。JavaScript作为一门具有面向对象特性的脚本语言,虽然没有传统意义上类的概念,但它通过其他方式实现了对象的创建和继承。在...

    JavaScript中的Object对象学习教程

    JavaScript中的Object对象是语言的核心部分,它提供了许多用于操作和管理对象的方法和属性。这篇教程主要探讨了如何使用和理解Object对象。 首先,Object构造函数是创建新对象的关键。当你使用`new Object()`或者...

    JS中Json对象

    ### JS中Json对象 #### JSON概述 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。JSON是基于JavaScript的一个子集,采用完全独立于编程语言的文本...

    javascript中数组、对象

    在JavaScript中,数组和对象是两种非常基础且重要的数据结构,它们被广泛应用于各种场景,如数据存储、逻辑处理和对象表示。这篇文章将深入探讨这两种数据类型,以及相关的操作和工具。 **一、数组** 数组在...

    javascript创建对象的方式(三)

    在JavaScript这门动态类型的编程语言中,创建对象是其核心特性之一。本文将详细探讨三种主要的创建JavaScript对象的方法,并结合“源码”与“工具”的概念,来深入理解这些方式在实际开发中的应用。 一、字面量...

    javascript面向对象创建对象的方式小结.docx

    除了上述原生JavaScript的方法外,还可以借助于第三方库如Base2.js和SimpleJavaScriptInheritance.js等来简化对象的创建过程。这些库提供了更高级的OOP功能,如继承、封装等。 #### 九、总结 不同的创建对象方式...

    浅析在javascript中创建对象的各种模式_.docx

    在JavaScript中,创建对象是面向对象编程的基础。虽然JavaScript没有像其他面向对象语言那样的"类"概念,但它提供了多种创建对象的模式,以满足不同场景的需求。这些模式包括工厂模式、构造函数模式、原型模式以及...

    JAVASCRIPT-使用面向对象的技术创建高级 Web 应用程序

    在深入了解如何使用面向对象的技术创建高级Web应用程序之前,理解JavaScript中的对象是如何工作的至关重要。与C++或C#等语言中的对象概念不同,JavaScript中的对象更像是一个包含字符串键值对的词典。 **示例代码**...

    JavaScript对象创建的九种方式

    JavaScript是Web开发中的核心语言,其对象创建是编程过程中不可或缺的一部分。本文将详细介绍JavaScript中九种常见的对象创建方式,帮助开发者更好地理解和应用这些技术。 1. **标准创建对象模式**: 这是最基础的...

    Object-Oriented JavaScript

    #### 知识点一:面向对象编程在JavaScript中的应用 - **定义**:面向对象编程(Object-Oriented Programming,OOP)是一种编程范式,它将程序设计围绕“对象”进行组织。在JavaScript中,虽然它本身是一种基于原型...

    javascript动态创建对象的属性详解.docx

    通过本文的学习,我们不仅了解了JavaScript中动态创建对象属性的基本方法,还深入了解了`Object.defineProperty()` 的高级用法。这些技能对于任何希望提高JavaScript编程水平的开发者来说都是必不可少的。希望本文能...

    在javascript中创建对象的各种模式解析_.docx

    在JavaScript中,创建对象是面向对象编程的基础。本文主要解析了JavaScript中几种常见的创建对象的模式,包括工厂模式、构造函数模式、原型模式以及它们的组合和动态原型模式。 首先,JavaScript是一门基于原型的...

    【JavaScript源代码】JavaScript中Object、map、weakmap的区别分析.docx

    JavaScript中的Object、Map和WeakMap都是用于数据存储的结构,但在使用场景和功能特性上有着显著的区别。在ECMAScript 6之前,Object是实现键值对存储的主要方式,但存在一些限制,如键只能是字符串或Symbol。随着...

    详细分析Javascript中创建对象的四种方式

    该方法继承自Object对象,用于判断一个属性是属于对象自身还是属于其原型链。 综上所述,JavaScript提供了多种创建对象的方式,每种方式都有其特定的使用场景和优缺点。在实际开发中,需要根据具体需求和对性能、...

    计算对象占用内存空间ObjectSize-master.zip

    "计算对象占用内存空间ObjectSize-master.zip" 提供的工具可能是一个帮助开发者分析和估算对象在内存中占用大小的解决方案。这样的工具对于调试、性能调优以及避免内存泄漏至关重要。 在Java中,对象的内存占用不...

    Dynamic_QML_JS:如何使用Javascript动态创建QML对象的示例

    "Dynamic_QML_JS:如何使用Javascript动态创建QML对象的示例"这个主题,将深入探讨如何在QML中利用JavaScript来动态地创建和管理QML对象。 QML允许开发者通过声明式的语法定义UI组件和它们的属性。然而,当需要在...

    js面向对象 多种创建对象方法小结

    JavaScript是一种基于原型的面向对象编程语言,这意味着对象可以继承自其他对象,并且可以通过多种方式创建...在实际开发中,开发者通常会根据需求选择合适的方法创建对象,或者结合使用多种模式来优化代码结构和性能。

    JavaScript对象经典小册 chm

    3. 构造函数与原型:JavaScript提供构造函数(如Object、Array等)来创建特定类型的对象,并通过原型链实现对象之间的继承。 4. 原始包装类型:JavaScript有三种原始包装类型(Boolean、Number、String),它们提供...

    Qt6 QML Book/JavaScript/创建JS控制台示例源码

    在本文中,我们将深入探讨如何在Qt6 QML中创建一个JavaScript控制台示例,以及相关的编程技术。QML(Query Markup Language)是Qt框架的一部分,用于构建用户界面,而JavaScript则是QML中的主要脚本语言,用于实现...

Global site tag (gtag.js) - Google Analytics