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 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
让IE6支持min-width和max-width的方法
Jun 25 Javascript
Javascript 浮点运算的问题分析与解决方法
Aug 27 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 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筛选不存在的图片资源
2015/04/28 PHP
php析构函数的简单使用说明
2015/08/24 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
JavaScript入门基础
2015/08/12 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python探索之修改Python搜索路径
2017/10/25 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
Python单元测试与测试用例简析
2019/11/09 Python
Python实现微信好友的数据分析
2019/12/16 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
高中生的自我鉴定范文
2014/01/24 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
社会实践的活动方案
2014/08/22 职场文书
国庆节慰问信
2015/02/15 职场文书
地震捐款简报
2015/07/21 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers