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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
五段实用的js高级技巧
Dec 20 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 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
初品cakephp 入门基础
2012/02/16 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
js表头排序实现方法
2015/01/16 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
微信小程序签到功能
2018/10/31 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
django从后台返回html代码的实例
2020/03/11 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
python如何查看网页代码
2020/06/07 Python
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
税务会计岗位职责
2014/02/18 职场文书
网络营销策划方案
2014/06/04 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
环卫个人总结
2015/03/03 职场文书
安全生产会议制度
2015/08/06 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书