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 弹出层组件(升级版)
May 12 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
详解JavaScript原型与原型链
Nov 16 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中exec函数和shell_exec函数的区别
2014/08/20 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
详解JS模块导入导出
2017/12/20 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
python PyTorch预训练示例
2018/02/11 Python
python pandas模块基础学习详解
2019/07/03 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
python3 enum模块的应用实例详解
2019/08/12 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
法律专业实习鉴定
2013/12/22 职场文书
家长会演讲稿范文
2014/01/10 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
《日月潭》教学反思
2016/02/20 职场文书