由于js语言自身语法的灵活性,使得在js程序中出现了各种各样的代码风格,但也正因为如此,导致了代码的可读性和可维护性大大降低,特别随着项目的不断更新,js代码的不断增多,到后期维护时甚至连自己写的代码都不知所以然了,因此确定一种好的代码风格是很有必要的。
近两年随着ajax的兴起,js变得越来越受“重用”,js开始在web开发中中充当着非常重要的角色,因此也开始遇到了各种各样的问题。于是很多牛人们就提出了js的面向对象编程方法。
使用面向对象的编程思想实现js代码其实也并不难,实现方法也又多种,比如prototype原型,new object()等方法。前面的每个方法都有其自己的优缺点,但都存在一个问题,那就是对于js变量作用域的控制。如果不能很好控制js变量作用域,就可能导致对象内部变量被外部肆意修改,从而导致程序被破坏,不便于程序的维护,对象的封装特性和程序健壮性都大打折扣。被由于js本身没有很好的对变量范围的定义(public/private等限定符),因此在js的面向对象编程中也就遇到了变量的控制问题,特别是对于对象内部的公有变量在prototype原型方法中都很难实现。
如下面一段程序:
function testCls(a){
this.a=a;
}
testCls.prototype.alertA=function(){
alert(this.a);
}
var test=new testCls(5);
test.alertA(); //弹出5
alert(test.a); //同样弹出5
要在其方法alertA中显示对象的内部公用变量a的值就必须在构造函数中通过this赋值,然后在方法中通过this引用。这样本身是没有什么问题,但这样a变量其实就成了一个全局变量,任何testCls的对象都可以直接引用到a,如上例中通过test.a获取到a的值。但很多时候我们并不希望一些对象变量对外公开,即不允许外部程序访问。这应该如何实现呢?如何才能实现一种更好的面向对象编程方式呢?
当然我们可能都会想到这种方式:
var testCls=function(arg1){
var a=arg1;
var b=10;
var alertB=function(){
alert(b);
}
this.c=5;
this.setA=function(v){
a=v;
};
this.alertA=function(){
alert(a);
};
this.alertB=function(){
alertB();
}
}
var test=new testCls(4);
test.setA(6);
test.alertA();
test.alertB();
这样其实也很好解决了上面提到的问题,但是总又点不雅观,所有变量和方式都混杂在一起看起来很难区分哪些是可以公开访问哪些是不允许公开访问的,哪些是对象的私有变量和公开变量。这样在可读性上就有点差强人意了,我们可以去寻找一种更为雅观的实现方式。
其实只要利用js的闭包特性这个问题就很好搞定了,这也是俺从ext的源码中学习到的。
示例代码如下:
var testCls=function(arg1){
//对象内部公有变量,不允许外部访问
var a=arg1;
var b=10;
var alertB=function(){
alert(b);
}
//外部可访问区域
return {
c:5,
setA:function(v){
a=v;
},
alertA:function(){
alert(a);
},
alertB:function(){
alertB();
}
}
};
var test=new testCls(4);
test.setA(6);
test.alertA();
test.alertB();
同样的实现上面的功能,而且将对象私有变量和公有变量完全分开区域,一目了然,很容易区分出哪些是私有变量哪些是公有变量,这样程序的可读性就得到了大大的提高,而且对对象变量也得到了很好的控制。
如此优美的实现方法,真的让我们不得不叹服js的伟大,当然也要赞一下Extjs的开发者们。
分享到:
相关推荐
面向对象概念(对象封装,各种继承,闭包原理,this作用域等)介绍清晰易懂
深度讲解我所理解的this,闭包,原型链,继承及面向对象
当今 JavaScript 大行其道,各种应用...要掌握好 JavaScript,首先一点是必须摒弃一些其他高级语言如 Java、C# 等类式面向对象思维的干扰,全面地从函数式语言的角度理解 JavaScript 原型式面向对象的特点。把握好这一
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现 深入理解JavaScript系列(19):求值策略 深入理解JavaScript系列(20):《你真懂JavaScript吗?》答案详解 深入理解JavaScript系列(21):S.O.L....
要掌握好JavaScript,首先一点是必须摒弃一些其他高级语言如Java、C#等类式面向对象思维的干扰,全面地从函数式语言的角度理解JavaScript原型式面向对象的特点。当今JavaScript大行其道,各种应用对其依赖日深。web...
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现 深入理解JavaScript系列(19):求值策略 深入理解JavaScript系列(20):《你真懂JavaScript吗 》答案详解 深入理解JavaScript系列(21):S O L I...
最近因为做了一个项目,其中涉及到了js私有方法,这个概念在其语言里面是很常见的,很多语言都有private这个关键字,只要在一个类的前面加上private就表示申明了一个私有方法,但是javascript在面向对象的方面没有...
我同样也是个javascript新手,怎么说呢,先学的jquery,精通之后发现了javascript的重要性,再回过头来学javascript面向对象编程
JS 闭包属于面向对象的一个重要知识点,特此本人又开始了一段说走就走的旅程。 闭包就是外层函数的作用域(AO)对象被内层函数所引用,无法被释放。 上面那句话听起来可能不是很理解,本人在之前写过一篇Python 闭包...
9-28 4 javascript面向对象编程 9-28 5 javascript对象存在形式 9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程回顾 9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽...
javascript高级话题(面向对象,作用域,闭包,设计模式等) node核心内置类库(事件,流,文件,网络等) node高级话题(异步,部署,性能调优,异常调试等) 常用知名第三方类库(Async, Express等) 其它相关后端常用技术...
9-28 4 javascript面向对象编程 9-28 5 javascript对象存在形式 9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程回顾 9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽...
该文档是根据博客园汤姆大叔的深入理解JavaScript系列(http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html)博文整理而成,主要内容包括: 1.编写高质量JavaScript代码的基本要点 2.揭秘命名函数...
将JavaScript的内部工作原理模型与动手编程挑战相结合, 对回调和高阶函数,闭包,异步JavaScript和面向对象JavaScript有深入的了解! --适用于具有JavaScript的基础知识到中级知识的开发人员,他们希望将对基础...
9-28 4 javascript面向对象编程 9-28 5 javascript对象存在形式 9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程回顾 9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽...
9-28 4 javascript面向对象编程 9-28 5 javascript对象存在形式 9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程回顾 9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽...
9-28 4 javascript面向对象编程 9-28 5 javascript对象存在形式 9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程回顾 9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽...
从颇具深度的javascript语言基础到作用域(链),从引用类型到面向对象编程,从极其灵活的匿名函数到闭包的内部机制,从浏览器对象模型(bom)、文档对象模型(dom)到基于事件的web脚本设计,从xml(fax)到ajax及json,从...