微信小程序基礎(chǔ)課件匯總整本書電子教案全套課件完整版ppt最新教學(xué)教程最全課件

1、第1章 微信小程序基礎(chǔ)微信小程序開發(fā)教程目錄1.1 微信小程序介紹1.2 微信小程序開發(fā)工具的使用1.3 創(chuàng)建一個(gè)微信小程序項(xiàng)目第1章 微信小程序基礎(chǔ)教學(xué)目標(biāo)：本章將會(huì)介紹微信小程序的基本概念和特征。并針對(duì)開發(fā)環(huán)境的搭建和開發(fā)工具的使用詳細(xì)講解。1.1.1 什么是微信小程序微信小程序這個(gè)詞可以分解為“微信”和“小程序”兩部分：（1）其中“微信”可以理解為“微信中的”，指的是小程序的執(zhí)行環(huán)境；當(dāng)然微信在提供執(zhí)行環(huán)境的同時(shí)也延長了用戶使用微信的時(shí)間。（2）“小程序”是說它首先是程序，然后具備輕便的特征。小程序并不像其他應(yīng)用那樣，它不需要安裝，而是通過掃描二維碼等打開后直接執(zhí)行；用完以后也不需要卸載

2、。這就是所謂用完即走的原則?？傊?，微信小程序是一種全新的連接用戶與服務(wù)的方式，它可以在微信內(nèi)被便捷地獲取和傳播，同時(shí)具有出色的使用體驗(yàn)。 微信小程序發(fā)展歷程微信小程序，簡稱小程序，英文名Mini Program，它是由微信之父張小龍?jiān)?017年1月9日正式發(fā)布的“輕”應(yīng)用，它不需要下載安裝專門的APP，只需要通過微信的載體，就可以輕松實(shí)現(xiàn)APP的功能。全面開放申請(qǐng)后，主體類型為企業(yè)、政府、媒體、其他組織或個(gè)人的開發(fā)者，均可申請(qǐng)注冊(cè)小程序。小程序、訂閱號(hào)、服務(wù)號(hào)、企業(yè)號(hào)是并行的體系。2016年1月9日，微信團(tuán)隊(duì)內(nèi)部提出“應(yīng)用號(hào)”設(shè)想；2016年1月11日，張小龍?jiān)谖⑿殴_課上闡述微信的四大價(jià)值觀

3、，并首次提出“以服務(wù)為主”開發(fā)一個(gè)新的形態(tài)應(yīng)用號(hào)；2016年9月22日，微信公眾平臺(tái)對(duì)外發(fā)送“小程序”內(nèi)測(cè)邀請(qǐng)，首批內(nèi)測(cè)名額200個(gè)；2016年11月3日，微信小程序?qū)ν忾_放公測(cè)，開發(fā)者可以登錄微信公眾平臺(tái)申請(qǐng)，開發(fā)完成后可以提交審核，但公測(cè)期間不能發(fā)布；2016年12月28日，張小龍?jiān)谖⑿殴_課上第一次完整闡述了小程序，并明確小程序在微信沒有入口、沒有小程序商店、沒有訂閱關(guān)系、不能推送消息、可以分享到聊天和群等業(yè)界關(guān)心的問題；2016年12月30日，微信公眾平臺(tái)對(duì)外公告，上線的微信小程序最多可以生成10000個(gè)帶參數(shù)的二維碼；2017年1月9日，微信小程序正式上線。1.1.1 什么是微信小程

4、序微信小程序擁有大量的微信用戶群體。小程序和公眾號(hào)一樣背靠微信，本身自帶流量，而且微信小程序的入口多；在微信中通過搜索關(guān)鍵字、掃描二維碼、群分享、好友分享等途徑來實(shí)現(xiàn)打開一個(gè)微信小程序。微信小程序可以開發(fā)游戲，即微信小游戲，它是微信小程序的一個(gè)類目，使用相同的開發(fā)工具開發(fā)。1.1.2 注冊(cè)開發(fā)者賬號(hào)在創(chuàng)建自己的微信小程序之前，需要注冊(cè)小程序賬號(hào)，這樣才能進(jìn)行代碼開發(fā)和提交工作。其注冊(cè)步驟如下：（1）使用瀏覽器打開微信公眾平臺(tái)網(wǎng)站，如圖1-1所示，單擊右上角“立即注冊(cè)”鏈接進(jìn)行注冊(cè)。微信公眾平臺(tái)微信公眾平臺(tái)是騰訊在微信APP內(nèi)推出的針對(duì)個(gè)人、企業(yè)和組織提供業(yè)務(wù)服務(wù)與用戶管理能力的全新服務(wù)平臺(tái)，微

5、信公眾平臺(tái)的應(yīng)用類型包括：服務(wù)號(hào)訂閱號(hào)小程序企業(yè)微信微信公眾號(hào)是應(yīng)用者在微信公眾平臺(tái)注冊(cè)的一個(gè)賬號(hào)，賬號(hào)開通后，就可以在微信公眾號(hào)里發(fā)視頻、圖片、文字等推銷商品或分享生活經(jīng)驗(yàn)等。通常所說的微信公眾號(hào)包括服務(wù)號(hào)和訂閱號(hào)。微信公眾平臺(tái)1訂閱號(hào)訂閱號(hào)是公眾平臺(tái)的一種賬號(hào)類型，旨在為媒體和個(gè)人提供一種新的信息傳播方式，主要偏向?yàn)橛脩籼峁┵Y訊、消息（類似報(bào)紙雜志）。訂閱號(hào)適用于個(gè)人、媒體、企業(yè)、政府或其他組織，認(rèn)證前后每天可群發(fā)1條消息。其展現(xiàn)效果如圖所示。發(fā)給訂閱用戶（粉絲）的消息，將會(huì)顯示在對(duì)方的“訂閱號(hào)消息”文件夾中。如果想用公眾平臺(tái)簡單發(fā)發(fā)消息，做宣傳推廣服務(wù)，建議選擇訂閱號(hào)。微信公眾平臺(tái)2服務(wù)

