老鱼 浅谈javascript面向对象编程


Posted in Javascript onMarch 04, 2010

感叹是为了缓解严肃的气氛并引出今天要讲的话题,”javascript面向对象编程”,接下来,我们围绕面向对象的几大关键字:封装,继承,多态,展开。
封装:javascript中创建对象的模式中,个人认为通过闭包才算的上是真正意义上的封装,所以首先我们先来简单介绍一下闭包,看下面这个例子:

<script type="text/javascript">// <![CDATA[ 
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">// <![CDATA[ 
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">// <![CDATA[ 
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>

可能有人会问,哪种模式好呢?这个怎么说呢?两种方式都有优缺点,结合着用呗!总之一个原则,一定一定不能直接被外部对象访问的东西,就用闭包封装吧。”一定一定”四个字很深奥,不断实践中才能体会真谛!
继承:提到这个的时候,要顺便再补充一句:闭包封装中的一个缺点,不利于子类的派生,所以闭包有风险,封装需谨慎!直观起见,下面例子中创建对象的方式,采用”门户大开型”模式。
在javascript中继承一般分为三种方式:”类式继承”,”原型继承”,”掺元类”。下面简单的介绍一下三类继承方式的原理。
A.类式继承:这个是现在主流框架中常用的继承方式,看下例:
<script type="text/javascript">// <![CDATA[ 
var Name = function(name){ 
this.name = name; 
}; 
Name.prototype.getName = function(){ 
alert(this.name); 
}; 
var Fish = function(name,age){ 
Name.call(this,name); 
this.age = age; 
}; 
Fish.prototype = new Name(); 
Fish.prototype.constructor = Fish; 
Fish.prototype.showInfo = function(){ 
alert(this.age); 
} 
var ioldFish = new Fish("老鱼",27); 
ioldFish.getName(); 
// ]]></script>

上述子类Fish中并没定义getName方法,但是子类Fish的实例对象ioldFish依然调用到了该方法,这是因为子类Fish继承了超类Name中定义的getName方法。解释一下,这里子类Fish的prototype指到了超类的一个实例,在子类Fish中虽然没有申明getName方法,但是根据原型链原理,会向prototype指向的上一级对象中去查找是否有该方法,如果没找到该方法,会一直搜索到最初的原型对象。这其实也就是继承的原理了。这里特别说明一下,Fish.prototype.constructor = Fish;这句,由于默认子类的prototype应该是指向本身的,但是之前把prototype指向到了超类的实例对象,所以在这里要把它设置回来。当然这里可以把相关代码通过一个函数来组织起来,起到伪装extend的作用,这里不再阐述,可以关注本人下篇博文……
B.原型继承,从内存性能上看优于类式继承。
<script type="text/javascript">// <![CDATA[ 
function clone(object){ 
var F = function(){}; 
F.prototype = object; 
return new F(); 
}; 
var Name = { 
name:"who's name", 
showInfo:function(){ 
alert(this.name); 
} 
}; 
var Fish = clone(Name); 
//Fish.name = "老鱼"; 
Fish.showInfo(); 
// ]]></script>

很明显,原型继承核心就是这个clone函数,同样是原型链的原理,不同的是它直接克隆超类,这样的话子类就继承了超类的所有属性和方法.特别说一下,这类继承并不需要创建构造函数,只需要创建一个对象字变量,定义相应的属性和方法,然后在子类中只需要通过圆点”.”符号来引用属性和方法就可以了.
C.掺元类:把一些常用通用性比较大的方法统一封装在一个函数中,然后通过下面这个函数分派给要用到这些方法的类.还可以针对不同的类,选择性的传递需要的方法。
<script type="text/javascript">// <![CDATA[ 
function agument(receveClass,giveClass){ 
if(arguments[2]){ 
var len = arguments.length; 
for(i=2;i<len;i++){ 
receveClass.prototype[arguments[i]] = giveClass.prototype[arguments[i]]; 
} 
} 
else{ 
for(method in giveClass.prototype){ 
if(!receveClass.prototype[method]){ 
receveClass.prototype[method] = giveClass.prototype[method]; 
} 
} 
} 
}; 
var Name = function(){}; 
Name.prototype ={ 
sayLike:function(){ 
alert("i like oldfish"); 
}, 
sayLove:function(){ 
alert("i love oldfish"); 
} 
} 
var Fish = function(){}; 
var ioldFish = new Fish(); 
agument(Fish,Name,"sayLove"); 
ioldFish.sayLove(); 
ioldFish.sayLike(); 
// ]]></script>

多态:个人觉得这个比较抽象,很难言传,所以下面就从重载和覆盖两个方面来简单阐述一下。
重载:上面这个例子中agument函数初始带了两个参数,但是在后面的调用中,agument(Fish,Name,”sayLove”)同样可以带入任意多个参数,javascript的重载,是在函数中由用户自己通过操作arguments这个属性来实现的。
覆盖:这个很简单,就是子类中定义的方法如果与从超类中继承过来的的方法同名,就覆盖这个方法(这里并不是覆盖超类中的方法,注意一下),这里就不累赘了!
最后重点着墨说一下this和执行上下文,在前面举的封装例子中,this都是表示this所在的类的实例化对象本身,但是并不是千篇一律的,打个比方,通过HTML属性定义的事件处理代码,见如下代码:
<script type="text/javascript">// <![CDATA[ 
var Name = function(name) { 
this.name = name; 
this.getName = function () { 
alert(this.name); 
} 
}; 
var ioldFish = new Name("老鱼"), 
btn = document.getElementById('btn'); 
btn.onclick = ioldFish.getName; 
//btn.onclick = function(){ioldFish.getName.call(ioldFish)}; 
// ]]></script>

上例中点了按钮以后弹出框里并没有显示出实例对象的属性,这是因为this的执行上下文已经改变了,他现在所在的上下文应该是input这个HTML标签,但是该标签又不存在getName这个属性,所以自然无法输出这个属性的属性值了!从这个例子我们不难看出:执行上下文是在执行时才确定的,它随时可以变。
当然你可以去掉上面我注释掉的那段代码,通过call改变this的执行上下文,从而获取getName方法。apply方法同样可以实现改变执行上下文的功能,不过在prototype框架中发现了一个更为优美的实现方法bind。看一下这个方法的实现吧,不得不感叹先人的伟大……
Function.prototype.bind = function(obj) { 
var method = this, 
temp = function() { 
return method.apply(obj, arguments); 
}; 
}

相信如果能看明白的话,您已经可以靠这些知识点,去写一个简单的脚本框架了,多多实践,相信不久的将来就能高手进级了!如果没看明白,也不用着急,面向对象本来就有些抽象,多练习练习,应该OK的了,加油……
这篇先写到这吧,下篇文章可以和大家一起探讨一下,javascript的设计模式,敬请期待。
Javascript 相关文章推荐
Bootstrap Chart组件使用教程
Apr 28 Javascript
JS作用域深度解析
Dec 29 Javascript
js实现拖拽功能
Mar 01 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 #Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 #Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 #Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 #Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 #Javascript
JavaScript类和继承 constructor属性
Mar 04 #Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 #Javascript
You might like
php date()日期时间函数详解
2010/05/16 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
js实现简单扫雷
2020/11/27 Javascript
python基础教程之字典操作详解
2014/03/25 Python
github配置使用指南
2014/11/18 Python
用python 制作图片转pdf工具
2015/01/30 Python
python搜索指定目录的方法
2015/04/29 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
python变量的存储原理详解
2019/07/10 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
python 实现图片裁剪小工具
2021/02/02 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
职务说明书范文
2014/05/07 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android