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 相关文章推荐
php与js的区别是什么
Aug 05 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
小程序实现搜索框功能
Mar 26 Javascript
gojs实现蚂蚁线动画效果
Feb 18 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
php文件上传的简单实例
2013/10/19 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
js实现随机点名功能
2020/12/23 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
通过C++学习Python
2015/01/20 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
python的Jenkins接口调用方式
2020/05/12 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
司机职责范本
2014/03/08 职场文书
政府个人对照检查材料
2014/08/28 职场文书
心理健康教育主题班会
2015/08/13 职场文书
2016年教师节慰问信
2015/12/01 职场文书