浅谈javascript面向对象编程
作者:oldfish 来源:Alipay UED 发布时间:2009-03-03 12:04:00
这周心血来潮,翻看了现在比较流行的几个JS脚本框架的底层代码,虽然是走马观花,但也受益良多,感叹先人们的伟大……
感叹是为了缓解严肃的气氛并引出今天要讲的话题,”javascript面向对象编程”,接下来,我们围绕面向对象的几大关键字:封装,继承,多态,展开。
封装:javascript中创建对象的模式中,个人认为通过闭包才算的上是真正意义上的封装,所以首先我们先来简单介绍一下闭包,看下面这个例子:
<script type="text/javascript">
function myInfo(){
var name ="老鱼",age =27;
var myInfo = "my name is" + name + "i am" + age +"years old";
function showInfo(){
alert(myInfo);
}
return showInfo;
}
var oldFish = myInfo();
oldFish();
</script>
是不是很眼熟呢?没错了,这其实就是一个简单的闭包应用了。简单解释一下:上面的函数myInfo中定义的变量,在它的内嵌函数showInfo中是可访问的(这个很好理解),但是当我们把这个内嵌函数的返回引用赋值给一个变量oldFish,这个时候函数showInfo是在myInfo函数体外被调用,但是同样可以访问到定义在函数体内的变量。oh yeah!
总结一下闭包的原理吧:函数是运行在定义他们的作用域中而不是调用他们的作用域中。其实返回一个内嵌函数也是创建闭包最常用的一种方法!
如果觉得上面的解释太抽象的话,那么我们一起重塑上面的函数,看看这样是否层次鲜明一些:
<script type="text/javascript">
var ioldFish = function(name,age){
var name = name,age = age;
var myInfo = "my name is" + name + "i am" + age +"years old";
return{
showInfo:function(){
alert(myInfo);
}
}
}
ioldFish("老鱼",27).showInfo();
</script>
上例中的编码风格是ext yui中比较常见的,公私分明,一目了然。通过闭包,我们可以很方便的把一些不希望被外部直接访问到的东西隐藏起来,你要访问函数内定义的变量,只能通过特定的方法才可以访问的到,直接从外部访问写的挺累,饶了一圈终于转回来了,封装嘛,不就是把不希望被别人看到的东西隐藏起来嘛!哈哈……
上例如果转换成JQ的风格的话,应该如下例所写, 这样的封装模式属于门户大开型模式,里面定义的变量是可以被外部访问到的(下面的例子如果你先实例化一个对象,然后在函数外部访问对象的name或者age属性都是可以读取到的)当然这种模式下我们可以设置一些”潜规则”,让团队开发成员明白哪些变量是私用的,通常我们人为的在私有变量和方法前加下划线”_”,标识警戒讯号!从而实现”封装”!
<script type="text/javascript">
var ioldFish = function(name,age){
return ioldFish.func.init(name,age);
};
ioldFish.func = ioldFish.prototype ={
init:function(name,age){
this.name = name;
this.age = age;
return this;
},
showInfo:function(){
var info = "my name is" + this.name +"i am " +this.age+"years old";
alert(info);
}
};
ioldFish.func.init.prototype = ioldFish.func;
ioldFish(" 老 鱼",27).showInfo();
//var oldFish = new ioldFish("老鱼",27);
//alert(oldFish.name);
</script>
可能有人会问,哪种模式好呢?这个怎么说呢?两种方式都有优缺点,结合着用呗!总之一个原则,一定一定不能直接被外部对象访问的东西,就用闭包封装吧。”一定一定”四个字很深奥,不断实践中才能体会真谛!


猜你喜欢
- 本文实例讲述了Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据。分享给大家供大家参考,具体如下:一、Logistic
- 对联代码,查阅它在xhtml下的表达方式,结果很简单了。这是因为,按照标准来说,我们看到的窗体的滚动条不应该是 body 的,而是 HTML
- 导语提到《俄罗斯方块》(Tetris),那真是几乎无人不知无人不晓。其历史之悠久,可玩性之持久,能手轻轻一挥,吊打一 * 游戏。对于绝大多数小
- 问题描述  最近需要给程序新增功能,用于将旧格式的数据转换为新格式,同时删除旧格式的数据(新旧格式的数据
- 服务器计算数据有时需要大量的时间,使用程序发送一封邮件是一种免费便捷的通知方式,可以让我们及时收到程序中断或者程序运行完成的信息,而不用一直
- 需求:如下图所示实现sql语句SELECT A1,SUM(A2*A3) FROM A GROUP BY A1大家可以自行测试一下,主要需要了
- 1. 内置下载器中间件顺序{'scrapy.downloadermiddlewares.ajaxcrawl.AjaxCrawlMid
- Python是一种开源的编程语言,可用于Web编程、数据科学、人工智能以及许多科学应用。学习Python可以让程序员专注于解决问题,而不是语
- 学习关键语句:vue连接mysql数据库vue项目连接后台数据库配置vue通过node连接MySQL数据库写在前面为了快速学习nodejs制
- 适配竖屏横向尺度,禁止出现横向滚屏常规QVGA机型竖屏状态下,14号字体,单行仅显示13.5个字。资讯频道的新闻短标题要控制在13字以内才能
- 前言我承认我不是一个爱整理桌面的人,因为我觉得乱糟糟的桌面,反而容易找到文件。哈哈,可是最近桌面实在是太乱了,自己都看不下去了,几乎占满了整
- 想要实现的功能空列表中添加数原代码:FitnessBest = []FitnessBest = FitnessBest.appe
- 准备在断网的和联网的机器安装pip,下载地址https://pypi.python.org/pypi/pip在联网的开发机器上安装好需要的包
- 看例子: 数 据表 collect ( id, title ,info ,vtype) 就这4个字段,其中 title 用定长,info 用
- 连接数据库等基础操作请自行解决哈,本篇是重点记录如何改密码。一、查询用户密码:查询用户密码命令:select host, user, aut
- 译者newstart写的简介:Ross Dawson所在的Future Exploration Network于2007年5月发布的web2
- 如下所示:<select id="host_list" name="host_list" mu
- 在项目中,经常会碰到往数据库中导入大量数据,以便利用sql进行数据分析。在导入数据的过程中会碰到一些需要解决的问题,这里结合导入一个大约4G
- session请求过程当第一次访问网站时,Seesion_start()函数就会创建一个唯一的Session ID,并自动通过HTTP的响应
- 像这种不能创建一个.frm 文件的报错好像暗示着操作系统的文件的权限错误或者其它原因,但实际上,这些都不是的,事实上,这个mysql报错已经