浅谈Javascript面向对象编程


Posted in Javascript onNovember 15, 2011

在JS中充分使用面向对象设计思想,可以极大限度的提升代码重用、降低模块间的偶合、更好的逻辑分层与并行开发。下面分几个步骤简单谈下我的理解。

一、数据类型与包装类

包装类 …… 类型名 …… 常见值 …… 分类

Number …… number …… 123.123 …… 基本数据类型

Boolean …… Boolean …… true、false …… 基本数据类型

String …… string …… “hello world!” …… 基本数据类型

Object …… object …… {}、[] …… 复合数据类型

Function …… function …… function(){} …… 特殊类型

无 …… undefined …… undefined、未定义 …… 小数据类型

无 …… null …… null …… 小数据类型

内置类型与本文关系不大,不列出。

二、引用类型与值类型

引用类型:object function

值类型:number、boolean、string、null、undefined

三、new function(构造器)与prototype(原型)

关于prototype的设计模式就不多说了,网上很多介绍,以一个例子介绍一下js中使用new构造对象的过程。

function classname(){this.id=0;} var v=new classname();

当使用function构造对象时,进行以下流程:

1、 查找classname的prototype,并进行浅拷贝。

2、 绑定this指针到拷贝来的对象。

3、 将this.constructor属性设置为classname。

[注:其实classname.prototype.constructor的值也被设置为classname,第六部分会说明]

4、 执行用户{}中的代码。

5、 返回this指针赋予左值v。

四、实现面向对象的三个基本特征

1、 封装

封装这个大家都明白,在js中,重点在于访问权限。在其他原生支持面向对象语言中,一般支持public、protected、private三个关键字来控制访问权限,但在js中,我们只能依靠复杂的作用域关系来控制:

function classname(a){ var uid=a; //uin为模拟private,作用域为{},外部无法使用 
this.getuid=function(){return a;} //为uid提供一个外部只读接口 obj.getuid(); 
this.setuid=function(val){a=val} //为uid提供一个外部可写接口obj.setuid(5); 
this.id=uid; //id为模拟public obj.id 使用 
} 
classname.prototype.func=function(){}; //模拟public方法 obj.func()调用 
classname.stafunc=function(){}; //模拟静态方法 classname.stafunc()调用 
var obj=new classname(1);

[!]非常需要注意的就是,因为function是引用类型, classname.prototype.func是所有对象共享的一个function对象(每个对象仅存着引用),因此对象规模不大。而使用this.getuid和this.setuid为定义一个function,因此每个对象实例都会存一份,如果放肆使用这种方法,会造成对象规模庞大,影响性能。个人认为模拟private变量的意义不大。

[!]如果有需求真的需要大量使用this.xxx=function(){}这种情况,在function(){}中的this指针与最外的this指针是不同的,最好在类定义的首行加上var _this=this;,这样在this.xxx=function(){}中也可以方便使用绑定的指针。

2、 继承

继承的实现,主要有2种方法:第一种是使用javascript本身的原型模型,通过给prototype赋值并改变其constructor属性来实现继承;第二种方法是不使用prototype,手动实现将父对象的所有属性方法深拷贝到子对象。比如A需要继承B,第一种写法可以:A.prototype=new B();A.prototype.constructor=A; 第二种写法可以写一个递归,或者使用jquery中的方法extend。另外,如果要实现多继承的话,prototype就真的好麻烦了(需要依次多个类,还要建空对象来接),第二种方法就比较简单,依次拷贝即可。一般这种继承为了找父类方便,可以在对象中加个属性,引用父类。

3、 多态

函数重载就不说了,都会,检查参数即可,很灵活。隐藏属性就是直接赋值undefined。需要注意的是,如果是打算继承B类的prototype,一定要建一个空对象来接,否则的话,你给类写方法的话,相当于直接修改了prototype,就算不写方法,你最后修改constructor时也会造成继承链错乱,接个空对象很容易:

function temp(){}; temp.prototype=B; 
var obj=new temp();

这样再让需要继承B.prototype的类继承obj即可,即便修改prototype也不会影响到B。而且也不像继承new B()那样浪费很多空间。

五、深拷贝与浅拷贝

这个和其他语言中没什么区别,浅拷贝就是直接拷贝,遇到引用类型或类类型不再深入。深拷贝则是根据类型判断,进行递归拷贝。

六、prototype.constructor

这个值主要是用于维护继承的原型链。一篇文章已经写的非常详细,请参考:http://bbs.51js.com/thread-84148-1-1.html

七、JS的面向对象开发

由于我不是前台开发人员,见过项目有限,仅谈自己的经验。

我开发过的B/S,常用两种架构,一种是以CGI为主,由后台语言去生成HTML,JS仅仅做一些用户交互,ajax通信等。另外一种是使用MVC,后台语言仅仅生成JSON,View层完全由JS组件在客户端实现。后者一般大量使用面向对象的思想进行编程,将组件封装成类,将JSON传入构造函数,再由控制器或布局组件Add进来。由于组件可以重用,在开发后台管理系统、JS游戏上,效率还是很可观的。

Javascript 相关文章推荐
屏蔽IE弹出"您查看的网页正在试图关闭窗口,是否关闭此窗口"的方法
Dec 31 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
js Html结构转字符串形式显示代码
Nov 15 #Javascript
Js 时间间隔计算的函数(间隔天数)
Nov 15 #Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 #Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 #Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 #Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 #Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 #Javascript
You might like
PHP两种实现无级递归分类的方法
2017/03/02 PHP
php递归函数怎么用才有效
2018/02/24 PHP
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
理解JS事件循环
2016/01/07 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
小程序实现多选框功能
2018/10/30 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
浅谈Python 对象内存占用
2016/07/15 Python
python中关于for循环的碎碎念
2017/06/30 Python
python构建深度神经网络(续)
2018/03/10 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Python中正则表达式的用法总结
2019/02/22 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
英国女士家居服网站:hush
2017/08/09 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
自荐信如何“自荐”
2013/10/24 职场文书
商场中秋节活动方案
2014/02/07 职场文书
小学生秋游活动方案
2014/02/23 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python