由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 面向对象继承
Nov 26 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 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
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
js 幻灯片的实现
2011/12/06 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
angular.element方法汇总
2015/01/07 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
jstree的简单实例
2016/12/01 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
详解JS模块导入导出
2017/12/20 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
门卫岗位安全职责
2013/12/13 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
创建文明学校实施方案
2014/03/11 职场文书
青春寄语大全
2014/04/09 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
安全环保演讲稿
2014/08/28 职场文书
股权转让协议书
2014/12/07 职场文书
学术会议通知范文
2015/04/15 职场文书
参加招聘会后的感想
2015/08/10 职场文书
单位提档介绍信
2015/10/22 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫
Promise静态四兄弟实现示例详解
2022/07/07 Javascript