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自执行函数的几种不同写法的比较
Aug 16 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Django web框架使用url path name详解
2019/04/29 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
Python with语句和过程抽取思想
2019/12/23 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
ktv收银员岗位职责
2013/12/16 职场文书
租房协议书范文
2014/08/20 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP