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 相关文章推荐
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
BootStrap selectpicker
Jun 20 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
二行代码解决全部网页木马
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
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
php中session定期自动清理的方法
2015/11/12 PHP
javascript 实现 原路返回
2015/01/21 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
python中的函数用法入门教程
2014/09/02 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Python os模块常用方法和属性总结
2020/02/20 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
工程专业毕业生自荐信范文
2013/12/25 职场文书
校园招聘策划书
2014/01/09 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android
sql注入报错之注入原理实例解析
2022/06/10 MySQL