由prototype_1.3.1进入javascript殿堂-类的初探


Posted in Javascript onNovember 06, 2006

还是决定冠上ajax的头衔,毕竟很多人会用这个关键词搜索。虽然我认为这只是个炒作的概念,不过不得不承认ajax叫起来要方便多了。ajax的意思我就不详细解释了。

写这个教程的起因很简单:经过一段时间的ajax学习,有一些体会,并且越发认识到ajax技术的强大,所以决定记录下来,顺便也是对自己思路的整理。

前几年,javascript在一般人眼里,功能还很狭窄,所能做的要么是一些简单的表单验证,要么是许多华而不实的网页特效。随着flash的出现,大家已经不像以前那样热衷于js特效。似乎js能做的事情更加少了。但这时候,ajax的概念冒了出来,以gmail为典型代表的ajax应用受到很多人的关注,ajax一下子成为一种很热门的技术,当javascript和xml,和dom模型结合起来,其所能做的事情常常令人匪夷所思,甚至有些功能已经可以和桌面程序相当。

好了废话就不多说了,现在就从一个javascript的开发框架prototype_1.3.1(下面简称为prototype)开始。我本来是想先介绍一下javascript的高级应用,但怕水平不够,说的没有条理,所以就结合prototype来说,顺便会提及js的语法使用。
下面是框架最前面的两段代码:

var Prototype = {
  Version: '1.3.1',
  emptyFunction: function() {}
}
var Class = {
  create: function() {
    return function() { 
      this.initialize.apply(this, arguments);
    }
  }
}
首先,让我们来看下面两个语法的区别:

var o={};
var f=function(){};

后面一个很容易理解,它等价于function f(){};定义一个函数f。但前面一个就不常见了:这其实是创建一个对象,在{}中可以指定对象的成员,比如上面的Prototype,就是一个对象,有两个成员,第一个是版本号,第二个是一个空方法(函数)。像这种不用定义类,就能直接创建对象的功能可能只有js能做到。后面一种语法其实还有一个功能,就是定义一个类f。如果你在函数体中用了this,那么this后面的变量就是类的成员。
不仅this可以定义类成员,还有一种语法:

function c(){
member1:value,
member2:function(){}
}

这等价于:

function c(){
this.member1=value;
this.member2=function(){};
}

需要注意的是,用前一种办法时,最后一个成员的最后不能加逗号,我想这种语法应该和数组有关。

在js里,函数和类是没有区别的,都可以new,new的作用是把函数体的语句都执行一遍,然后返回一个对象。如果函数里有this,那么this后面的变量会作为对象成员;如果没有,那么new的作用只是返回一个没有任何成员的空对象。所以你用typeof查看一个所谓类的类型时,仍然会返回function。在js里也基本没有类型的概念,所有变量的声明都用var,即使是函数,也是如此。函数,其实也只是一个变量。

说函数是变量,可能很多人不解。但是你试试下面的做法:

function fTest(){
var a=1;
alert(a);
}
alert(fTest);

你会发现显示的是fTest这个函数的函数体,所以我们可以认为,所谓函数,仅仅是js引擎可以解析的一段代码字符串。函数名变量存储的只是这个字符串。说的更准确一点,函数名是一个指针变量,它存储的是这个代码字符串在内存中的位置。这样就不难理解将函数作为参数传递,可以作为值返回了,这是以后会大量使用的技术。因为类也是函数,所以理解了函数,也就理解了类。

虽然在js里函数和类没有区别,但是类的概念却可以方便我们进行程序设计,于是prototype很有创意的创建了一个全局对象Class:

var Class = {
  create: function() {
    return function() { 
      this.initialize.apply(this, arguments);
    }
  }
}

Class是一个全局对象,它的唯一方法就是create,作用返回一个函数,前面已经讲过函数作为返回值的机制,这里不再遨述。返回的函数包括一条语句:

this.initialize.apply(this, arguments);

前面讲过,new一个函数时,会执行函数里的代码,最后返回对象。所以当使用Class.create()创建了一个函数,再new这个返回的函数时,首先会执行这条语句。后面可以看到,这其实是为了调用类的构造函数。

就是这样,Class成为了整个prototype的类型创建模型,并且能很好的把类和函数在代码上区分开来。Class.create()仅仅是返回一个空类,而且它会默认为这个类是具有initialize方法的,所以要使用这个类,至少需要有一个构造函数,这就需要使用到类的继承。类只是一个函数,那么函数怎么继承呢?看起来匪夷所思,javascript能做到这一点,prototype使得实现更为优雅,至于它是怎么做到的,且听下回分解。

Javascript 相关文章推荐
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
一个因@click.stop引发的bug的解决
Jan 08 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
javascript读取xml
Nov 04 #Javascript
用javascript操作xml
Nov 04 #Javascript
一个加密JavaScript的开源工具PACKER2.0.2
Nov 04 #Javascript
破除一些网站复制、右键限制
Nov 04 #Javascript
js计数器代码
Nov 04 #Javascript
Js中sort()方法的用法
Nov 04 #Javascript
取得传值的函数
Oct 27 #Javascript
You might like
一贴学会PHP 新手入门教程
2009/08/03 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
jQuery 使用个人心得
2009/02/26 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
python argparser的具体使用
2019/11/10 Python
python实现宿舍管理系统
2019/11/22 Python
Python集合操作方法详解
2020/02/09 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
五年级语文教学反思
2014/01/30 职场文书
趣味运动会加油词
2015/07/18 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
python接口测试返回数据为字典取值方式
2022/02/12 Python