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 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
javascript 节点排序 2
Jan 31 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
js实现购物车功能
Jun 12 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
0基础学习前端开发的一些建议
Jul 14 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即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
分享10段PHP常用代码
2015/11/11 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中threading模块join函数用法实例分析
2015/06/04 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
优秀社区干部事迹材料
2014/02/03 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
整改报告格式
2014/11/06 职场文书
大学军训通讯稿
2015/07/18 职场文书
高中同学会致辞
2015/08/01 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android