微信小程序基础课件汇总整本书电子教案全套课件完整版ppt最新教学教程最全课件.pptx

第第1章章微信小程序基微信小程序基础微信小程序开发教程微信小程序开发教程目录1.1 1.1 微信小程序介绍微信小程序介绍1.2 1.2 微信小程序开发工具的使用微信小程序开发工具的使用1.3 1.3 创建一个微信小程序项目创建一个微信小程序项目第1章 微信小程序基础教学目标：教学目标：本章将会介绍微信小程序的基本概念和特征。并针对开发环境的搭建和开发工具的使用详细讲解。1.1.1 什么是微信小程序微信小程序这个词可以分解为“微信”和“小程序”两部分：（1）其中“微信”可以理解为“微信中的”，指的是小程序的执行环境；当然微信在提供执行环境的同时也延长了用户使用微信的时间。（2）“小程序”是说它首先是程序，然后具备轻便的特征。小程序并不像其他应用那样，它不需要安装，而是通过扫描二维码等打开后直接执行；用完以后也不需要卸载。这就是所谓用完即走的原则。总之，微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。微信微信小程序小程序发展历程微信小程序，简称小程序，英文名MiniProgram，它是由微信之父张小龙在2017年1月9日正式发布的“轻”应用，它不需要下载安装专门的APP，只需要通过微信的载体，就可以轻松实现APP的功能。全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。2016年1月9日，微信团队内部提出“应用号”设想；2016年1月11日，张小龙在微信公开课上阐述微信的四大价值观，并首次提出“以服务为主”开发一个新的形态应用号；2016年9月22日，微信公众平台对外发送“小程序”内测邀请，首批内测名额200个；2016年11月3日，微信小程序对外开放公测，开发者可以登录微信公众平台申请，开发完成后可以提交审核，但公测期间不能发布；2016年12月28日，张小龙在微信公开课上第一次完整阐述了小程序，并明确小程序在微信没有入口、没有小程序商店、没有订阅关系、不能推送消息、可以分享到聊天和群等业界关心的问题；2016年12月30日，微信公众平台对外公告，上线的微信小程序最多可以生成10000个带参数的二维码；2017年1月9日，微信小程序正式上线。1.1.1 什么是微信小程序微信小程序拥有大量的微信用户群体。小程序和公众号一样背靠微信，本身自带流量，而且微信小程序的入口多；在微信中通过搜索关键字、扫描二维码、群分享、好友分享等途径来实现打开一个微信小程序。微信小程序可以开发游戏，即微信小游戏，它是微信小程序的一个类目，使用相同的开发工具开发。1.1.2 注册开发者账号在创建自己的微信小程序之前，需要注册小程序账号，这样才能进行代码开发和提交工作。其注册步骤如下：（1）使用浏览器打开微信公众平台网站https:/，如图1-1所示，单击右上角“立即注册”链接进行注册。微信公众平台微信公众平台是腾讯在微信APP内推出的针对个人、企业和组织提供业务服务与用户管理能力的全新服务平台，微信公众平台的应用类型包括：服务号订阅号小程序企业微信微信公众号是应用者在微信公众平台注册的一个账号，账号开通后，就可以在微信公众号里发视频、图片、文字等推销商品或分享生活经验等。通常所说的微信公众号包括服务号和订阅号。微信公众平台1订阅号订阅号是公众平台的一种账号类型，旨在为媒体和个人提供一种新的信息传播方式，主要偏向为用户提供资讯、消息（类似报纸杂志）。订阅号适用于个人、媒体、企业、政府或其他组织，认证前后每天可群发1条消息。其展现效果如图所示。发给订阅用户（粉丝）的消息，将会显示在对方的“订阅号消息”文件夹中。如果想用公众平台简单发发消息，做宣传推广服务，建议选择订阅号。微信公众平台2服务号服务号是公众平台的一种账号类型，旨在为企业和组织提供更强大的业务服务与用户管理能力，大多为用户提供服务类交互（功能类似12315、114，提供服务查询）。服务号适用于媒体、企业、政府或其他组织，认证前后每个月内都可以发送4条消息。其展现效果如图所示。发给订阅用户（粉丝）的消息，会显示在对方的聊天列表中。如果想用公众平台进行商品销售，建议选择服务号，后续可认证再申请微信支付商户。微信公众平台3企业微信企业微信是一个全平台企业办公工具，它提供与微信一致的沟通体验，为企业员工提供最基础和最实用的办公服务，并加入贴合办公场景的特色功能、轻OA工具，合理化区分工作与生活，提升工作效率。2018年6月29日企业微信2.0版本发布，正式与企业号合并。其展现效果如图所示微信公众平台4小程序小程序是一种不需要下载安装即可运行在微信环境中的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可。简单说，就是把手机上的APP搬到微信里面，不需要下载安装就可以直接使用。用户可以在微信的“发现”栏找到“小程序”的入口，从该入口可以打开需要的小程序1.1.2 注册开发者账号（2）根据图1-2中页面提示，在选择注册微信公众平台的账号类型为“小程序”，即可开始账号注册。（3）小程序注册页面包含3个填写页面，即帐号信息，邮箱激活、信息登记。如图1-3所示，完成注册后可以使用刚才的注册账号登录进入小程序管理页面，如图1-4所示，可以进行小程序信息完善和管理工作。例如填写小程序基本信息，包括名称、头像、介绍及服务范围等。1.2 微信小程序开发工具的使用获取微信小程序获取微信小程序AppIDAppID登录https:/，就可以在微信小程序管理页面的“开发”“开发设置”中，查看到微信小程序的AppID，如图1-4所示。注意不可直接使用服务号或订阅号的AppID。安装微信开发者工具安装微信开发者工具1.2 微信小程序开发工具的使用获取微信小程序获取微信小程序AppIDAppID微信开发者工具官方下载地址：https:/ 微信小程序开发工具的使用创建小程序项目成功后，进入如图1.16所示的微信开发者工具主界面。开发者工具主界面，从上到下，从左到右，分别为包含菜单栏、工具栏、模拟器窗口、编辑器窗口（含目录结构窗口和代码窗口）和调试器窗口。1.2 微信小程序开发工具的使用微信小程序发布流程微信小程序发布流程完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布（公测期间不能发布）。（1）预览单击开发者工具顶部操作栏的预览按钮，会在界面上显示一个二维码。使用当前小程序开发者的微信扫码即可看到小程序在手机客户端上的真实表现。（2）上传代码单击开发者工具菜单的“工具”“上传”命令，填写版本号以及项目备注，上传成功之后，登录小程序管理后台，在“管理”“版本管理”就可以找到刚提交上传的版本了。（3）可以将这个版本设置“体验版”或者“提交审核”。（4）发布审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时登录小程序管理后台，在“开发管理”“审核版本”中可以看到通过审核的版本。选择单击发布，即可发布小程序。（5）运营数据登录小程序管理后台“统计”，单击相应的tab选项卡可以看到相关的数据。1.3 创建一个微信小程序项目启动微信开发者工具创建一个微信小程序项目，单击菜单界面“项目”“新建项目”，如图1-8中选择小程序项目类型为“小程序”，同时填写项目名称（如井字棋）、项目文件存放的路径和APPID。其中APPID就是用户注册时的小程序ID，见1.2.1节。如果没有APPID，可以使用测试号。但发布时需要使用正式的小程序ID。小程序项目类型为“小程序小程序”“小游小游戏”“代代码片段片段”1.3 创建一个微信小程序项目小程序项目类型为“小程序小程序”“小游小游戏”“代代码片段片段”其中“代码片段”是一种可分享的小项目，可用于分享小程序和小游戏的开发经验、展示组件和API的使用、复现开发问题等等。分享代码片段会得到一个链接，所有拥有此分享链接的人可以在工具中导入此代码片段。他们和普通“小程序”项目一样可以直接运行，主要区别在于代码片段体积小且可以被分享。“小游戏”是小程序的一个类目，小游戏是微信开放给小程序的更多的能力，让小程序开发者有了开发游戏的能力。“小游戏”开发将在第8章学习。初学者这里选择小程序项目类型为“小程序”。1.3 创建一个微信小程序项目官方默认的小程序项目的目录结构及文件如图所示，根目录下app.js、app,json、app.wxss和project.config.json四个文件的作用分别是用于处理小程序的业务逻辑、对小程序的页面路径等相关属性进行全局配置、定义小程序页面的全局样式和保存小程序项目的配置信息。本章小结本章介绍了微信平台的订阅号、服务号、企业微信和小程序的应用场景，详细阐述了小程序的基本架构和特性，介绍了小程序开发工具的安装使用方法和创建小程序的步骤，为读者后续的微信小程序开发打下了基础。第2章 JAVASCRIPT语法基础微信小程序开发教程微信小程序开发教程目录2.1 2.1 在在HTMLHTML中使用中使用JavaScriptJavaScript语言语言2.2 2.2 基本语法基本语法2.3 2.3 常用控制语句常用控制语句2.3.1 2.3.1 选择结构语句选择结构语句2.3.2 2.3.2 循环结构语句循环结构语句2.4 2.4 函数函数2.5 JavaScript2.5 JavaScript面向对象程序设计面向对象程序设计2.6 JavaScript2.6 JavaScript内置对象内置对象2.7 ES62.7 ES6简介简介第2章 JAVASCRIPT语法基础教学目标：教学目标：本章将会介绍JavaScript的核心语法。掌握JavaScript的面向对象编程思想以及有关对象的基本概念初步掌握创建和使用自定义的类和对象。了解ES6的语法。2.1 JAVASCRIPT语言概述JavaScript主要用于以下三个领域：浏览器：得到所有浏览器的支持，只要有网页的地方就有JavaScript。服务器：借助node.js运行环境，JavaScript已经成为很多开发者进行后端开发的选择之一。微信小程序：小程序逻辑开发的语言。小程序逻辑开发的语言。标准ECMAScript通常缩写为ES。在微信小程序中通常使用ES5和ES6版本。微信微信小程序小程序2.1.2 运行JAVASCRIPT语言1在浏览器中运行在浏览器中运行在HTML文件中使用JavaScript脚本时，JavaScript代码需要出现在和和之间。【例2-1】一个简单的在HTML文件中使用JavaScript脚本实例。另外一种插入JavaScript程序的方法是把JavaScript代码写到一个.js文件当中，然后在HTML文件中引用该js文件，方法如下：2.1.2 运行JAVASCRIPT语言JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释执行。注意与Java的区别，Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的解释器，它可以通过解释器实现独立于某个特定的平台编译代码的束缚。2.1.2 运行JAVASCRIPT语言2在服务器中运行在服务器中运行搭建node运行环境后，通过命令行执行JS文件。例如：nodeoutput.js3在微信小程序中运行在微信小程序中运行在微信小程序中，JavaScript需要单独保存在JS文件中，即外联式。小程序框架对此进行了优化，只要按目录规范保证JS文件与WXML文件同名，则无须使用引入即可使用。在微信开发工具中，单击console选项卡可以查看JS代码文件中console.log()输出的调试信息。例如：variNum=10;iNum*=2;console.log(iNum);CONSOLE选项卡例如：variNum=10;iNum*=2;console.log(iNum);2.2 基本语法2.2.1 数据类型数据类型JavaScript包含下面5种原始数据类型。p1Undefined ：即为未定义类型，用于不存在或者没有被赋初始值的变量或对象的属性p2Null：作用是表明数据空缺的值。一般将Undefined型和Null型等同对待。p3Boolean ：取值为ture或false，分别表示逻辑真和假p4String：字符型数据。JavaScript不区分单个字符和字符串。用双引号或单引号引起来。varnameA=Tom;varnameB=Tom;p5Number：即为数值型数据，包括整数型和浮点型。varmyDataA=8;varmyDataB=6.3;pJavaScript脚本语言除了支持上述基本数据类型外，也支持组合类型，如数组Array和对象Object等。2.2 基本语法2.2.2 2.2.2 常量和变量常量和变量1常量常量是内存中用于保存固定值的单元，在程序中常量的值不能发生改变。2变量变量是内存中命名的存储位置，可以在程序中设置和修改变量的值。在JavaScript中，可以使用var关键字声明变量。2.2.3 注释注释JavaScript支持2种类型的注释字符。1/2/*.*/2.2 基本语法2.2.4 运算符和表达式运算符和表达式1算术运算符算术运算符算术运算符可以实现数学运行，包括加（+）、减（-）、乘（*）、除（/）和求余（%）。2赋值运算符赋值运算符JavaScript脚本语言的赋值运算符包含“=”、“+=”、“=”、“*=”、“/=”、“%=”、“&=”、“=”等，如表2-1所示。3关系运算符关系运算符JavaScript脚本语言中用于比较两个数据的运算符称为比较运算符，包括“=”、“!=”、“”、“”、“=”等，其具体作用见表2-2所示。4逻辑运算符逻辑运算符JavaScript脚本语言的逻辑运算符包括“&”、“|”和“!”等，用于两个逻辑型数据之间的操作，返回值的数据类型为布尔型。逻辑运算符的功能如表2-3所示。2.2 基本语法2.2.4 运算符和表达式运算符和表达式5位运算符位运算符位移运算符用于将目标数据（二进制形式）往指定方向移动指定的位数。JavaScript脚本语言支持“”和“”等位移运算符，其具体作用如见表2-4：6条件运算符条件运算符在JavaScript脚本语言中，“?：”运算符用于创建条件分支。ab？a:b7逗号运算符逗号运算符使用逗号运算符可以在一条语句中执行多个运算，例如：variNum1=1,iNum=2,iNum3=3;8typeof运算符运算符typeof运算符用于表明操作数的数据类型，返回数值类型为一个字符串。2.3 常用控制语句2.3.1 选择结构语句选择结构语句 1if语句语句 2if.else.语句语句2.3 常用控制语句3if.else ifelse语句语句【例【例2-3】下面是一个显示当前系统日期的】下面是一个显示当前系统日期的JavaScript代码，其中使用到代码，其中使用到if.else ifelse语句。语句。下面是一个显示当前系统日期的JAVASCRIPT代码/显示当前系统日期显示当前系统日期 d=new Date();console.log(今天是今天是);if(d.getDay()=1)console.log(星期一星期一);else if(d.getDay()=2)console.log(星期二星期二);else if(d.getDay()=3)console.log(星期三星期三);else if(d.getDay()=4)console.log(星期四星期四);else if(d.getDay()=5)console.log(星期五星期五);else if(d.getDay()=6)console.log(星期六星期六);else console.log(星期日星期日);2.3 常用控制语句4switch语句语句 switch(表达式表达式)case 值值1:语句块语句块1 break;case 值值2:语句块语句块2 break;case 值值n:语句块语句块n break;default:语句块语句块n+1 【例2-5】将例2-4的按分数输出其等级使用switch语句实现。按分数输出其等级/使用使用switch语句实现按分数输出其等级语句实现按分数输出其等级 var MyScore=89;/请输入成绩请输入成绩 score=parseInt(MyScore/10)/parseInt取整取整 switch(score/10)case 10:case 9:console.log(优优);break;case 8:console.log(良良);break;case 7:console.log(中中);break;case 6:console.log(及格及格);break;default:console.log(不及格不及格);if.else ifelse语句实现按分数输出其等级语句实现按分数输出其等级var score=89;/请输入成绩请输入成绩 if(score=90)console.log(优优);else if(score=80&score=70)console.log(中中);else if(score=60)console.log(及格及格);else console.log(不及格不及格);2.3 常用控制语句2.3.2 循环结构语句循环结构语句1 while语句语句 while语句的语法格式为：语句的语法格式为：while(表达式表达式)循环体语句循环体语句【例【例2-6】用】用while循环来计算循环来计算1+2+3.+98+99+100的值。的值。/计算1+2+3.+98+99+100的值vartotal=0;vari=1;while(i=100)total+=i;i+;console.log(total);2.3 常用控制语句2.3.2 循环结构语句循环结构语句2dowhile语句语句do-while语句的语法格式如下：语句的语法格式如下：do 循环体语句循环体语句 while(表达式表达式)；【例【例2-7】用】用dowhile循环来计算循环来计算1+2+3.+98+99+100的值。的值。/计算1+2+3.+98+99+100的值vartotal=0;vari=1;dototal+=i;i+;while(i=100);console.log(total);2.3 常用控制语句3for语句语句 for 循环语句是循环结构语句，按照指定的循环次数，循环执行循环体内语句（或语句块），循环语句是循环结构语句，按照指定的循环次数，循环执行循环体内语句（或语句块），其基本结构如下：其基本结构如下：for(表达式表达式1;表达式表达式2;表达式表达式3)循环体语句循环体语句【例【例2-8】用】用for循环来计算循环来计算1+2+3.+98+99+100的值。的值。/计算1+2+3.+98+99+100的值vartotal=0;for(vari=1;i=100;i+)total+=i;console.log(total);2.3 常用控制语句4continue语句语句continue语句的一般格式为：语句的一般格式为：continue;该语句只能用在循环结构中。当在循环结构中遇到该语句只能用在循环结构中。当在循环结构中遇到continue语句时，则跳过语句时，则跳过continue语句后语句后的其他语句，结束本次循环，并转去判断循环控制条件，以决定是否进行下一次循环。的其他语句，结束本次循环，并转去判断循环控制条件，以决定是否进行下一次循环。5break语句语句breakbreak语句的一般格式为：语句的一般格式为：break;该语句只能用于两种情况：该语句只能用于两种情况：（1 1）用在）用在switchswitch结构中，当某个结构中，当某个casecase分支执行完后，使用分支执行完后，使用breakbreak语句跳出语句跳出switchswitch结构。结构。（2 2）用在循环结构中，用）用在循环结构中，用breakbreak语句来结束循环。如果放在嵌套循环中，则语句来结束循环。如果放在嵌套循环中，则breakbreak语句只能结语句只能结束其所在的那层循环。束其所在的那层循环。2.4 函数函数（函数（function）由若干条语句组成，用于实现特定的功能。函数包含函数名、若干参数和返回值。）由若干条语句组成，用于实现特定的功能。函数包含函数名、若干参数和返回值。2.4.1 创建自定义函数创建自定义函数function 函数名函数名 (参数列表参数列表)函数体函数体function PrintWelcome()document.write(欢迎使用欢迎使用JavaScript);2.4 函数2.4.2 调用函数调用函数 1在在JavaScript中使用函数名来调用函数中使用函数名来调用函数在在JavaScript中，可以直接使用函数名来调用函数。无论是内置函数还是自定义函数，调用函数的方法都是一致的。中，可以直接使用函数名来调用函数。无论是内置函数还是自定义函数，调用函数的方法都是一致的。2在在HTML中使用中使用javascript:方式调用方式调用JavaScript函数函数在在HTML中的中的a链接中可以使用链接中可以使用javascript:方式调用方式调用JavaScript函数，方法如下：函数，方法如下：3与事件结合调用与事件结合调用JavaScript函数函数可以将可以将JavaScript函数指定为函数指定为JavaScript事件的处理函数。当触发事件时会自动调用指定的事件的处理函数。当触发事件时会自动调用指定的JavaScript函数。函数。设置设置 Hello1:function()console.log(单击我了单击我了)2.4 函数/计算并打印num1和num2之和functionsum(num1,num2)console.log(num1+num2);sum(1,2);/结果是3与事件结合调用JavaScript函数设置Hello1:function()console.log(单击我了)2.4 函数2.4.3 变量的作用域变量的作用域 var a=100;/全局变量全局变量 function setNumber()var a=10;/局部变量局部变量 console.log(a);/打印局部变量打印局部变量a setNumber();console.log();console.log(a);/打印全局变量打印全局变量a程序运行结果：程序运行结果：101002.4 函数2.4.3 变量的作用域变量的作用域在函数中定义的变量被称为局部变量。局部变量只在定义它的函数内部有效，在函数体之外，即使在函数中定义的变量被称为局部变量。局部变量只在定义它的函数内部有效，在函数体之外，即使使用同名的变量，也会被看作是另一个变量。使用同名的变量，也会被看作是另一个变量。相应地，在函数体之外定义的变量是全局变量。全局变量在定义后的代码中都有效，包括它后面定相应地，在函数体之外定义的变量是全局变量。全局变量在定义后的代码中都有效，包括它后面定义的函数体内。如果局部变量和全局变量同名，则在定义局部变量的函数中，只有局部变量是有效义的函数体内。如果局部变量和全局变量同名，则在定义局部变量的函数中，只有局部变量是有效的。的。2.4 函数2.4.4 函数的返回值函数的返回值使用使用return语句可以返回函数值并退出函数语句可以返回函数值并退出函数function 函数名函数名()return 返回值返回值;2.4.5 定义函数库定义函数库JavaScript函数库是一个函数库是一个.js文件，其中包含函数的定义。文件，其中包含函数的定义。在在HTML文件中引用函数库文件中引用函数库js文件的方法如下：文件的方法如下：/引用引用js文件中的函数文件中的函数求(m,n)两个数字之间的和，代码如下：functiongetTotal(m,n)vartotal=0;if(m=n)returnfalse;/n必需大于m否则无意义for(vari=m;i=n;i+)total+=i;returntotal;console.log(getTotal(1,10);2.4 函数2.4.6 JavaScript内置函数内置函数1alert()函数函数alert()函数用于弹出一个消息对话框，该对话框包括函数用于弹出一个消息对话框，该对话框包括一个一个“确定确定”按钮。按钮。2confirm()函数函数confirm()函数用于显示一个请求确认对话框，包含函数用于显示一个请求确认对话框，包含一个一个“确定确定”按钮和一个按钮和一个“取消取消”按钮。在程序中，按钮。在程序中，可以根据用户的选择决定执行的操作可以根据用户的选择决定执行的操作2.4 函数3parseFloat()函数函数parseFloat()函数用于将函数用于将字符串转换成浮点数字字符串转换成浮点数字形式。语法如下：形式。语法如下：parseFloat(str)参数参数str是待解析的字符串。函数返回解析后的数字。是待解析的字符串。函数返回解析后的数字。4parseInt()函数函数parseInt()函数用于将字符串转换成整型数字形式。语法如下：函数用于将字符串转换成整型数字形式。语法如下：parseInt(str,radix)参数参数str是待解析的字符串；参数是待解析的字符串；参数radix可选。表示要解析的数字的进制。该值介于可选。表示要解析的数字的进制。该值介于 2 36 之间。之间。parseInt(10);/10进制，结果是进制，结果是10parseInt(f,16);/16进制，结果是进制，结果是15parseInt(010,2);/2进制，结果是进制，结果是22.4 函数3isNaN()函数函数isNaN()用于检验某个值是否为用于检验某个值是否为NaN（not a number不是数字不是数字），返回），返回false为数字，返回为数字，返回true为非数字。为非数字。var num=123.456789abc;isNaN(num)/结果是结果是trueisNaN(123)/结果是结果是false4强制类型转换函数强制类型转换函数用户可以使用强制类型转换函数来用户可以使用强制类型转换函数来转换值的类型转换值的类型。在在ECMAScript中可以使用以下中可以使用以下3种强制类型转换函数。种强制类型转换函数。String(value)：把给定的值转换成字符串。类似于：把给定的值转换成字符串。类似于toString()方法，但是和它又不同，对方法，但是和它又不同，对null或或undefined值值toString()会报错。会报错。Boolean(value)：把给定的值转换成：把给定的值转换成Boolean型。给定的值为空字符串、数字型。给定的值为空字符串、数字0、undefined或或null返回返回false，其余返回，其余返回true。Number(value)：把给定的值转换成数字（可以是整数或浮点数）。：把给定的值转换成数字（可以是整数或浮点数）。2.4 函数var a=String(123);/返回返回123var a=Boolean(0);/返回返回falsevar a=Boolean(undefined);/返回返回falsevar a=Boolean(null);/返回返回falsevar a=Boolean(50);/返回返回truevar a=Number(11.11);/返回返回11.115保留几位小数保留几位小数NumberObject.toFixed(位数位数)；toFixed()位数功能是保留几位小数（四舍五入），参数为保留的小数点后位数，返回的值为位数功能是保留几位小数（四舍五入），参数为保留的小数点后位数，返回的值为String 类型。类型。var a=13.37.toFixed(4);/返回返回13.3700var a=13.378888.toFixed(2);/返回返回13.382.5 JAVASCRIPT面向对象程序设计JavaScript脚本是面向对象（Object-based）的编程语言，它可以将属性和代码集成在一起，定义为类，从而使程序设计更加简单、规范、有条理。通过对象的来访问可大大简化JavaScript程序的设计，并提供直观、模块化的方式进行脚本程序开发。2.5.1 面向对象程序设计思想对象是客观世界存在的人、事和物体等实体。现实生活中存在很多的对象，比如猫、自行对象是客观世界存在的人、事和物体等实体。现实生活中存在很多的对象，比如猫、自行车等。不难发现它们有两个共同特征：都有状态和行为。车等。不难发现它们有两个共同特征：都有状态和行为。图2-8以自然人构造的对象2.5.1 面向对象程序设计思想凡是能够提取一定度量数据并能通过某种途径对度量数据实施操作的客观存在都可以构成一个对象，且用属性来描述对象的状态，使用方法和事件来处理对象的各种行为。下面介绍一些概念。对象（Object）：面向对象程序设计思想可以将一组数据和与这组数据有关操作组装在一起，形成一个实体，这个实体就是对象。属性：用来描述对象的状态。通过定义属性值，可以改变对象的状态。如图2-8中，可以定义height表示该自然人身高，字符串HungryOrNot来表示该自然人肚子的状态，HungryOrNot成为自然人的某个属性；方法：也称为成员函数，是指对象上的操作。如图2-8中，可以定义方法Eat()来处理自然人肚子很饿的情况，Eat()成为自然人的某个方法；事件：由于对象行为的复杂性，对象的某些行为需要用户根据实际情况来编写处理该行为的代码，该代码称为事件。在图2-8中，可以定义事件DrinkBeforeEat()来处理自然人肚子很饿同时嘴巴很渴需要先喝水后进食。2.5.2 面向对象编程面向对象编程（OPP）是一种计算机编程架构，具有三个最基本的特点：封装、重用性（继承）、多态。（1）类（class）：具有相同或相似性质的对象的抽象就是类。（2）封装：将数据和操作捆绑在一起，定义一个新类的过程就是封装。（3）继承：类之间的关系，在这种关系中，一个类共享了一个或多个其他类定义的属性和行为。（4）多态：从同一个类中继承得到的子类也具有多态性，即相同的函数名在不同子类中有不同的实现。就如同子女会从父母那里继承到人类共有的特性，而子女也具有自己的特性。实际上，JavaScript语言是通过一种叫做原型（prototype）的方式来实现面向对象编程的。2.5.3 JAVASCRIPT类的定义和实例化严格的说，JavaScript 是基于对象的编程语言，而不是面向对象的编程语言。在面向对象的编程语言中（如Java、C+、C#、PHP等），声明一个类使用 class 关键字。但是在JavaScript中，没有声明类的关键字，也没有办法对类的访问权限进行控制。JavaScript 使用函数来定义类。1.类的定义类的定义定义一个Person类：functionPerson()this.name=张三;/定义一个属性namethis.sex=男;/定义一个属性sexthis.say=function()/定义一个方法say()console.log(我的名字是+this.name+，性别是+this.sex+。);2.5.3 JAVASCRIPT类的定义和实例化2.创建对象（类的实例化）创建对象（类的实例化）创建对象的过程也是类实例化的过程。在JavaScript中，创建对象（即类的实例化）使用 new关键字。创建对象语法：newclassName()将上面的 Person类实例化：varzhangsan=newPerson();zhangsan.say();运行代码，输出如下内容：大家好，我的名字是 张三，性别是 男。2.5.3 JAVASCRIPT类的定义和实例化3.通过对象直接初始化创建对象通过对象直接初始化创建对象通过直接初始化对象来创建对象，与定义对象的构造函数方法不同的是，该方法不需要new生成此对象的实例，改写zhangsan对象：/直接初始化对象varzhangsan=name:张三,sex:男,say:function()/定义对象的方法document.write(大家好，我的名字是+this.name+，性别是+this.sex);zhangsan.say();对象直接初始化是一个“名字/值”对列表，最后用一个大括号括起来。“名字/值”对表示对象的一个属性或方法，名和值之间用冒号分隔。2.5.3 JAVASCRIPT类的定义和实例化3.通过对象直接初始化创建对象通过对象直接初始化创建对象上面的zhangsan对象，也可以这样来创建：varzhangsan=zhangsan.name=张三;zhangsan.sex=男;zhangsan.say=function()return嗨！大家好，我来了。;该方法在只需生成一个对象实例并进行相关操作的情况下使用时，代码紧凑，编程效率高，但致命的是，若要生成若干个对象实例，就必须为生成每个对象实例重复相同的代码结构，代码的重用性比较差，不符合面向对象的编程思路，应尽量避免使用该方法创建自定义对象。2.5.4 JAVASCRIPT访问对象的属性和方法属性是一个变量，用来表示一个对象的特征，如颜色、大小、重量等；方法是一个函数，用来表示对象的操作，如奔跑、呼吸、跳跃等。对象的属性和方法统称为对象的成员。在JavaScript中，可以使用“.”和“”来访问对象的属性。1.使用“.”来访问对象属性语法：objectName.propertyName其中，objectName为对象名称，propertyName为属性名称。2.使用“”来访问对象属性语法：objectNamepropertyName3.访问对象的方法在JavaScript中，只能使用“.”来访问对象的方法。语法：objectName.methodName()2.5.4 JAVASCRIPT访问对象的属性和方法【例2-15】创建一个Person对象并访问其成员。functionPerson()this.name=张三;/定义一个属性namethis.sex=男;/定义一个属性sexthis.age=22;/定义一个属性agethis.say=function()/定义一个方法say()return我的名字是+this.name+，性别是+this.sex+，今年+this.age+岁!;varzhangsan=newPerson();console.log(姓名：+zhangsan.name);/使用“.”来访问对象属性console.log(性别：+zhangsan.sex);console.log(年龄：+zhangsanage);/使用“”来访问对象属性console.log(zhangsan.say();/使用“.”来访问对象方法2.6 JAVASCRIPT内置对象JavaScript脚本提供丰富的内置对象（内置类），包括同基本数据类型相关的对象（如String、Boolean、Number）、允许创建用户自定义和组合类型的对象（如Object、Array）和其他能简化JavaScript操作的对象（如Math、Date、RegExp、Function）。了解这些内置对象是JavaScript编程和游戏开发的基础和前提。2.6 JAVASCRIPT内置对象JavaScript的内置对象（内置类）框架如图所示。2.6.2 基类OBJECT所有的JavaScript对象都继承自Object类，后者为前者提供基本的属性（如prototype属性等）和方法（如toString()方法等）。而前者也在这些属性和方法基础上进行扩展，以支持特定的某些操作。基类Object的属性和方法见表2-2所示。2.6.3 DATE类Date类主要提供获取和设置日期和时间的方法，如getYear()、getMonth()、getDate()等。Date类的常用方法见表2-3所示。