6、號(hào)服務(wù)號(hào)是公眾平臺(tái)的一種賬號(hào)類型，旨在為企業(yè)和組織提供更強(qiáng)大的業(yè)務(wù)服務(wù)與用戶管理能力，大多為用戶提供服務(wù)類交互（功能類似12315、114，提供服務(wù)查詢）。服務(wù)號(hào)適用于媒體、企業(yè)、政府或其他組織，認(rèn)證前后每個(gè)月內(nèi)都可以發(fā)送4條消息。其展現(xiàn)效果如圖所示。發(fā)給訂閱用戶（粉絲）的消息，會(huì)顯示在對(duì)方的聊天列表中。如果想用公眾平臺(tái)進(jìn)行商品銷售，建議選擇服務(wù)號(hào)，后續(xù)可認(rèn)證再申請(qǐng)微信支付商戶。微信公眾平臺(tái)3企業(yè)微信企業(yè)微信是一個(gè)全平臺(tái)企業(yè)辦公工具，它提供與微信一致的溝通體驗(yàn)，為企業(yè)員工提供最基礎(chǔ)和最實(shí)用的辦公服務(wù)，并加入貼合辦公場(chǎng)景的特色功能、輕OA工具，合理化區(qū)分工作與生活，提升工作效率。2018年6月2

7、9日企業(yè)微信2.0版本發(fā)布，正式與企業(yè)號(hào)合并。其展現(xiàn)效果如圖所示微信公眾平臺(tái)4小程序小程序是一種不需要下載安裝即可運(yùn)行在微信環(huán)境中的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或者搜一下即可。簡單說，就是把手機(jī)上的APP搬到微信里面，不需要下載安裝就可以直接使用。用戶可以在微信的“發(fā)現(xiàn)”欄找到“小程序”的入口，從該入口可以打開需要的小程序1.1.2 注冊(cè)開發(fā)者賬號(hào)（2）根據(jù)圖1-2中頁面提示，在選擇注冊(cè)微信公眾平臺(tái)的賬號(hào)類型為“小程序”，即可開始賬號(hào)注冊(cè)。（3）小程序注冊(cè)頁面包含3個(gè)填寫頁面，即帳號(hào)信息，郵箱激活、信息登記。如圖1-3所示，完成注冊(cè)后可以使用剛才的注冊(cè)賬號(hào)登錄進(jìn)入小程序管理

8、頁面，如圖1-4所示，可以進(jìn)行小程序信息完善和管理工作。例如填寫小程序基本信息，包括名稱、頭像、介紹及服務(wù)范圍等。1.2 微信小程序開發(fā)工具的使用獲取微信小程序AppID登錄，就可以在微信小程序管理頁面的“開發(fā)”“開發(fā)設(shè)置”中，查看到微信小程序的AppID，如圖1-4所示。注意不可直接使用服務(wù)號(hào)或訂閱號(hào)的AppID。安裝微信開發(fā)者工具1.2 微信小程序開發(fā)工具的使用獲取微信小程序AppID微信開發(fā)者工具官方下載地址：/miniprogram/dev/devtools/download.html。安裝微信開發(fā)者工具1.2 微信小程序開發(fā)工具的使用創(chuàng)建小程序項(xiàng)目成功后，進(jìn)入如圖1.16所示的微信開

9、發(fā)者工具主界面。開發(fā)者工具主界面，從上到下，從左到右，分別為包含菜單欄、工具欄、模擬器窗口、編輯器窗口（含目錄結(jié)構(gòu)窗口和代碼窗口）和調(diào)試器窗口。1.2 微信小程序開發(fā)工具的使用微信小程序發(fā)布流程完成小程序開發(fā)后，提交代碼至微信團(tuán)隊(duì)審核，審核通過后即可發(fā)布（公測(cè)期間不能發(fā)布）。（1）預(yù)覽單擊開發(fā)者工具頂部操作欄的預(yù)覽按鈕，會(huì)在界面上顯示一個(gè)二維碼。使用當(dāng)前小程序開發(fā)者的微信掃碼即可看到小程序在手機(jī)客戶端上的真實(shí)表現(xiàn)。（2）上傳代碼單擊開發(fā)者工具菜單的“工具”“上傳”命令，填寫版本號(hào)以及項(xiàng)目備注，上傳成功之后，登錄小程序管理后臺(tái)，在“管理”“版本管理”就可以找到剛提交上傳的版本了。（3）可以將這個(gè)

10、版本設(shè)置“體驗(yàn)版”或者“提交審核”。（4）發(fā)布 審核通過之后，管理員的微信中會(huì)收到小程序通過審核的通知，此時(shí)登錄小程序管理后臺(tái)，在“開發(fā)管理”“審核版本”中可以看到通過審核的版本。選擇單擊發(fā)布，即可發(fā)布小程序。（5）運(yùn)營數(shù)據(jù) 登錄小程序管理后臺(tái)“統(tǒng)計(jì)”，單擊相應(yīng)的tab選項(xiàng)卡可以看到相關(guān)的數(shù)據(jù)。1.3 創(chuàng)建一個(gè)微信小程序項(xiàng)目啟動(dòng)微信開發(fā)者工具創(chuàng)建一個(gè)微信小程序項(xiàng)目，單擊菜單界面“項(xiàng)目”“新建項(xiàng)目”，如圖1-8中選擇小程序項(xiàng)目類型為“小程序”，同時(shí)填寫項(xiàng)目名稱（如井字棋）、項(xiàng)目文件存放的路徑和APPID。其中APPID就是用戶注冊(cè)時(shí)的小程序ID，見1.2.1節(jié)。如果沒有APPID，可以使用測(cè)試號(hào)

11、。但發(fā)布時(shí)需要使用正式的小程序ID。小程序項(xiàng)目類型為“小程序”“小游戲”“代碼片段”1.3 創(chuàng)建一個(gè)微信小程序項(xiàng)目小程序項(xiàng)目類型為“小程序”“小游戲”“代碼片段”其中“代碼片段”是一種可分享的小項(xiàng)目，可用于分享小程序和小游戲的開發(fā)經(jīng)驗(yàn)、展示組件和 API 的使用、復(fù)現(xiàn)開發(fā)問題等等。分享代碼片段會(huì)得到一個(gè)鏈接，所有擁有此分享鏈接的人可以在工具中導(dǎo)入此代碼片段。他們和普通“小程序”項(xiàng)目一樣可以直接運(yùn)行，主要區(qū)別在于代碼片段體積小且可以被分享?！靶∮螒颉笔切〕绦虻囊粋€(gè)類目，小游戲是微信開放給小程序的更多的能力，讓小程序開發(fā)者有了開發(fā)游戲的能力。“小游戲”開發(fā)將在第8章學(xué)習(xí)。初學(xué)者這里選擇小程序項(xiàng)目類

