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 相关文章推荐
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
js切换div css注意的细节
Dec 10 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
javascript数组去重方法分析
Dec 15 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 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.ini 中文版
2006/10/28 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php 获取本地IP代码
2013/06/23 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
JavaScript高级程序设计
2006/12/29 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
基于Django实现日志记录报错信息
2019/12/17 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
安全教育感言
2014/03/04 职场文书
教师求职自荐信
2014/03/09 职场文书
材料员岗位职责范本
2015/04/11 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
教你利用python实现企业微信发送消息
2021/05/23 Python
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android