浅谈javascript 面向对象编程


Posted in Javascript onOctober 28, 2009

感叹是为了缓解严肃的气氛并引出今天要讲的话题,”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>

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

B.原型继承,从内存性能上看优于类式继承。
<script type="text/javascript"> 
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"> 
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"> 
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 相关文章推荐
JavaScript脚本性能优化注意事项
Nov 18 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
简单的渐变轮播插件
Jan 12 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
小议javascript 设计模式 推荐
Oct 28 #Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 #Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 #Javascript
JavaScript 组件之旅(二)编码实现和算法
Oct 28 #Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 #Javascript
js 数组实现一个类似ruby的迭代器
Oct 27 #Javascript
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 #Javascript
You might like
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
mac下安装nginx和php
2013/11/04 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
python实现银行账户系统
2021/02/22 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
毕业留言寄语大全
2014/04/10 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
埃及王子观后感
2015/06/16 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书