12、型為“小程序”。1.3 創(chuàng)建一個(gè)微信小程序項(xiàng)目官方默認(rèn)的小程序項(xiàng)目的目錄結(jié)構(gòu)及文件如圖所示，根目錄下app.js、app,json、app.wxss和project.config.json四個(gè)文件的作用分別是用于處理小程序的業(yè)務(wù)邏輯、對(duì)小程序的頁面路徑等相關(guān)屬性進(jìn)行全局配置、定義小程序頁面的全局樣式和保存小程序項(xiàng)目的配置信息。本章小結(jié)本章介紹了微信平臺(tái)的訂閱號(hào)、服務(wù)號(hào)、企業(yè)微信和小程序的應(yīng)用場(chǎng)景，詳細(xì)闡述了小程序的基本架構(gòu)和特性，介紹了小程序開發(fā)工具的安裝使用方法和創(chuàng)建小程序的步驟，為讀者后續(xù)的微信小程序開發(fā)打下了基礎(chǔ)。第2章 JavaScript語法基礎(chǔ)微信小程序開發(fā)教程目錄2.1 在HTM

13、L中使用JavaScript語言2.2 基本語法2.3 常用控制語句2.3.1 選擇結(jié)構(gòu)語句2.3.2 循環(huán)結(jié)構(gòu)語句2.4 函數(shù)2.5 JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)2.6 JavaScript內(nèi)置對(duì)象2.7 ES6簡介第2章 JavaScript語法基礎(chǔ)教學(xué)目標(biāo)：本章將會(huì)介紹JavaScript的核心語法。掌握J(rèn)avaScript的面向?qū)ο缶幊趟枷胍约坝嘘P(guān)對(duì)象的基本概念初步掌握創(chuàng)建和使用自定義的類和對(duì)象。了解ES6的語法。2.1 JavaScript語言概述JavaScript主要用于以下三個(gè)領(lǐng)域：瀏覽器：得到所有瀏覽器的支持，只要有網(wǎng)頁的地方就有JavaScript。服務(wù)器：借助no

14、de.js運(yùn)行環(huán)境，JavaScript已經(jīng)成為很多開發(fā)者進(jìn)行后端開發(fā)的選擇之一。微信小程序：小程序邏輯開發(fā)的語言。標(biāo)準(zhǔn)ECMAScript通?？s寫為ES。在微信小程序中通常使用ES5和ES6版本。 微信小程序2.1.2 運(yùn)行JavaScript語言1在瀏覽器中運(yùn)行在HTML文件中使用JavaScript腳本時(shí)，JavaScript代碼需要出現(xiàn)在和之間?！纠?-1】一個(gè)簡單的在HTML文件中使用JavaScript腳本實(shí)例。另外一種插入 JavaScript程序的方法是把 JavaScript 代碼寫到一個(gè).js文件當(dāng)中，然后在HTML文件中引用該js文件，方法如下：2.1.2 運(yùn)行JavaS

15、cript語言JavaScript是一種解釋性編程語言，其源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給客戶端由瀏覽器解釋執(zhí)行。注意與Java的區(qū)別，Java的源代碼在傳遞到客戶端執(zhí)行之前，必須經(jīng)過編譯，因而客戶端上必須具有相應(yīng)平臺(tái)上的解釋器，它可以通過解釋器實(shí)現(xiàn)獨(dú)立于某個(gè)特定的平臺(tái)編譯代碼的束縛。2.1.2 運(yùn)行JavaScript語言2在服務(wù)器中運(yùn)行搭建node運(yùn)行環(huán)境后，通過命令行執(zhí)行JS文件。例如：node output.js3在微信小程序中運(yùn)行在微信小程序中，JavaScript需要單獨(dú)保存在JS文件中，即外聯(lián)式。小程序框架對(duì)此進(jìn)行了優(yōu)化，只要按目錄規(guī)范保證J

16、S文件與WXML文件同名，則無須使用引入即可使用。在微信開發(fā)工具中，單擊console選項(xiàng)卡可以查看JS代碼文件中console.log()輸出的調(diào)試信息。例如： var iNum = 10; iNum *= 2; console.log(iNum);console選項(xiàng)卡例如： var iNum = 10; iNum *= 2; console.log(iNum);2.2 基本語法2.2.1 數(shù)據(jù)類型JavaScript包含下面5種原始數(shù)據(jù)類型。1Undefined ：即為未定義類型，用于不存在或者沒有被賦初始值的變量或?qū)ο蟮膶傩?Null ： 作用是表明數(shù)據(jù)空缺的值。一般將Undefined

17、型和Null 型等同對(duì)待。3Boolean ：取值為ture 或false，分別表示邏輯真和假4String：字符型數(shù)據(jù)。JavaScript不區(qū)分單個(gè)字符和字符串。用雙引號(hào)或單引號(hào)引起來。var nameA = Tom;var nameB = Tom;5Number：即為數(shù)值型數(shù)據(jù)，包括整數(shù)型和浮點(diǎn)型。var myDataA=8;var myDataB=6.3;JavaScript腳本語言除了支持上述基本數(shù)據(jù)類型外，也支持組合類型，如數(shù)組Array和對(duì)象Object等。2.2 基本語法2.2.2 常量和變量1常量常量是內(nèi)存中用于保存固定值的單元，在程序中常量的值不能發(fā)生改變。2變量變量是內(nèi)存

18、中命名的存儲(chǔ)位置，可以在程序中設(shè)置和修改變量的值。在JavaScript中，可以使用var關(guān)鍵字聲明變量。2.2.3 注釋JavaScript支持2種類型的注釋字符。1/2/* . */2.2 基本語法2.2.4 運(yùn)算符和表達(dá)式1算術(shù)運(yùn)算符算術(shù)運(yùn)算符可以實(shí)現(xiàn)數(shù)學(xué)運(yùn)行，包括加（+）、減（-）、乘（*）、除（/）和求余（%）。2賦值運(yùn)算符JavaScript 腳本語言的賦值運(yùn)算符包含“ =”、 “ +=”、 “=”、 “ *=”、 “ /=”、 “ %=”、“ &=”、“ =”等，如表 2-1所示。3關(guān)系運(yùn)算符JavaScript 腳本語言中用于比較兩個(gè)數(shù)據(jù)的運(yùn)算符稱為比較運(yùn)算符，包括“ = =”

19、、“ !=”、“”、“”、“=”等，其具體作用見表2-2所示。4邏輯運(yùn)算符JavaScript 腳本語言的邏輯運(yùn)算符包括 “ &”、“ |”和“ !”等，用于兩個(gè)邏輯型數(shù)據(jù)之間的操作，返回值的數(shù)據(jù)類型為布爾型。邏輯運(yùn)算符的功能如表2-3所示。2.2 基本語法2.2.4 運(yùn)算符和表達(dá)式5位運(yùn)算符位移運(yùn)算符用于將目標(biāo)數(shù)據(jù)（二進(jìn)制形式）往指定方向移動(dòng)指定的位數(shù)。JavaScript 腳本語言支持“”和“”等位移運(yùn)算符，其具體作用如見表2-4：6條件運(yùn)算符在 JavaScript 腳本語言中，“? ：”運(yùn)算符用于創(chuàng)建條件分支。ab？a:b7逗號(hào)運(yùn)算符使用逗號(hào)運(yùn)算符可以在一條語句中執(zhí)行多個(gè)運(yùn)算，例如：v

20、ar iNum1 = 1, iNum = 2, iNum3 = 3;8typeof運(yùn)算符typeof 運(yùn)算符用于表明操作數(shù)的數(shù)據(jù)類型，返回?cái)?shù)值類型為一個(gè)字符串。2.3 常用控制語句2.3.1 選擇結(jié)構(gòu)語句 1if語句 2if.else.語句2.3 常用控制語句3if.else ifelse語句【例2-3】下面是一個(gè)顯示當(dāng)前系統(tǒng)日期的JavaScript代碼，其中使用到if.else ifelse語句。下面是一個(gè)顯示當(dāng)前系統(tǒng)日期的JavaScript代碼/顯示當(dāng)前系統(tǒng)日期 d=new Date(); console.log(今天是); if(d.getDay()=1) console.log(星

21、期一); 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(表達(dá)式) case 值1: 語句塊1 break; case 值2: 語句塊2 break

22、; case 值n: 語句塊n break; default: 語句塊n+1 【例2-5】將例2-4的按分?jǐn)?shù)輸出其等級(jí)使用switch語句實(shí)現(xiàn)。按分?jǐn)?shù)輸出其等級(jí) /使用switch語句實(shí)現(xiàn)按分?jǐn)?shù)輸出其等級(jí) var MyScore = 89; /請(qǐng)輸入成績 score =parseInt(MyScore/10) / parseInt取整 switch(score/10) case 10: case 9: console.log(優(yōu)); break; case 8: console.log(良); break; case 7: console.log(中); break; case 6: cons

23、ole.log(及格); break; default: console.log (不及格); if.else ifelse語句實(shí)現(xiàn)按分?jǐn)?shù)輸出其等級(jí)var score = 89; /請(qǐng)輸入成績 if (score = 90) console.log(優(yōu));else if (score = 80 & score= 70) console.log(中);else if (score = 60) console.log(及格);else console.log (不及格);2.3 常用控制語句2.3.2 循環(huán)結(jié)構(gòu)語句1 while語句 while語句的語法格式為：while (表達(dá)式) 循環(huán)體語句【

24、例2-6】用while循環(huán)來計(jì)算1+2+3 . +98+99+100的值。/計(jì)算1+2+3 . +98+99+100的值var total=0;var i=1;while(i=100) total+=i; i+;console.log(total);2.3 常用控制語句2.3.2 循環(huán)結(jié)構(gòu)語句2dowhile語句do-while語句的語法格式如下：do 循環(huán)體語句 while (表達(dá)式)；【例2-7】用dowhile循環(huán)來計(jì)算1+2+3 . +98+99+100的值。 /計(jì)算1+2+3 . +98+99+100的值 var total=0; var i=1; do total+=i; i+;

25、while(i=100); console.log(total);2.3 常用控制語句3for語句 for 循環(huán)語句是循環(huán)結(jié)構(gòu)語句，按照指定的循環(huán)次數(shù)，循環(huán)執(zhí)行循環(huán)體內(nèi)語句（或語句塊），其基本結(jié)構(gòu)如下：for(表達(dá)式1;表達(dá)式2;表達(dá)式3) 循環(huán)體語句【例2-8】用for循環(huán)來計(jì)算1+2+3 . +98+99+100的值。 /計(jì)算1+2+3 . +98+99+100的值var total=0;for(var i=1; i=100; i+) total+=i;console.log(total);2.3 常用控制語句4continue語句continue語句的一般格式為：continue;該語句

26、只能用在循環(huán)結(jié)構(gòu)中。當(dāng)在循環(huán)結(jié)構(gòu)中遇到continue語句時(shí)，則跳過continue語句后的其他語句，結(jié)束本次循環(huán)，并轉(zhuǎn)去判斷循環(huán)控制條件，以決定是否進(jìn)行下一次循環(huán)。5break語句break語句的一般格式為：break;該語句只能用于兩種情況：（1）用在switch結(jié)構(gòu)中，當(dāng)某個(gè)case分支執(zhí)行完后，使用break語句跳出switch結(jié)構(gòu)。（2）用在循環(huán)結(jié)構(gòu)中，用break語句來結(jié)束循環(huán)。如果放在嵌套循環(huán)中，則break語句只能結(jié)束其所在的那層循環(huán)。2.4 函數(shù)函數(shù)（function）由若干條語句組成，用于實(shí)現(xiàn)特定的功能。函數(shù)包含函數(shù)名、若干參數(shù)和返回值。2.4.1 創(chuàng)建自定義函數(shù)funct

27、ion 函數(shù)名 (參數(shù)列表) 函數(shù)體function PrintWelcome() document.write(歡迎使用JavaScript);2.4 函數(shù)2.4.2 調(diào)用函數(shù) 1在JavaScript中使用函數(shù)名來調(diào)用函數(shù)在JavaScript中，可以直接使用函數(shù)名來調(diào)用函數(shù)。無論是內(nèi)置函數(shù)還是自定義函數(shù)，調(diào)用函數(shù)的方法都是一致的。2在HTML中使用javascript:方式調(diào)用JavaScript函數(shù)在HTML中的a鏈接中可以使用javascript:方式調(diào)用JavaScript函數(shù)，方法如下：3與事件結(jié)合調(diào)用JavaScript函數(shù)可以將JavaScript函數(shù)指定為JavaScrip

