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高亮效果的二种实现方法
Sep 14 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
二行代码解决全部网页木马
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多维数组的深度的方法
2014/01/07 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
js实现微信分享代码
2020/10/11 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
python处理圆角图片、圆形图片的例子
2014/04/25 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
《傅雷家书》教学反思
2014/04/20 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
2015学校年度工作总结
2015/05/11 职场文书
项目备案申请报告
2015/05/15 职场文书
尼克胡哲观后感
2015/06/08 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android