JavaScript面向对象之体会[总结]


Posted in Javascript onNovember 13, 2008

谈JavaScript的面向对象设计有点牵强,毕竟JavaScript语言本身没有高级语言严谨。看这篇文章之前,希望大家了解c++、java、c#等高级语言,有面向对象编程的基础知识。
1.类的定义:
function ClassName(){
}
大家可以发现类的定义形式是和函数是一样的。
其实函数和类只有在使用的时候才能分辨出来,比如我们在一个页面中分别使用他们:
<script language="javascript">
function A(){
alert('hello');
}

//A作为函数来使用
A();

//A作为类来使用,从类A派生出一个obj对象
var obj=new A();
</script>

2.类的成员:
function ClassName(){
//定义公有变量
this.property1=0;
//定义公有方法
this.method1=function(){
//判断this.a是否赋值
if(this.a != undefined)
alert(this.a);
}

//另外一种方法的定义形式
this.method3=funcA;

//定义私有成员
var pram1=1;
var method2=function(){
alert('');
}
}
//funcA是方法method3的处理函数
function funcA(){
alert('');
}
上面的代码慢慢来给大家解释:
有this开头的都是类的成员,而且都是公有(public)的。
比如:property1是类的属性、method1是类的方法;
类的成员不需要使用var来定义,没有使用this前缀的都是私有变量。
比如:pram1是私有变量,method2是私有方法;
类的属性可以不在类中定义,不要初始化的属性可以不定义,在其他地方仍可以调用;
比如:在method1里面要输出a属性,在整个类里面就没有定义a属性,我们在创建对象的时候可以给它赋值。
var obj=new ClassName()
obj.a="hello javascript";
obj.method1();
类的方法可以通过this.method=function(){}来定义,比如method1方法;
也可以通过this.method=funcName来定义,将方法指定让某个函数来处理,比如method3;

3.类的继承:
function classA(){
this.property1='hello';
this.method1=function (){
alert(this.property1);
}
}

function classB(){
}
//继承classA
classB.prototype=new classA();

//给classB添加PI属性
classB.prototype.PI=3.1415926;
//给classB添加showPI方法
classB.prototype.showPI=function(){
alert(this.PI);
}
通过使用prototype对象,将类classA的实例赋值给prototype对象,从而classB继承了classA的所有成员;
比如:classB.prototype=new classA();
同时也可以通过prototype在类外给类从新添加成员(这个是别的高级语言所没有的功能);
比如:classB.prototype.PI和classB.prototype.showPI

4.类方法的重载:
类方法的重载在类的构造函数中使用的比较多,比如:类中有两个同名的方法而不同参数或不同参数类型。JavaScript从形式上来说不支持类方法重载,我们可以通过它的arguments属性来完成对类方法的重载:
function classA(){
//获取参数个数
//注意this.arguments.length是错误的
var num=classA.arguments.length;

this.method1=function(){
if(num==0){
alert(0);
}
if(num==1){
alert(1);
}
}
}
类或函数名的arguments属性返回一个数组包含所有参数;
比如:classA.arguments.length可以获取参数的个数,classA.arguments[0]获取第一个参数的值
根据需要,通过获取参数个数或参数值,从而同一个函数或类具有了不同的功能,比如:
var obj= new classA();
obj.method1();//输出了0
var obj1= new classA(5);
obj1.method1();//输出了1

5.对象的定义:
//对象是类的实例,定义一个类,作为一个对象的模板
function A(){
this.a=1;
this.b=2;
this.add=function(){
return this.a+this.b;
}
}
//定义一个对象
var obj=new A();
//赋值类属性
obj.a=5;
obj.b=6;
//调用类方法
var sum=obj.add();

另外一种定义方法:
var obj={
a:1,
b:2,
add:function(){
return this.a + this.b;
}
}

这种方法定义的对象,把其类的结构也一起定义了,适合只使用一次的类
定义属性和方法的时候不需要使用this关键字,":"后直接赋值即可
但是方法中使用属性,需要使用this关键字

本文只是本人个人的经验和理解,估计我写的和一些书上有些不一样,相信看了之后一定能很快理解。此文章只起到抛砖引玉之作用,具体的项目需求还要具体对待。涉及所有例子均亲自调试无误,如有错误请指正。

Javascript 相关文章推荐
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
js option删除代码集合
Nov 12 #Javascript
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 #Javascript
javascript显示选择目录对话框的代码
Nov 10 #Javascript
JavaScript XML实现两级级联下拉列表
Nov 10 #Javascript
js wmp操作代码小结(音乐连播功能)
Nov 08 #Javascript
js 目录列举函数
Nov 06 #Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 #Javascript
You might like
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
php使用fullcalendar日历插件详解
2019/03/06 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
React之PureComponent的使用作用
2018/07/10 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
python 模拟登录B站的示例代码
2020/12/15 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
教师个人成长总结
2015/02/11 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
如何解决php-fpm启动不了问题
2021/11/17 PHP
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js