28、t事件的處理函數(shù)。當(dāng)觸發(fā)事件時(shí)會(huì)自動(dòng)調(diào)用指定的JavaScript函數(shù)。設(shè)置 Hello1:function() console.log(單擊我了) 2.4 函數(shù)/計(jì)算并打印num1和num 2之和 function sum(num1, num2) console.log(num1 + num2); sum(1, 2); /結(jié)果是3與事件結(jié)合調(diào)用JavaScript函數(shù)設(shè)置 Hello1:function() console.log(單擊我了) 2.4 函數(shù)2.4.3 變量的作用域 var a = 100;/ 全局變量 function setNumber() var a = 10;/ 局部變

29、量 console.log(a);/ 打印局部變量a setNumber(); console.log(); console.log(a);/ 打印全局變量a程序運(yùn)行結(jié)果：101002.4 函數(shù)2.4.3 變量的作用域在函數(shù)中定義的變量被稱為局部變量。局部變量只在定義它的函數(shù)內(nèi)部有效，在函數(shù)體之外，即使使用同名的變量，也會(huì)被看作是另一個(gè)變量。相應(yīng)地，在函數(shù)體之外定義的變量是全局變量。全局變量在定義后的代碼中都有效，包括它后面定義的函數(shù)體內(nèi)。如果局部變量和全局變量同名，則在定義局部變量的函數(shù)中，只有局部變量是有效的。2.4 函數(shù)2.4.4 函數(shù)的返回值使用return語句可以返回函數(shù)值并退出函數(shù)

30、function 函數(shù)名() return 返回值;2.4.5 定義函數(shù)庫JavaScript函數(shù)庫是一個(gè). js文件，其中包含函數(shù)的定義。在HTML文件中引用函數(shù)庫js文件的方法如下： / 引用js文件中的函數(shù)求(m,n)兩個(gè)數(shù)字之間的和，代碼如下：function getTotal(m,n) var total=0; if(m=n) return false; / n必需大于m否則無意義 for(var i=m;i=n;i+) total+=i; return total;console.log(getTotal(1, 10);2.4 函數(shù)2.4.6 JavaScript內(nèi)置函數(shù)1aler

31、t()函數(shù)alert()函數(shù)用于彈出一個(gè)消息對(duì)話框，該對(duì)話框包括一個(gè)“確定”按鈕。2confirm()函數(shù)confirm()函數(shù)用于顯示一個(gè)請(qǐng)求確認(rèn)對(duì)話框，包含一個(gè)“確定”按鈕和一個(gè)“取消”按鈕。在程序中，可以根據(jù)用戶的選擇決定執(zhí)行的操作2.4 函數(shù)3parseFloat()函數(shù)parseFloat()函數(shù)用于將字符串轉(zhuǎn)換成浮點(diǎn)數(shù)字形式。語法如下：parseFloat(str)參數(shù)str是待解析的字符串。函數(shù)返回解析后的數(shù)字。4parseInt ()函數(shù)parseInt ()函數(shù)用于將字符串轉(zhuǎn)換成整型數(shù)字形式。語法如下：parseInt(str, radix)參數(shù)str是待解析的字符串；參數(shù)r

32、adix可選。表示要解析的數(shù)字的進(jìn)制。該值介于 2 36 之間。parseInt(10);/10進(jìn)制，結(jié)果是10parseInt(f,16);/16進(jìn)制，結(jié)果是15parseInt(010,2);/2進(jìn)制，結(jié)果是22.4 函數(shù)3isNaN()函數(shù)isNaN()用于檢驗(yàn)?zāi)硞€(gè)值是否為NaN（not a number不是數(shù)字），返回false為數(shù)字，返回true為非數(shù)字。var num = 123.456789abc;isNaN(num) /結(jié)果是trueisNaN(123)/結(jié)果是false4強(qiáng)制類型轉(zhuǎn)換函數(shù)用戶可以使用強(qiáng)制類型轉(zhuǎn)換函數(shù)來轉(zhuǎn)換值的類型。在ECMAScript中可以使用以下3種強(qiáng)制類

33、型轉(zhuǎn)換函數(shù)。String(value)：把給定的值轉(zhuǎn)換成字符串。類似于toString()方法，但是和它又不同，對(duì)null或undefined值toString()會(huì)報(bào)錯(cuò)。Boolean(value)：把給定的值轉(zhuǎn)換成Boolean型。給定的值為空字符串、數(shù)字0、undefined或null返回false，其余返回true。Number(value)：把給定的值轉(zhuǎn)換成數(shù)字（可以是整數(shù)或浮點(diǎn)數(shù)）。2.4 函數(shù)var a=String(123); /返回123var a=Boolean(0); /返回falsevar a=Boolean(undefined); /返回falsevar a=Bool

34、ean(null); /返回falsevar a=Boolean(50); /返回truevar a=Number(11.11); /返回11.115保留幾位小數(shù)NumberObject.toFixed(位數(shù))；toFixed()位數(shù)功能是保留幾位小數(shù)（四舍五入），參數(shù)為保留的小數(shù)點(diǎn)后位數(shù)，返回的值為String 類型。var a=13.37.toFixed(4); /返回13.3700var a=13.378888.toFixed(2); /返回13.382.5 JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)JavaScript腳本是面向?qū)ο螅∣bject-based）的編程語言，它可以將屬性和代碼集

35、成在一起，定義為類，從而使程序設(shè)計(jì)更加簡單、規(guī)范、有條理。通過對(duì)象的來訪問可大大簡化JavaScript程序的設(shè)計(jì)，并提供直觀、模塊化的方式進(jìn)行腳本程序開發(fā)。2.5.1 面向?qū)ο蟪绦蛟O(shè)計(jì)思想對(duì)象是客觀世界存在的人、事和物體等實(shí)體?，F(xiàn)實(shí)生活中存在很多的對(duì)象，比如貓、自行車等。不難發(fā)現(xiàn)它們有兩個(gè)共同特征：都有狀態(tài)和行為。圖2-8 以自然人構(gòu)造的對(duì)象2.5.1 面向?qū)ο蟪绦蛟O(shè)計(jì)思想凡是能夠提取一定度量數(shù)據(jù)并能通過某種途徑對(duì)度量數(shù)據(jù)實(shí)施操作的客觀存在都可以構(gòu)成一個(gè)對(duì)象，且用屬性來描述對(duì)象的狀態(tài)，使用方法和事件來處理對(duì)象的各種行為。下面介紹一些概念。對(duì)象（Object）：面向?qū)ο蟪绦蛟O(shè)計(jì)思想可以將一組數(shù)

36、據(jù)和與這組數(shù)據(jù)有關(guān)操作組裝在一起，形成一個(gè)實(shí)體，這個(gè)實(shí)體就是對(duì)象。屬性：用來描述對(duì)象的狀態(tài)。通過定義屬性值，可以改變對(duì)象的狀態(tài)。如圖2-8中，可以定義height表示該自然人身高，字符串HungryOrNot來表示該自然人肚子的狀態(tài)，HungryOrNot成為自然人的某個(gè)屬性；方法：也稱為成員函數(shù)，是指對(duì)象上的操作。如圖2-8中，可以定義方法Eat( )來處理自然人肚子很餓的情況，Eat( )成為自然人的某個(gè)方法；事件：由于對(duì)象行為的復(fù)雜性，對(duì)象的某些行為需要用戶根據(jù)實(shí)際情況來編寫處理該行為的代碼，該代碼稱為事件。在圖2-8中，可以定義事件DrinkBeforeEat( )來處理自然人肚子很餓

37、同時(shí)嘴巴很渴需要先喝水后進(jìn)食。2.5.2 面向?qū)ο缶幊堂嫦驅(qū)ο缶幊蹋∣PP）是一種計(jì)算機(jī)編程架構(gòu)，具有三個(gè)最基本的特點(diǎn)：封裝、重用性（繼承）、多態(tài)。（1）類（class）：具有相同或相似性質(zhì)的對(duì)象的抽象就是類。 （2）封裝：將數(shù)據(jù)和操作捆綁在一起，定義一個(gè)新類的過程就是封裝。（3）繼承：類之間的關(guān)系，在這種關(guān)系中，一個(gè)類共享了一個(gè)或多個(gè)其他類定義的屬性和行為。 （4）多態(tài)：從同一個(gè)類中繼承得到的子類也具有多態(tài)性，即相同的函數(shù)名在不同子類中有不同的實(shí)現(xiàn)。就如同子女會(huì)從父母那里繼承到人類共有的特性，而子女也具有自己的特性。實(shí)際上，JavaScript語言是通過一種叫做原型（prototype）的方

38、式來實(shí)現(xiàn)面向?qū)ο缶幊痰摹?.5.3 JavaScript類的定義和實(shí)例化嚴(yán)格的說，JavaScript 是基于對(duì)象的編程語言，而不是面向?qū)ο蟮木幊陶Z言。在面向?qū)ο蟮木幊陶Z言中（如Java、C+、C#、PHP等），聲明一個(gè)類使用 class 關(guān)鍵字。但是在JavaScript中，沒有聲明類的關(guān)鍵字，也沒有辦法對(duì)類的訪問權(quán)限進(jìn)行控制。JavaScript 使用函數(shù)來定義類。1 .類的定義定義一個(gè)Person類：function Person() = 張三 ; / 定義一個(gè)屬性 name this.sex= 男 ; / 定義一個(gè)屬性 sex this.say=function() / 定義一個(gè)方法

39、say() console.log(我的名字是 + + ，性別是 + this.sex + 。); 2.5.3 JavaScript類的定義和實(shí)例化2. 創(chuàng)建對(duì)象（類的實(shí)例化）創(chuàng)建對(duì)象的過程也是類實(shí)例化的過程。在JavaScript中，創(chuàng)建對(duì)象（即類的實(shí)例化）使用 new 關(guān)鍵字。創(chuàng)建對(duì)象語法：new className()將上面的 Person 類實(shí)例化：var zhangsan=new Person();zhangsan.say();運(yùn)行代碼，輸出如下內(nèi)容： 大家好，我的名字是 張三 ，性別是 男 。2.5.3 JavaScript類的定義和實(shí)例化3. 通過對(duì)象直接初始化創(chuàng)建對(duì)象通過直接初

40、始化對(duì)象來創(chuàng)建對(duì)象，與定義對(duì)象的構(gòu)造函數(shù)方法不同的是，該方法不需要new生成此對(duì)象的實(shí)例，改寫zhangsan對(duì)象：/直接初始化對(duì)象var zhangsan= name:張三, sex:男, say: function ()/定義對(duì)象的方法 document.write(大家好，我的名字是 + + ，性別是 + this.sex);zhangsan.say();對(duì)象直接初始化是一個(gè)“名字/值”對(duì)列表，最后用一個(gè)大括號(hào)括起來?！懊?值”對(duì)表示對(duì)象的一個(gè)屬性或方法，名和值之間用冒號(hào)分隔。2.5.3 JavaScript類的定義和實(shí)例化3. 通過對(duì)象直接初始化創(chuàng)建對(duì)象上面的zhangsan對(duì)象，也

41、可以這樣來創(chuàng)建：var zhangsan= = 張三;zhangsan.sex = 男;zhangsan.say = function() return 嗨！大家好，我來了。; 該方法在只需生成一個(gè)對(duì)象實(shí)例并進(jìn)行相關(guān)操作的情況下使用時(shí)，代碼緊湊，編程效率高，但致命的是，若要生成若干個(gè)對(duì)象實(shí)例，就必須為生成每個(gè)對(duì)象實(shí)例重復(fù)相同的代碼結(jié)構(gòu)，代碼的重用性比較差，不符合面向?qū)ο蟮木幊趟悸?，?yīng)盡量避免使用該方法創(chuàng)建自定義對(duì)象。2.5.4 JavaScript訪問對(duì)象的屬性和方法屬性是一個(gè)變量，用來表示一個(gè)對(duì)象的特征，如顏色、大小、重量等；方法是一個(gè)函數(shù)，用來表示對(duì)象的操作，如奔跑、呼吸、跳躍等。對(duì)象的屬

42、性和方法統(tǒng)稱為對(duì)象的成員。在JavaScript中，可以使用“ . ”和“ ”來訪問對(duì)象的屬性。1. 使用“ . ”來訪問對(duì)象屬性語法：objectNpertyName其中，objectName 為對(duì)象名稱，propertyName為屬性名稱。 2. 使用“ ”來訪問對(duì)象屬性語法： objectNamepropertyName3. 訪問對(duì)象的方法在JavaScript中，只能使用“ . ”來訪問對(duì)象的方法。語法：objectName.methodName()2.5.4 JavaScript訪問對(duì)象的屬性和方法【例2-15】創(chuàng)建一個(gè)Person對(duì)象并訪問其成員。function Person()

43、 =張三; / 定義一個(gè)屬性name this.sex=男; / 定義一個(gè)屬性sex this.age=22; / 定義一個(gè)屬性age this.say=function() / 定義一個(gè)方法 say() return 我的名字是 + + ，性別是 + this.sex + ，今年 + this.age +歲!; var zhangsan=new Person();console.log(姓名：+); / 使用“.”來訪問對(duì)象屬性console.log(性別：+zhangsan.sex);console.log(年齡：+zhangsanage); / 使用“ ”來訪問對(duì)象屬性console.l

44、og(zhangsan.say(); / 使用“.”來訪問對(duì)象方法動(dòng)態(tài)添加對(duì)象的屬性和方法【例2-16】用Person類創(chuàng)建一個(gè)對(duì)象，向其添加屬性和方法。function Person(name,sex) / 定義類 =name; / 定義一個(gè)屬性 name this.sex=sex; / 定義一個(gè)屬性 sex this.say=function() / 定義一個(gè)方法 say() return 大家好，我的名字是 + + ，性別是 + this.sex + 。; var zhangsan=new Person(張三,男); / 創(chuàng)建對(duì)象zhangsan.say();/ 動(dòng)態(tài)添加屬性和方法zha

45、ngsan.tel /動(dòng)態(tài)添加屬性telzhangsan.run=function() / 動(dòng)態(tài)添加方法run return 我跑得很快！ ;/ 彈出警告框alert(姓名：+);alert(姓別：+zhangsan.sex);alert(zhangsan.say();alert(電話：+zhangsan.tel);alert(zhangsan.run();2.6 JavaScript內(nèi)置對(duì)象JavaScript 腳本提供豐富的內(nèi)置對(duì)象（內(nèi)置類），包括同基本數(shù)據(jù)類型相關(guān)的對(duì)象（如String、Boolean、Number）、允許創(chuàng)建用戶自定義和組合類型的對(duì)象（如Ob

46、ject、Array）和其他能簡化JavaScript操作的對(duì)象（如Math、Date、RegExp、Function）。了解這些內(nèi)置對(duì)象是JavaScript編程和游戲開發(fā)的基礎(chǔ)和前提。2.6 JavaScript內(nèi)置對(duì)象JavaScript的內(nèi)置對(duì)象（內(nèi)置類）框架如圖所示。2.6.2 基類Object所有的JavaScript對(duì)象都繼承自O(shè)bject類，后者為前者提供基本的屬性（如prototype屬性等）和方法（如toString()方法等）。而前者也在這些屬性和方法基礎(chǔ)上進(jìn)行擴(kuò)展，以支持特定的某些操作。基類Object的屬性和方法見表2-2所示。2.6.3 Date類Date類主要提供

47、獲取和設(shè)置日期和時(shí)間的方法，如getYear()、getMonth()、getDate()等。Date類的常用方法見表2-3所示。2.6.4 String類String是JavaScript的字符串類，用于管理和操作字符串?dāng)?shù)據(jù)?？梢允褂孟旅?種方法創(chuàng)建String對(duì)象：MyStr = new String(這是一個(gè)測(cè)試字符串); /把參數(shù)作為MyStr對(duì)象的初始值。MyStr = 這是一個(gè)測(cè)試字符串; / 直接對(duì)String對(duì)象賦值字符串String類只有一個(gè)屬性length，用來返回字符串的長度。【例2-18】計(jì)算String對(duì)象的長度。 var MyStr; MyStr = new Str

48、ing(這是一個(gè)測(cè)試字符串); console.log(“ +MyStr+”的長度為: + MyStr. length); /演示使用String對(duì)象的length屬性運(yùn)行結(jié)果如下： “這是一個(gè)測(cè)試字符串”的長度為:9String類的常用方法見表2-4所示。2.6.4 String類【例2-19】演示slice()方法的例子。var str=Hello world!console.log(str. slice (6, 11)2.6.5 Array類Array數(shù)組是在內(nèi)存中保存一組數(shù)據(jù)。Array類的常用方法見表2-5所示。1Array數(shù)組創(chuàng)建與使用方法一：可以使用new關(guān)鍵字創(chuàng)建Array對(duì)象

49、，方法如下：Array對(duì)象 = new Array(數(shù)組大小)例如下面的語句可以創(chuàng)建一個(gè)由3個(gè)元素組成的數(shù)組cars：var cars=new Array(3);通過下面的方法訪問數(shù)組元素。數(shù)組元素值 = 數(shù)組名索引var cars=new Array(3);cars0=Audi;cars1=BMW;cars2=Volvo;方法二：在創(chuàng)建數(shù)組對(duì)象的時(shí)候給元素賦值。var cars=new Array(Audi,BMW,Volvo);方法三：直接賦值。var cars=Audi,BMW,Volvo;2.6.5 Array類2數(shù)組遍歷可以使用for語句遍歷數(shù)組的所有索引，然后使用數(shù)組名索引方法訪問

50、每個(gè)數(shù)組元素?！纠?-20】使用for語句遍歷數(shù)組。 var MyStr; MyArr = new Array(3); MyArr0 = 中國; MyArr1 = 美國; MyArr2 = 日本; for(var i=0;i MyArr.length; i+) console.log(MyArri);2.6.5 Array類3數(shù)組排序使用Array類的sort ()方法可以對(duì)數(shù)組元素進(jìn)行排序，sort ()方法返回排序后的數(shù)組。語法如下：arrayObject. sort(sortby)參數(shù)sortby可選，用于規(guī)定排序順序，sortby必須是函數(shù)。如果調(diào)用該方法時(shí)沒有使用參數(shù)，將按字母順序?qū)?/p>

51、數(shù)組中的元素進(jìn)行排序，說得更精確點(diǎn)，是按照字符編碼的順序進(jìn)行排序?！纠?-22】對(duì)數(shù)組排序的例子。 var arr = new Array(6) ; arr0 = George; arr1 = Johney; arr2 = Thomas; arr3 = James; arr4 = Adrew; arr5 = Martin; console.log(排序前+ arr); console.log(排序后+ arr.sort();2.6.5 Array類4數(shù)組的操作(1) push()方法往數(shù)組后面添加數(shù)組，并返回?cái)?shù)組新長度。var a = aa,bb,cc;console.log(a.push(d

52、d); /輸出4console.log(a); /輸出 aa,bb,cc,dd而unshift()方法可向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長度。(2) pop()方法和shift()方法pop()方法刪除數(shù)組最后一個(gè)元素，并返回該元素。而shift()方法用于把數(shù)組的第一個(gè)元素從其中刪除，并返回第一個(gè)元素的值。var a = aa,bb,cc;console.log(a.pop(); /輸出ccconsole.log(a.shift ();/輸出aa2.6.5 Array類 (3) slice()方法可從已有的數(shù)組中返回選定的元素的一個(gè)新數(shù)組。語法如下：arrayObject.slic

53、e(start,end)(4) join()方法用于把數(shù)組中的所有元素連接起來放入一個(gè)字符串。 var arr = new Array(3) ; arr0 = George; arr1 = John; arr2 = Thomas; console.log(arr.join(.);/ 輸出 George.John.Thomas2.6.5 Array類5二維數(shù)組數(shù)組中的元素又是數(shù)組就成為二維數(shù)組。創(chuàng)建二維數(shù)組方法如下：方法一：先創(chuàng)建一個(gè)一維數(shù)組，然后該一維數(shù)組的所有元素再創(chuàng)建一維數(shù)組。var persons = new Array(3);/創(chuàng)建一個(gè)一維數(shù)組persons0 = new Array(

54、2);/每個(gè)元素persons0又是一維數(shù)組persons1 = new Array(2);/每個(gè)元素persons1又是一維數(shù)組persons2 = new Array(2);/每個(gè)元素persons2又是一維數(shù)組persons00 = zhangsan;persons01 = 25;persons10 = lisi; persons11 = 22;persons20 = wangwu;persons21 = 32;方法二：先創(chuàng)建一個(gè)一維數(shù)組，然后該一維數(shù)組的所有元素直接賦值。var persons = new Array(3);persons0 = zhangsan, 25;persons

55、1 = lisi, 21;persons2 = wangwu, 32;方法三：直接賦值。var persons = zhangsan, 25, lisi, 21, wangwu, 32;2.6.5 Array類5二維數(shù)組數(shù)組中的元素又是數(shù)組就成為二維數(shù)組。創(chuàng)建二維數(shù)組方法如下：方法一：先創(chuàng)建一個(gè)一維數(shù)組，然后該一維數(shù)組的所有元素再創(chuàng)建一維數(shù)組。var persons = new Array(3);/創(chuàng)建一個(gè)一維數(shù)組persons0 = new Array(2);/每個(gè)元素persons0又是一維數(shù)組persons1 = new Array(2);/每個(gè)元素persons1又是一維數(shù)組perso

56、ns2 = new Array(2);/每個(gè)元素persons2又是一維數(shù)組persons00 = zhangsan;persons01 = 25;persons10 = lisi; persons11 = 22;persons20 = wangwu;persons21 = 32;方法二：先創(chuàng)建一個(gè)一維數(shù)組，然后該一維數(shù)組的所有元素直接賦值。var persons = new Array(3);persons0 = zhangsan, 25;persons1 = lisi, 21;persons2 = wangwu, 32;方法三：直接賦值。var persons = zhangsan, 25

57、, lisi, 21, wangwu, 32;2.6.6 Math對(duì)象Math對(duì)象是對(duì)一個(gè)已創(chuàng)建好的Math類的實(shí)例，因此不能使用new運(yùn)算符。其提供一些屬性是數(shù)學(xué)中常用的常量，E（自然對(duì)數(shù)的底，約為2.718）、LN2（2的自然對(duì)數(shù)）、LN10（10的自然對(duì)數(shù)）、LOG2E（以2為底的e的對(duì)數(shù)）、LOG10E（以10為底的e的對(duì)數(shù)）、PI（圓周率）等。Math 對(duì)象提供的一些方法是數(shù)學(xué)中常用的函數(shù)，如sin()、random()、log()等。Math對(duì)象的常用方法見表 2-6所示。2.7 ES6簡介微信小程序已經(jīng)支持絕大部分的ES6 API，用戶可以放心的使用。2.7.1 變量相關(guān)ES20

58、15(ES6) 新增加了兩個(gè)重要的JavaScript關(guān)鍵字：let和const。let聲明的變量只在let所在的代碼塊（一對(duì)花括號(hào)內(nèi)部的代碼）內(nèi)有效，也成為塊作用域。let只能聲明同一個(gè)變量一次而var可以聲明多次。for循環(huán)計(jì)數(shù)器很適合用let聲明。var j=5;for (let j = 0; j 左邊為函數(shù)輸入?yún)?shù)，而右邊是進(jìn)行的操作以及返回的值。例如：x = x * x上面的箭頭函數(shù)相當(dāng)于： 匿名函數(shù)的一種簡寫function (x) return x * x;如果參數(shù)不是一個(gè)，就需要用括號(hào)()括起來。/ 兩個(gè)參數(shù):(x, y) = x * x + y * y 如果要返回一個(gè)對(duì)象，就

59、要注意，如果是單表達(dá)式，這么寫的話會(huì)報(bào)錯(cuò)。x = foo: x / Syntax Error:因?yàn)楹秃瘮?shù)體的 . 有語法沖突，所以要改為：x = ( foo: x ) / okES6標(biāo)準(zhǔn)新增了一種新的函數(shù)Arrow Function（箭頭函數(shù)）。箭頭函數(shù)的定義用的就是一個(gè)箭頭。2.7.6 箭頭函數(shù)2this相關(guān)箭頭函數(shù)看上去是匿名函數(shù)的一種簡寫，但實(shí)際上，箭頭函數(shù)和匿名函數(shù)有個(gè)明顯的區(qū)別：箭頭函數(shù)沒有自己的this，箭頭函數(shù)會(huì)捕獲其所在上下文的this值，作為自己的this。可以解決由于JavaScript嵌套函數(shù)中this指向的問題。通常來說，箭頭函數(shù)內(nèi)部的this就是外層代碼塊的this。

60、 = window;var obj = name:latency, show_name:function () /箭頭函數(shù)的this，指向箭頭函數(shù)定義時(shí)所處的對(duì)象，默認(rèn)使用外層函數(shù)的this. var fn = () = console.log(); /其this指向obj，輸出latency fn(); ,obj.show_name(); /輸出obj的name：latency 以上例子就可以很清楚的看出箭頭函數(shù)和普通函數(shù)中this的區(qū)別。箭頭函數(shù)與普通函數(shù)的區(qū)別var obj = a: 10, b: () = console.log(this.a); / undefined console