JS面向对象编程浅析


Posted in Javascript onAugust 28, 2011

在AJAX兴起以前,很多人写JS可以说都是毫无章法可言的,基本上是想到什么就写什么,就是一个接一个的函数function,遇到重复的还得copy,如果一不小心函数重名了,还真不知道从何开始查找错误,因为大家总是用面向过程的编程思想来写JS代码,而且也由于网络上充斥了太多小“巧”的JS代码段,很多都是随意而为,很不规范,这也就造成了大家对JS的“误解”,一味的认为它就是一个辅助的小东东,而不适合做大的东西开发。但是自从AJAX兴起后,大量的JS代码编写要求人们具备像写JAVA类似的代码一样,能够面向对象进行开发。

所以下面就结合我自己的体会和所学习的东东和大家一起来学习在JS中如何使用面向对象的编程。其实使用JS进行面向对象开发也不是很难的事情,因为在JS中每一个function就是一个对象,比如如下一个函数:

function HelloWorld() 
{ 
alert('hello world!'); 
}

那么我们在使用的时候就可以把它当成一个对象来使用,比如使用如下的测试函数:
function _test() 
{ 
var obj = new HelloWorld(); 
}

那么在调用_test方法后就会弹出hello world!的提示框,也就是调用了HelloWorld()对象(函数)。在这里HelloWorld这个对象没有任何属性和方法,它只有一个构造方法HelloWorld(),我们可以把它想象成JAVA中的一个没有任何属性和方法的类,当使用new进行对象创建的时候,就调用了它的构造方法。这也是我们最简单的对象了,当然了,一个对象肯定是要赋予它属性和方法的,在JS中我们使用prototype原型关键字进行赋值,比如我要给HelloWorld对象增加一个sayHello方法和一个name属性,那么就可以这样添加:
HelloWorld.prototype = { 
name : 'JavaScript', 
sayHello : function() { 
alert(this.name); 
} 
}

那么就可以为HelloWorld添加了一个name属性和sayHello方法,我们再改一下_test方法,如下:
function _test() 
{ 
var obj = new HelloWorld(); 
obj.sayHello(); 
}

那么调用_test方法后就会先后打印hello wordl!和JavaScript(一个是构造方法中的alert,一个是sayHello方法中的alert)。注意sayHello方法中的alert引用了this关键字,该关键字表示的就是HelloWorld对象,即默认指向该对象,和JAVA中的this关键字一样。

对于向一个对象添加实例方法和属性,我们可以采用上述的方式,即使用prototype关键字进行赋值,格式如下:

对象名称.prototype = { 
属性一 : 属性值, 
属性二 : 属性值, 
方法一 : function(参数列表) { 
方法体; 
}, 
方法二 : function(参数列表) { 
方法体; 
} 
}

可以按照如上方式对一个对象进行多个属性和方法的定义,这样在new一个对象后,就可以使用实例名称.属性或方法来获取属性或执行方法了。

在上面的方法中,大家不知道发现没有对象的属性是可以直接访问的,比如访问HelloWorld对象的name属性就可以使用obj.name直接获取。这就好比我们JAVA中的公有属性了,而且我们还可以直接对name属性进行赋值操作。所以现在有一个问题了,我们如何给一个对象赋一个私有成员变量呢?那我们就可能要改一下HelloWorld类的声明方式了,不使用prototype进行类的属性和方法声明,而是直接使用内嵌函数和属性进行声明,修改的HelloWorld如下,我们命名为HelloWorld2:

function HelloWorld2() 
{ 
var privateProp = 'hello world 2!'; 
this.method = function() { 
alert(privateProp); 
} 
}

看到HelloWorld2的类申明方式了没?是直接在函数内部进行了函数嵌套申明,而且我们还设置了一个局部变量privateProp,即我们的私有成员变量,该变量只能被HelloWorld2内部的函数进行访问,外部访问是不允许的,这样我们就可以通过使用变量的作用域来巧妙的设置类的私有变量了。我们应用如下:
function _test2() 
{ 
var obj2 = new HelloWorld2(); 
obj2.method(); // 调用该方法将打印'hello world 2! 
alert(obj2.privateProp); // 将打印undefined 
}

上面所说的都是如何定义一个类,以为如何为一个类定义属性和方法,由于采用prototype方式进行定义清晰明了,所以一般都是使用该方式进行类的定义,而且现在很多AJAX框架中都使用了类似的类声明方式。而且类的私有成员变量却只能在类的构造方式中的函数进行访问,这样类的prototype声明的方法就不能访问该私有成员变量了,而且可读性方面也没有prototype方式好。

好了,上面所说的都是定义一个类的实例方法和属性。在JAVA中类有实例方法和属性与类方法和属性之分。所谓类属性和方法就是该类的所有实例都只维护一份类属性和类方法的副本,而不是每个实例都维护一套,这和实例属性和实例方法是不一样的。那么在JS中如何为一个类定义静态类方法和类属性呢?我们可以直接为类添加静态属性和静态方法,比如为HelloWorld类添加一个age的静态属性和一个hello的静态方法,那么声明如下:

HelloWorld.age = 22; 
HelloWorld.hello = function() { 
alert(HelloWorld.age); 
}

那么这样就为类HelloWorld声明了静态属性age和静态方法hello了。在使用的时候就直接使用类名进行访问了,但是不能使用实例进行访问,这点与JAVA中的是一致的,测试如下:
function _test() 
{ 
var obj = new HelloWorld(); 
obj.sayHello(); // 正确,实例方法,可以通过实例进行访问 
HelloWorld.hello(); // 正确,静态方法,通过类名进行直接访问 
obj.hello(); // 错误,不能通过实例访问静态方法。会报JS错误! 
}

通过以上的说明,相信大家对JS进行面向对象编程有了一定的了解,而且也一定蠢蠢欲动了吧,呵呵,大家不妨试试(提示:以上代码全部通过测试!)
Javascript 相关文章推荐
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 #Javascript
JS target与currentTarget区别说明
Aug 28 #Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 #Javascript
range 标准化之获取
Aug 28 #Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 #Javascript
js中设置元素class的三种方法小结
Aug 28 #Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 #Javascript
You might like
在数据量大(超过10万)的情况下
2007/01/15 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
smarty简单分页的实现方法
2014/10/27 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
Python计算两个日期相差天数的方法示例
2017/05/23 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
英国办公用品商店:Office Outlet
2018/04/04 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
公关关系专员的自我评价分享
2013/11/20 职场文书
自我评价是什么
2014/01/04 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
我为自己代言广告词
2014/03/18 职场文书
法学专业求职信
2014/07/15 职场文书
工程安全生产协议书
2014/11/21 职场文书
安全先进个人材料
2014/12/29 职场文书
幼儿园教师求职信
2015/03/20 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
Golang日志包的使用
2022/04/20 Golang