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 相关文章推荐
javascript 可以拖动的DIV(二)
Jun 26 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
小程序云开发获取不到数据库记录的解决方法
May 18 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
php 结果集的分页实现代码
2009/03/10 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
接收键盘指令的脚本
2006/06/26 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Python paramiko模块的使用示例
2018/04/11 Python
python实现简易内存监控
2018/06/21 Python
Python中的heapq模块源码详析
2019/01/08 Python
基于python实现KNN分类算法
2020/04/23 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
应届生财务管理求职信
2013/11/06 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL