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的gzip静态压缩方法
Jan 05 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
node.js中express-session配置项详解
May 31 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
webstorm+vue初始化项目的方法
Oct 18 Javascript
vue中nextTick用法实例
Sep 11 Javascript
Node.js 深度调试方法解析
Jul 28 Javascript
JavaScript分页组件使用方法详解
Jul 26 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
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
javascript实现颜色渐变的方法
2013/10/30 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
js模拟微博发布消息
2017/02/23 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python中条件判断语句的简单使用方法
2015/08/21 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
序列化Python对象的方法
2020/08/01 Python
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
毕业论文评语大全
2014/04/29 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
2014年市场部工作总结
2014/11/25 职场文书
小学教研工作总结2015
2015/05/13 职场文书
晚会开幕词范文
2016/03/04 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
PyTorch device与cuda.device用法
2022/04/03 Python