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 相关文章推荐
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
百度地图api如何使用
Aug 03 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 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和oracle数据库性能比较
2006/10/09 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
python数值基础知识浅析
2019/11/19 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
大专应届生个人的自我评价
2013/11/21 职场文书
个人职业及收入证明
2014/10/13 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers