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学习笔记9 prototype封装继承
Jan 11 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
webpack4简单入门实例
Sep 06 Javascript
写一个Vue Popup组件
Feb 25 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
vue路由的配置和页面切换详解
Sep 09 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 array_push 数组函数
2009/12/26 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
python 显示数组全部元素的方法
2018/04/19 Python
对python3新增的byte类型详解
2018/12/04 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
机关门卫制度
2014/02/01 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
《实心球》教学反思
2016/02/23 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang