javascript 面向对象编程基础:封装


Posted in Javascript onAugust 21, 2009

很长一段时间以来(这里本人要幸灾乐祸地说),js是“一种点缀的作用,完成很有限的功能,诸如表单验证之类,其语言本身也一直被当作过程化的语言使用,很难完成复杂的功能。”。但是(这里本人要苦大仇深、痛心疾首地说),“而Ajax的出现使得复杂脚本成为必需的组成部分,这就对 JavaScript 程序设计提出了新的要求,很多Ajax应用开始利用JavaScript面向对象的性质进行开发,使逻辑更加清晰。事实上,JavaScript 提供了完善的机制来实现面向对象的开发思想。”。额的神啊,本来就不想学不敢学的,现在不得不硬着头皮学了。
这里关于对象就废话这么多了。我们都知道面向对象编程的三个主要特点是:封装、继承和多态。下面就围绕着这三个特点,记录一些学习心得。
好的,先从封装性开始介绍,众所周知,对象是封装的最基本单位。封装防止了程序相互依赖性而带来的变动影响。面向对象的封装比传统语言的封装更为清晰、更为有力。Code is cheap.来看简单的代码:

// 定义函数的方式定义类
function class1() {
// 类成员的定义及构造函数
// 这里class1 既是一个函数也是一个类。作为函数,它可以理解为类的构造函数, 负责初始化的工作。
}

// 使用new操作符获得一个类的实例
var obj = new class1();
/* 抛开类的概念,从代码的形式上来看,class1 就是一个函数,那么是不是所有的函数都可以用new来操作呢?答案是肯定的。
在JavaScript 中,函数和类就是一个概念,当new 一个函数时,就会返回一个对象。如果这个函数中没有初始化类成员,那就会返回一个空的对象。
事实上,当new一个函数时,这个函数就是所代表类的构造函数,其中的所有代码都可以看作为了初始化一个对象而工作。用于表示类的函数也称之为构造器。
在JavaScript 中,每个对象可以看作是多个属性(方法)的集合
*/

function test() {
alert( typeof (obj));
}

上面的代码定义了一个类class1,这就是js中简单的封装,下面我们看js如何定义“静态类”,

function class1() { // 构造函数
}
// 静态属性
class1.staticProperty = " test " ;
// 静态方法
class1.staticMethod = function () {
alert(class1.staticProperty);
}

function test() {
// 调用静态方法
class1.staticMethod();
alert( typeof (class1));

}

接着看“抽象类”:

/*
在传统面向对象语言中,抽象类中的虚方法必须先被声明,但可以在其他方法中被调用。
而在JavaScript 中,虚方法就可以看 该类中没有定义的方法,但已经通过this 指针使用了。
和传统面向对象不同的是,这里虚方法不需经过声明,而直接使用了。这些方法将在派生类
中实现
*/

// 定义extend 方法
Object.extend = function (destination, source) {
for (property in source) {
destination[property] = source[property];
}
return destination;
}
Object.prototype.extend = function (object) {
return Object.extend.apply( this , [ this , object]);
}
// 定义一个抽象基类base,无构造函数
function base() { }
base.prototype = {
initialize: function () {
this .oninit(); // 调用了一个虚方法
}
}
// 定义class1
function class1() {
// 构造函数
}
// 让class1继承于base 并实现其中的oninit方法
class1.prototype = ( new base()).extend({
oninit: function () { // 实现抽象基类中的oninit 虚方法
// oninit 函数的实现
}
});

我们看到,上面“让class1继承于base 并实现其中的oninit方法时”,使用了“继承”的概念,请留意。再来看一下执行的效果:

function test() {
var obj = new class1();
obj.oninit = function () { alert( " test " ); }
obj.oninit();
}

Javascript 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 #Javascript
javascript 自定义事件初探
Aug 21 #Javascript
IE 下的只读 innerHTML
Aug 21 #Javascript
JS 控制CSS样式表
Aug 20 #Javascript
JS获取父节点方法
Aug 20 #Javascript
javascript 数组排序函数
Aug 20 #Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 #Javascript
You might like
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
兴趣小组活动总结
2014/05/05 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
个人总结格式范文
2015/03/09 职场文书
酒店员工管理制度
2015/08/05 职场文书
世界文化遗产导游词
2019/08/07 职场文书