全书配套课件:Javascript程序设计教程.ppt

上传人(卖家):三亚风情 文档编号:3198963 上传时间:2022-08-01 格式:PPT 页数:604 大小:9.52MB
下载 相关 举报
全书配套课件:Javascript程序设计教程.ppt_第1页
第1页 / 共604页
全书配套课件:Javascript程序设计教程.ppt_第2页
第2页 / 共604页
全书配套课件:Javascript程序设计教程.ppt_第3页
第3页 / 共604页
全书配套课件:Javascript程序设计教程.ppt_第4页
第4页 / 共604页
全书配套课件:Javascript程序设计教程.ppt_第5页
第5页 / 共604页
点击查看更多>>
资源描述

1、第1章 JavaScript概述 第1章JavaScript概述 JavaScript是什么1.1 JavaScript的发展历史1.2 JavaScript与Java1.3 JavaScript可以做什么1.4 JavaScript不能做什么1.5 JavaScript与Web标准1.6 JavaScript开发工具1.7 Netscape发明了JavaScript语言,它提供了控制浏览器和在客户端与用户交互的方法,弥补了简单HTML页面的不足。自从诞生之日起,JavaScript经历了多次的演化,我们将在本章中介绍JavaScript的演化过程。在本章中,我们还将讨论JavaScript是

2、什么、它可以做什么、它不能做什么、它与Web标准之间的关系,以及JavaScript的相关开发工具。1.1 JavaScript1.1 JavaScript是什么是什么 vaScript语言是一门解释型的脚本语言,在Web开发中通常应用它来增强网页与应用程序间的交互。Netscape公司首先在Netscape Navigator浏览器中实现了JavaScript,随后其他的浏览器也相继推出了各自版本的JavaScript,并且与标准化组织ECMA一起制定了ECMAScript语言规范。目前,ECMAScript第3版是ECMAScript的最新版本,也是JavaScript的工业标准。Java

3、Script通常内嵌在HTML页面中运行,与页面同时被浏览器加载和运行,在HTML页面中使用标签引入JavaScript脚本。HTML Sample Page alert(你好,JavaScript!);你好,JavaScript!图图1-1 简单简单JavaScript应用示例应用示例 除了直接在标签内编写JavaScript脚本之外,还可以使用其src属性导入外部的JavaScript脚本文件,将以上示例中的标签部分修改如下:其中hello.js是外部的JavaScript脚本,其内容为:alert(你好,JavaScript!);页面运行的结果与图1-1中相同。这里需要特别指出的是:对于

4、大多数HTML标签来说,如果标签内部为空,例如:可以简写为:在XML文件的编写中同样也可以采取类似的简写方式,但对于标签来说,这种简写方式是不允许的。以 下 的 代 码 是 错 误 的,相 应 的JavaScript脚本将不会被正确的导入:1.2 JavaScript的发展历史 1.2.1 Netscape Navigator 网景公司(Netscape)在其出品的浏览器软件Netscape Navigator 2.0中发布了JavaScript的1.0版本。推出JavaScript 1.0的主要目的是为了实现在客户端验证用户输入的信息,从而减少不必要的等待时间。1.2.2 Microsoft

5、 Internet Explorer 微软分别在IE 3.0的早期和后期版本中实现了JScript 1.0和JScript 2.0,相当于Netscape的JavaScript 1.0和JavaScript 1.1;在随后的IE 4.0中还实现了JScript 3.0,相当于Netscape的JavaScript 1.3。1.2.3 Mozilla Firefox Firefox是基于Gecko引擎的浏览器,其内部使用的是名为Spidermonkey的JavaScript解释引擎,它是基于C语言的JavaScript实现,也是目前性能最好的JavaScript引擎。1.2.4 ECMAScri

6、pt标准标准 ECMAScript从诞生至今共经历了3个版本。其中,ECMAScript第1版对JavaScript 1.1的基本特性进行了标准化,并且增加了一些新特性,在ECMAScript第1版中没有对switch语句和正则表达式进行标准化。ECMAScript第2版与第1版没有功能或者特性上的区别,只是增加了说明。与ECMA第1版和第2版相对应的浏览器实现是Netscape 4.x和IE 4.0。ECMAScript目前的最新版本是第3版,在这个版本中增加了switch语句、异常处理和正则表达式等特性,相应的浏览器实现版本是Mozilla、Netscape 6和IE 5.5+。ECMAS

7、cript的第4版正在开发过程中,它对应的将是未来的JavaScript 2.0。1.3 JavaScript1.3 JavaScript与与JavaJava JavaScript的名称给人们造成了很大的误解,很多初学者往往认为它与Java语言存在一些联系。实际上,JavaScript与Java除了名称类似之外,没有任何共同点。JavaScript是一门脚本语言,通过浏览器的脚本引擎解释执行;Java语言则是继C、C+之后的又一种主流开发语言,Java代码将首先编译为字节码(.class文件),然后在Java虚拟机上将字节码编译为二进制代码运行。JavaScript语言绝大多数的应用在浏览器端

8、,而Java语言的应用则相当广泛,从企业级服务器应用到移动设备都可以使用Java语言进行开发。在浏览器端,Java可以用于创建Java小应用程序(Applet)。它可以实现用传统HTML很难实现的动画效果,Applet在大多数情况下是独立运行的,但它允许通过外部脚本进行控制,本书的第12章将介绍如何使用JavaScript脚本操纵Applet。实际上,JavaScript与另一门编程语言C+的关系可能更加密切,浏览器的脚本解释引擎通常是使用C+语言实现的。网页中编写的JavaScript代码最终将通过脚本解释引擎转化为C+的指令执行。1.4 JavaScript1.4 JavaScript可以

9、做什么可以做什么 本书仅讨论浏览器中的JavaScript,它可以完成以下的任务:(1)操纵浏览器对象,例如窗口的打开和关闭,浏览器类型和版本的检测等;(2)操纵DOM树,这是JavaScript运用最为广泛的领域,JavaScript可以实现对网页DOM元素的操作,支持DOM事件处理以及对网页的样式进行编程控制;(3)通过XMLHttpRequest对象与服务器端进行异步通信,这是Ajax技术(Asynchronous JavaScript and XML)的核心;(4)XML编程,JavaScript可以借助于ActiveX控件或者浏览器内置对象完成对XML DOM解析、XPath查询和X

10、SLT转换等工作;(5)与浏览器插件的交互,常见的插件类型包括ActiveX控件、Flash动画和Java Applet。在后续章节中,本书将逐步地向读者介绍如何使用JavaScript完成以上这些任务。1.5 JavaScriptJavaScript不能做什么不能做什么 安全沙箱对JavaScript实现功能的限制包括:(1)不能访问本网站所在域外的脚本和资源;(2)不能操作客户端本地的文件(cookie除外);(3)只能操纵由它自己打开的浏览器窗口;(4)不能将浏览器窗口的尺寸设置得过小或者将窗口移出屏幕可视范围。1.6 JavaScript与Web标准 Web标准不是某一个标准,而是一系

11、列标准的 集 合。网 页 主 要 由 3 部 分 组 成:结 构(Structure)、表现(Presentation)和行为(Behavior)。与之对应的标准也分为3个方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型,如W3C DOM标准、ECMAScript等。JavaScript属于行为的范畴,它遵循了ECMAScript标准。图1-5 定制任务和宏 1.7 JavaScript1.7 JavaScript开发工具开发工具 1.7.1 集成开发环境(IDE)图1-2 Aptana对Ajax开发框架的支持 图1-3 代码提示功能 图1-

12、4 Ajax开发框架帮助文档 1.7.2 调试调试JavaScript 1IE中调试JavaScript 图1-6 启动脚本编辑器 图1-7 启动脚本编辑器 图1-8 IE中调试JavaScript 图1-10 选择脚本调试器类型 图1-9 IE中调试JavaScript2Firefox中调试中调试JavaScript 图1-11 Firebug脚本调试器 小 结 本章对JavaScript的基本概念、发展历史进行了简要介绍,针对JavaScript初学者容易混淆的问题,如JavaScript与Java的关系、JavaScript能做什么、不能做什么等问题进行了解释。Web标准是今后Web开发

13、领域的发展趋势,希望读者从学习JavaScript开始就能够形成基于标准进行编程的意识。本章在最后一小节中对JavaScript的相关开发和调试工具进行了介绍,这些知识是实际应用的一些基本储备,希望读者掌握。第2章 JavaScript基础 JavaScript语法基础语法基础2.1 JavaScript内置对象内置对象2.2 JavaScript语言是一门解释型的脚本语言,其优点之一是比较容易学习和掌握,但是千万不要因此而小看了JavaScript能力,它能够完成许多相当复杂的编程任务。目前,ECMAScript第3版是ECMAScript的最新版本,也是JavaScript的工业标准,本章

14、将基于该标准对JavaScript的基本语法和内置对象特性进行讲解。2.1 JavaScript2.1 JavaScript语法基础语法基础 2.1.1 语句 同许多编程语言一样,语句是组成JavaScript程序的基本单元,每一条JavaScript语句由若干表达式组织在一起,完成一个任务。和Java、C语言类似,JavaScript使用分号“;”表示一条语句的结束;而与Java、C语言不同的是,用分号结束一条语句并不是强制性的要求。例如下面的写法:var a=1;/以分号结尾的JavaScript语句 var b=2/没有分号结尾的JavaScript语句 JavaScript解释器在语法

15、检查方面相对比较宽松,但是在这里我们还是建议开发人员编写JavaScript代码时要尽量保持比较严谨的书写风格,最好使用分号结束语句,这样做有以下几点好处:(1)代码便于阅读,不会导致歧义;(2)在使用一些JavaScript代码压缩和代码混淆工具处理代码时,不会发生错误;(3)保证代码在各种浏览器中均能正确执行,因为某些浏览器的JavaScript解释器要求语句必须以分号作为结束符,否则不能执行。一组大括号“”内的JavaScript语句称为语句块,一个语句块内的语句可以被当作一条语句来处理。与C语言不同,在JavaScript语言中一般的语句块并不代表新的范围。例如下面的JavaScrip

16、t语句块:var v1=20;var v2=40;其中,变量v1和v2在大括号之外同样是有意义的,而在C语言中,类似的变量定义只在语句块的内部有效。此外,在JavaScript语言中函数定义内部声明的变量只在其内部有效,例如:function test()var v1=20;var v2=40;如果在test()函数之外访问变量v1或者v2,会返回undefined错误。2.1.2 注释注释/*多行注释示例 /*嵌套的注释 */多行注释示例*/注释第1行/注释第2行2.1.3 直接量 在 JavaScript中,我们用直接量来描述数值。JavaScript支持的直接量分为以下几种:10/整数

17、0.6/浮点数 test/字符串 test/字符串 true/false/布尔值/abc/gi/正则表达式 null/空对象 x:2.3,y:3.5/对象 1,2,.,n/数组2.1.4 变量变量 JavaScript中的变量是使用var关键字加变量名定义的,例如:var a=1;需要说明的是,变量名应该遵守两条简单的规则:(1)第一个字符必须是字母(az,AZ)、下划线(_)或美元符号($);(2)其他部分可以是下划线、美元符号、任意字母或数字字符(09)。2.1.5 运算符运算符 1数学运算符 JavaScript提供的数学运算符有:+、-、*、/、%、+、-。所谓一目运算符是指对一 个

