JavaScript的面向对象方法以及差别


Posted in Javascript onMarch 31, 2008

第一种:使用this关键字

function Class1()
{
    this.onclick = function(e)
    {
        for (var i=0; i < 1000; i++)
        {
            var a = new Date();
        }
    } 

使用this.的方法可以很灵活地给对象添加属性和方法,而且和大部分的OOP语言都相似,甚至在运行中都可以添加。

第二种:使用prototype关键字

function clickFunc(e)
{
    for (var i=0; i < 1000; i++)
    {
        var a = new Date();
    }

function Class2()

Class2.prototype.onclick = clickFunc; 

这种用法上来讲就没有第一种显得灵活。不过在一个对象new出来之前,也是一样可以随时添加一个对象的属性和方法。

可是他们并不是相等的,相对来说,我更喜欢第一种,因为第一种方法相对比较集中,比较容易阅读代码。但是在运行的时候,他们运行的效率却差别相当地大。以下让我们看一下测试代码吧:

var total = new Array(); 

function Test1()
{
    var a = new Date();
    for (var i=0; i < 10000; i++)
    {
        var c = new Class1();
        //total.push(c);
    }
    var b = new Date();
    alert(b.getTime()-a.getTime());

function Test2()
{
    var a = new Date();
    for (var i=0; i < 10000; i++)
    {
        var c = new Class2();
        //total.push(c);
    }
    var b = new Date();
    alert(b.getTime()-a.getTime());

第一步作执行时间的测试:发现Test1()需要142ms,而Test2()仅需50ms.发现时间效率上来说,prototype的方法相对this来说,更加高效。 

第二步作内存占用的测试,把total.push(c);这行的注释去掉,之所以要把它们加入到数组里面去,防止创建的时候,对象比较多的时候,没有被引用的对象被GC了。结果发现差距不是一般的大,第一种方法要占用二三十M的内存,而第二种只需要一百多K。

成因推断:
在处理这两种代码的时候,第一种,JS的解析器,给每个对象都创建一个单独的方法,这样增加了内存的开销,同时创建方法的时候,增加了运行时间。第二种,JS的解析器和大部分的OOP编译器一样的,把对象的数据段和方法段分开存储了,对于对象的私有数据,则是每个对象一份,而这些方法,则是放在公共的方法段里,所以可以减少运行时间和内存的开销。

Javascript 相关文章推荐
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 Javascript
二行代码解决全部网页木马
Mar 28 #Javascript
通过 Dom 方法提高 innerHTML 性能
Mar 26 #Javascript
js用图作提交按钮或超连接
Mar 26 #Javascript
利用js对象弹出一个层
Mar 26 #Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 #Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 #Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 #Javascript
You might like
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
Jquery练习之表单验证实现代码
2010/12/14 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
Python实现配置文件备份的方法
2015/07/30 Python
Python+django实现文件上传
2016/01/17 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
Django中的ajax请求
2018/10/19 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
python中metaclass原理与用法详解
2019/06/25 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
Django REST framwork的权限验证实例
2020/04/02 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
回门宴父母答谢词
2014/01/26 职场文书
交通事故代理词范文
2015/05/23 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
Java存储没有重复元素的数组
2022/04/29 Java/Android