由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如何生成xmlhttp
Dec 16 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 Javascript
原生JS实现飞机大战小游戏
Jun 09 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缓冲 output_buffering的使用详解
2013/06/13 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
初步解析Python下的多进程编程
2015/04/28 Python
详解Python自建logging模块
2018/01/29 Python
全面分析Python的优点和缺点
2018/02/07 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
生物制药毕业生自荐信
2013/10/16 职场文书
测绘工程专业个人自我评价
2013/12/01 职场文书
事业单位辞职信范文
2014/01/19 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
防沙治沙典型材料
2014/05/07 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书