18、运 算 量 进 行 运 算 的 运 算 符。在JavaScript语言中有4个一目运算符:+、-、+和-。其中一目取正“+”和一目取负“-”只影响表达式的运算结果。所谓的二目运算符,是指对两个运算量进行运算的运算符,JavaScript中的二目数学运算符包括:+、-、*、/、%。2关系运算符 JavaScript中的关系运算符是用于测试两个变量之间关系的运算符。“”、“=”运算符执行的是两个数的比较运算,比较方式与数学中的比较运算相同,这4个运算符称为比较运算符。JavaScript关系运算符中还有两种特殊的运算符:in和instanceof。3等性运算符 判断两个变量是否相等是程序设计中非常

19、重要的运算。JavaScript中提供了两套运算符处理这个问题,等号和非等号处理原始值,全等号和非全等号处理对象。4逻辑运算符 逻辑运算符的运算结果只有真(true)和假(false)两种。JavaScript支持以下3种逻辑运算符。var a=true,b=false;/逻辑与 a&a/true a&b/false b&a/false b&b/false/逻辑或 a|a/true a|b/true b|a/true b|b/false /逻辑非!a/false!b/true5位运算符 JavaScript完全支持按位(bit)运算。位运算符包括:与、或、非、异或、左移、右移运算符。有符号整数

20、和无符号整数的区别在于:有符号整数使用低31位表示整数值,最高位表示整数的符号,0表示正数,1表示负数,数值的范围是从231到2311;而无符号整数则使用所有32位数表示整数值,其数值范围是从0到2321。例如25的二进制为11001,它在内存中的存储结构如图2-1所示。图2-1 整数的存储结构 负数也存储为二进制形式,不过采用的是二进制补码。图2-2 计算补码步骤(1)与运算)与运算 与运算符用“&”表示。表2-1与运算规则操作数操作数01000101(2)或运算)或运算 或运算用“|”表示 表2-2或运算规则操作数操作数01001111(3)异或运算)异或运算 异或运算用“”表示 表2-3

21、异或运算规则操作数操作数01001110(4)非运算 非运算用“”表示(5)左移运算 左移运算用“”表示(7)无符号的右移 无符号的右移用“”表示 6赋值运算符 JavaScript中赋值运算符是“=”符号,它将等号右边的值赋给等号左边的变量。表2-4带操作的赋值运算符运 算 符示 例等效表达式+=x+=yx=x+y-=x-=yx=x-y*=x*=yx=x*y/=x/=yx=x/y%=x%=yx=x%y=x=yx=x=x=yx=x y=x=yx=x y&=x&=yx=x&y|=x|=yx=x|y=x=yx=x y7其他运算符(1)条件运算符(?:)(2)typeof运算符(3)new运算符(4

22、)delete运算符(5)void运算符(6)函数调用运算符2.1.6 程序流程控制 1选择结构(1)单一选择结构 代码结构如下:if(condition)statement(2)二路选择结构)二路选择结构 代码结构如下:if(condition)statement1 else statement2(3)内联三元运算符)内联三元运算符 代码结构如下:(condition)?statement1:statement2;2循环结构(1)while循环 while循环是一种常见的循环结构,其代码结构如下:while(condition)statement(2)do while循环循环 do whil

23、e循环和while循环类似,区别在于计算condition表达式的位置。在do while循环中,每次循环结束时会计算condition表达式的值,如果该表达式的值为true,则继续循环,否则结束循环。do while循环的代码结构如下所示:do statement while(condition)(3)for循环循环 for循环常用于遍历数组,对数组的每个成员执行相同或者类似的操作,其代码结构如下所示:for(initialize;condition;increment)statement(4)for in循环循环 JavaScript还提供了一种for in的循环机制来遍历对象的所有属性,

