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应该怎样学
Apr 16 Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
jquery构造器的实现代码小结
May 16 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
JavaScript 数组详解
Oct 10 Javascript
angular实现商品筛选功能
Feb 01 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
详解node nvm进行node多版本管理
2017/10/21 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
Selenium的使用详解
2018/10/19 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
css3学习心得分享
2013/08/19 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
如何写好升职自荐信
2014/01/06 职场文书
九年级历史教学反思
2014/01/27 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript