javascript 面向对象的JavaScript类


Posted in Javascript onMay 04, 2010

在上一节面 JavaScript 面向对象之命名空间 中说了怎么定义JavaScript命名空间,这一节来说下紧接着的一个概念——类。虽然JavaScript中没有class关键字,但作为开发人员我们一定要有这个思想。在C#中类可以分为实例类和静态类,JavaScript亦然。

一,定义实例类: 在上节中我定义了一个cnblogs.news的命名空间,现在就在此命名空间下定义一个名为Article类:

cnblogs.news.Article=function(){ 
var _this=this; 
this.title=null; 
this.content=null; 
this.show=function(){ 
document.write("<h1>"+_this.title+"</h1>"); 
document.write("<p>"+_this.content+"</p>"); 
} 
}

创建对象就和C#一样:
// 实例化一个对象 
var article =new cnblogs.news.Article(); 
// 给对象的属性赋值 
article.title="这是文章标题"; 
article.content="这是文章内容"; 
// 调用对象的方法 
article.show();

二,定义静态类:所谓静态类就是直接调用类的成员,换言之,类的成员是属于类的,不属于对象。同样以Article为例,代码如下:
cnblogs.news.Article={ 
title:"这是文章标题", 
content:"这是文章内容", 
show:function(){ 
document.write("<h1>"+cnblogs.news.Article.title+"</h1>"); 
document.write("<p>"+cnblogs.news.Article.content+"</p>"); 
} 
};

调用方式也和C#类似:
cnblogs.news.Article.show();
到这里或许你已经发现了,所谓JavaScript静态类其实就是一个json对象,恭喜,答对了! ^_^
三,如何选择:
那么何时选择实例类,何时选择静态类呢,就个人经验而言(说得不对敬请斧正刀正,怎么正都可以^_^),开发一些对dom的依赖比较弱,而要求复用型很强的程序,如工具类,插件类,结构,使用静态类;反之如果程序对dom依赖很强,经常有变量传来传去,或者对类的结构造成变化,这时选用实例类。个人比较推崇第一种方案,其代码风格较之第二种更像C#,我想写惯了C#的同学也会这样觉得的,^_^。
作者: 祥叔
Javascript 相关文章推荐
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
如何编写jquery插件
Mar 29 jQuery
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
JavaScript 面向对象之命名空间
May 04 #Javascript
10个实用的脚本代码工具
May 04 #Javascript
利用location.hash实现跨域iframe自适应
May 04 #Javascript
Array.prototype 的泛型应用分析
Apr 30 #Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 #Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 #Javascript
匹配任意字符的正则表达式写法
Apr 29 #Javascript
You might like
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
python图片验证码生成代码
2016/07/02 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
NumPy排序的实现
2020/01/21 Python
童装店创业计划书
2014/01/09 职场文书
网上书店创业计划书
2014/01/12 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
主办会计岗位职责
2014/03/13 职场文书
宣传工作经验材料
2014/06/02 职场文书
2015年消防工作总结
2015/04/24 职场文书
2015年话务员工作总结
2015/04/29 职场文书
详解Flask开发技巧之异常处理
2021/06/15 Python
MongoDB使用场景总结
2022/02/24 MongoDB
CSS的calc函数用法小结
2022/06/25 HTML / CSS