24、其代码结构如下:for(prop in object).3异常处理结构 前面讨论的选择结构和循环结构都是通过判断条件表达式的值来确定程序流向的,异常处理结构则不同,它是根据程序执行过程中是否发生异常来决定程序流向的。其代码结构如下:try statement catch(exception)catchStatement finnaly finnalyStatement 2.2 JavaScript内置对象内置对象 作为一门编程语言,JavaScript提供了一些内置的对象和函数。内置对象提供编程的几种最常用的功能。ECMAScript定义的JavaScript内置对象主要包括:(1)全局(Gl

25、obal)对象(2)对象(Object)对象(3)字符串(String)对象(4)正则表达式(RegExp)对象(5)数组(Array)对象(6)数学(Math)对象(7)日期(Date)对象(8)数字(Number)对象(9)函数(Function)对象(10)布尔值(Boolean)对象(11)错误(Error)对象2.2.1 全局(全局(Global)对象)对象 表2-5Global对象的属性和方法属性/方法说 明InfinityNumber.POSITIVE_INFINITY的初始值NaN特殊值,表示非数字undefined表示未定义的值,如果声明了一个变量但还没有初始化,该变量的值就

26、是undefinedisFinite(number)返回一个布尔值,判断数字number是否为有限的isNaN(number)返回一个布尔值,判断number是否为非数字(NaN)escape(string)对字符串string进行编码,将其中的某些特殊字符转换成为16进制的转义字符unescape(string)将escape方法编码后的字符串解码,返回编码之前的字符串parseFloat(string)将字符串转换为Number对象parseInt(string)将字符串转换为一个整数eval(string)执行字符串string中的JavaScript脚本encodeURI(string

27、)将URI字符串进行编码,将其中的某些特殊字符转换为16进制的转义字符decodeURI(string)将encodeURI编码过的字符串解码,返回编码之前的字符串encodeURIComponent(string)将部分URI字符串进行编码,将其中的某些特殊字符转换为16进制的转义字符decodeURIComponent(string)将encodeURIComponent编码过的字符串解码,返回编码之前的字符串2.2.2 对象(Object)对象表2-6Object对象的属性和方法属性/方法说 明constructor对象的构造函数hasOwnProperty(propname)检查对象是

28、否具有自定义属性isPrototypeOf(o)检查对象是否是另一个对象的原型属性propertyIsEnumerable(propname)检查对象是否具有指定的可枚举属性toLocaleString()返回对象的本地化字符串toString()返回对象的字符串形式valueOf()返回对象的原始值2.2.3 字符串(String)对象 表2-7String对象的属性和方法属性/方法说 明length字符串长度charAt(n)返回字符串中的第n个字符concat(value,.)将一个或者多个值连接到字符串上indexOf(substring,start)在字符串中查找子字符串首次出现的位

29、置lastIndexOf(substring,start)在字符串中查找子字符串最后一次出现的位置match(regexp)在字符串中执行正则匹配replace(regexp,replaceText)使用正则表达式进行字符串的匹配和替换search(regexp)在字符串中查找指定的模式slice(start,end)返回字符串的一部分split(delimiter,limit)将字符串分隔为字符串数组substring(start,end)返回字符串的一部分toLowerCase()返回字符串的小写形式toLocaleLowerCase()根据宿主环境的区域设置,返回字符串的小写形式toUp

30、perCase()返回字符串的大写形式toLocaleUpperCase()根据宿主环境的区域设置,返回字符串的大写形式toString()返回String对象的值valueOf()返回String对象的值String.fromCharCode根据一串Unicode编码,返回相应的字符串2.2.4 正则表达式(RegExp)对象表2-8 RegExp对象的属性和方法属性/方法说 明global正则表达式是否为全局查找模式ignoreCase正则表达式是否不区分大小写属性/方法说 明lastIndex使用正则表达式进行匹配时,匹配结果最后一个字符的下一个位置multiline正则表达式是否为多行

31、匹配模式source进行正则匹配的源字符串exec(string)执行正则匹配test(string)检查字符串中是否包含指定的模式2.2.5 数组(Array)对象表2-9Array对象的属性和方法属性/方法说 明length数组的长度concat(value,.)在数组中附加新的元素或者将多个数组的元素连接起来构成新数组join(separator)将数组的内容连接起来,返回字符串pop()返回字符串的最后一个元素,并将其从数组中删除push(value,.)在数组中附加新的元素,返回附加新元素之后的数组长度reverse()将数组中的元素逆序排列shift()返回数组的第一个元素,从数组

32、中删除第一个元素并将其他元素向前移动一位slice(start,end)返回数组的一部分sort(orderFunc)将数组中的元素排序,可以以一个可选的函数为参数来指定排序方式splice(start,deleteCount,value,.)插入、删除或者替换数组中的元素toLocaleString将数组转换为本地化字符串toString将数组转换为字符串unshift在数组开始位置插入元素,返回新数组的长度2.2.6 数学(Math)对象表2-10 Math对象的属性和方法属性/方法说 明Math.E自然对数底数eMath.LN1010的自然对数Math.LN22的自然对数Math.LOG

33、10E以10为底的e的对数Math.LOG2E以2为底的e的对数Math.PI圆周率Math.SQRT1_22的平方根的倒数Math.SQRT22的平方根Math.abs(number)计算number的绝对值Math.acos(number)计算number的反余弦Math.asin(number)计算number的反正弦Math.atan(number)计算number的反正切Math.atan2(y,x)计算y/x的反正切Math.ceil(number)返回大于等于number的最小整数Math.cos(number)计算number的余弦Math.exp(number)计算numbe

34、r的自然指数Math.floor(number)返回小于等于number的最大整数Math.log(number)计算number的自然对数Math.max(n1,n2,)计算所有参数的最大值Math.min(n1,n2,)计算所有参数的最小值Math.pow(x,y)计算x的y次方Math.random()返回0.0到1.0之间的伪随机数Math.round(number)返回与number最接近的整数Math.sin(number)计算number的正弦Math.sqrt(number)计算number的平方根Math.tan(number)计算number的正切 2.2.7 日期(Dat

35、e)对象表2-11 Date对象的属性和方法属性/方法说 明getUTCDate()返回Date对象的日期字段getUTCDay()返回Date对象的星期字段getUTCFullYear()返回Date对象的年份字段getUTCHours()返回Date对象的小时字段getUTCMilliseconds()返回Date对象的毫秒字段getUTCMinutes()返回Date对象的分钟字段getUTCMonth()返回Date对象的月份字段getUTCSeconds()返回Date对象的秒字段getTime()返回Date对象的内部毫秒数(Date对象所代表时间与1970-1-1之间毫秒时间差)

36、getTimezoneOffset()返回本地时间与格林威治标准时间之间的时差,单位是分钟getYear()返回Date对象的年份字段setUTCDate()设置Date对象的日期字段setUTCFullYear()设置Date对象的年份字段setUTCHours()设置Date对象的小时字段setUTCMilliseconds()设置Date对象的毫秒字段setUTCMinutes()设置Date对象的分钟字段setUTCMonth()设置Date对象的月份字段setUTCSeconds()设置Date对象的秒字段setTime()设置Date对象的内部毫秒数setYear()设置Date对

37、象的年份字段toDateString()将Date对象的日期部分转换为字符串toGMTString()将Date对象按格林威治时区转换为字符串toLocaleDateString()将Date对象的日期部分按照本地时区的格式转换为字符串toLocaleString()将Date对象按照本地时区的格式要求转换为字符串toLocaleTimeString()将Date对象的时间部分按照本地时区的格式转换为字符串toString()将Date对象转换为字符串toTimeString()将Date对象的时间部分转换为字符串toUTCString()将Date对象按世界时转换为字符串valueOf()返

38、回Date对象的内部毫秒数Date.parse(dateString)将指定格式的字符串(本地时间)转换为Date对象Date.UTC(dateString)将指定格式的字符串(世界时)转换为Date对象2.2.8 数字(Number)对象 表2-12 Number对象的属性和方法属性/方法说 明Number.MAX_VALUEJ a v a S c r i p t 中 可 表 示 的 最 大 数,值 约 为1.79769313486232E+308Number.MIN_VALUEJ a v a S c r i p t 中 可 表 示 的 最 小 数,值 约 为4.94065645841247

39、E-324Number.NaN特殊的非数字值Number.NEGATIVE_INFINITY负无穷大Number.POSITIVE_INFINITY正无穷大toString()将Number对象转换为字符串toLocaleString()将Number对象转换为本地格式的字符串toFixed(digit)用定点计数法将Number对象转换为字符串toExponential(digit)将Number对象转换为指数形式的字符串toPrecision(precision)将Number对象按指定的精度转换为字符串2.2.9 函数(Function)对象表2-13 Function对象的属性和方法

40、属性/方法说 明arguments函数的参数列表caller如果在函数中调用该函数,caller属性为调用函数的引用;如果在顶层调用该函数,caller属性为nulllength函数的参数个数prototype原型对象,所有Function对象的实例中均具有prototype中定义的属性和方法apply(obj,argArray)调用函数,当函数执行时this对象将指向obj对象,argArray是调用该函数的参数数组call(obj,arg1,a r g 2 ,argN)调用函数,当函数执行时this对象将指向obj对象,arg1、arg2、argN是调用该函数的参数toString()返回

41、该函数的字符串形式2.2.10 布尔值(Boolean)对象表2-14Boolean对象的方法属性/方法说 明toString()返回Boolean对象的字符串形式(true或者false)valueOf()返回Boolean对象的原始值2.2.11 错误(Error)对象表2-15 Error对象的属性和方法属性/方法说 明messageError对象的错误消息name声明Error对象的类型toString()将Error对象转换为字符串 小 结 本章讲解了JavaScript的基本语法,并且对JavaScript的内置对象进行了简单介绍,在后续章节中还将会通过具体的示例对内置对象进行深入

42、讲解。第3章 JavaScrip面向对象编程 JavaScript语言特性3.1 JavaScript面向对象编程实现3.2 JavaScript与设计模式3.3 JavaScript是一门基于对象的语言,实际上JavaScript中的一切都是对象。3.1 JavaScript语言特性 函数是在JavaScript中实现面向对象编程的基础,此外apply、call等JavaScript语言特性也在JavaScript面向对象编程中起到了重要作用。另外,闭包(也称匿名函数)的概念在JavaScript面向对象编程中得到了广泛的应用,它也是理解各类JavaScript开发框架实现原理的基础。3.1

43、.1 JavaScript中的函数中的函数 1arguments、callee和caller属性 在函数调用过程中,我们可以通过arguments属性访问函数的输入参数,arguments参数是由脚本解释器自动创建的,不能手工创建或者修改。arguments属性可以看作是一个Array对象,它具有length属性,可以通过序号访问每一个参数。但是它并不是真正的Array对象,它不具备Array对象的join、shift等方法,而且它还具有自己独有的属性callee。通过callee属性可以获取对正在执行的函数对象的引用。例3-1是arguments和callee属性的应用示例。【例3-1】ar

44、guments和callee属性的应用【例3-2】callee和caller属性的应用 2函数对象的多重身份 函数对象是JavaScript中一个很特殊的对象,其特殊性体现在它的多重身份上,请看例3-3的代码。【例3-3】Function对象应用示例 function关键字可以声明普通的函数,这一点和其他语言中函数的概念是相同的。除此以外,它还可以用于类的声明和实现、对象的构造函数以及类引用。例3-3中通过function关键字声明了Flower类,并且通过this关键字声明了两个属性name和color;然后在创建obj对象时,Flower()又起到了对象构造函数的作用;最后的代码中使用in

45、stanceof关键字判断obj对象是否是Flower类的实例,此时Flower又起到了类引用的作用。3.1.2 apply和和call方法方法 apply方法和call方法都可以将函数绑定到其他对象上执行,区别在于调用参数形式的不同,apply方法通过数组形式传入函数的调用参数,而call方法使用逗号分隔的参数列表。调用apply方法和call方法的语法如下所示:apply(thisObj,argArray)call(thisObj,arg1,arg2,.argN)例3-4说明了两者的区别。【例3-4】apply和call方法示例3.1.3 this关键字关键字 在JavaScript的对象

46、系统中,this关键字常用于两种地方:(1)在构造器函数中,指代新创建的对象实例;(2)在对象的方法被调用时,指代调用该方法的对象实例。如果一个函数被当作普通函数(而不是对象方法)调用,那么在函数中的this关键字将指向window对象。当然如果this关键字不在任何函数中,那么它也指向Global对象。3.1.4 使用使用for(in)for(in)语句可以遍历对象的所有属性和方法,例3-5所示的代码就遍历了Car对象的属性和方法,如果是属性则输出属性值,如果是方法则执行方法。【例3-5】for(in)示例3.1.5 闭包闭包 所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达

47、式(通常是一个函数),因而这些变量也是该表达式的一部分。关于闭包,最简单的描述就是 ECMAScript 允许使用内部函数,即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。例3-6所示是一个使用闭包的示例。【例3-6】闭包示例3.2 JavaScript面向对象编程实现 面向对象编程的基本要素是封装、继承和多态,下面介绍在JavaScript中实现这些特性的方法。3.2.1 类的声明类的声明 在JavaScript中可以使用如下的方式进行类的声明。function ClassA()this.p1=p1;

48、this.p2=p2;this.f1=function()alert(f1);this.f2=function()alert(f2);1私有成员变量 类中除了公有成员以外可能还会有一些私有成员变量,JavaScript可以通过声明局部变量的方式定义私有成员变量。2静态成员 在JavaScript中可以通过下面的方式声明静态属性和静态方法。ClassA.staticProp=静态成员变量;ClassA.staticMethod=function()alert(ClassA.staticProp);3实例成员 如果要声明一个类的实例属性或者方法,可以使用JavaScript中对象的prototyp

49、e属性。4基于prototype的类声明 利用prototype属性还可以实现另外一种类的声明方式,例3-7就是基于prototype方式的类声明示例。【例3-7】基于prototype方式的类声明3.2.2 继承 JavaScript语言本身并没有提供对于继承的语法支持,但是仍然可以采用复制属性和对象的方式来实现继承。以例3-7中声明的ClassA类为例,如果想要创建一个继承于该类的子类SubClassA,并且在SubClassA类中声明一个新方法newMethod,最直接的方法就是通过如下的方式实现。function SubClassA()SubClassA.prototype=p1:p1

50、,p2:p2,f1:function()alert(f1);,f2:function()alert(this.p2);,newMethod:function()alert(newMethod);【例3-8】JavaScript中继承的实现3.2.3 多态 在JavaScript中,多态的实现可以采用和继承类似的方法。首先定义一个抽象类,其中调用一些虚方法,虚方法在抽象类中没有定义,而是通过其具体的实现类来实现的。例3-9是使用JavaScript实现多态的例子。【例3-9】JavaScript中多态的实现3.3 JavaScript3.3 JavaScript与设计模式与设计模式 目前富客户端

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 办公、行业 > 各类PPT课件(模板)
版权提示 | 免责声明

1,本文(全书配套课件:Javascript程序设计教程.ppt)为本站会员(三亚风情)主动上传,163文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。
2,用户下载本文档,所消耗的文币(积分)将全额增加到上传者的账号。
3, 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(发送邮件至3464097650@qq.com或直接QQ联系客服),我们立即给予删除!


侵权处理QQ:3464097650--上传资料QQ:3464097650

【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。


163文库-Www.163Wenku.Com |网站地图|