JavaScript 函數(shù)課件教學(xué)

1、JavaScript程序設(shè)計(jì)基礎(chǔ)第七章 函數(shù)變量的作用域21函數(shù)的定義與調(diào)用匿名函數(shù)3知識(shí)架構(gòu)7.1 函數(shù)的定義初識(shí)函數(shù)函數(shù)：用于封裝一段完成特定功能的代碼。相當(dāng)于將一條或多條語(yǔ)句組成的代碼塊包裹起來(lái)，用戶(hù)在使用時(shí)只需關(guān)心參數(shù)和返回值，就能完成特定的功能，而不用了解具體的實(shí)現(xiàn)。7.1.1 函數(shù)的創(chuàng)建函數(shù)聲明parseFloat()用于返回解析字符串后的浮點(diǎn)數(shù)。funcName為函數(shù)名。parameters為函數(shù)的參數(shù)。statements是函數(shù)體。return指定函數(shù)的返回值函數(shù)只有被調(diào)用時(shí)才執(zhí)行其內(nèi)部封裝的函數(shù)體。function funcName (parameters) statemen

2、ts; return表達(dá)式;7.1.1 函數(shù)的創(chuàng)建2. 函數(shù)表達(dá)式以上函數(shù)實(shí)際上是一個(gè)匿名函數(shù)(函數(shù)沒(méi)有名稱(chēng))，這種寫(xiě)法將一個(gè)匿名函數(shù)賦值給變量。這時(shí)，這個(gè)匿名函數(shù)又稱(chēng)函數(shù)表達(dá)式（Function Expression）。var add = function(x,y) var result = x + y; return result; 當(dāng)函數(shù)定義完成后，要想在程序中發(fā)揮函數(shù)的作用，必須得調(diào)用這個(gè)函數(shù)。函數(shù)的調(diào)用非常簡(jiǎn)單，只需引用函數(shù)名，并傳入相應(yīng)的參數(shù)即可。函數(shù)聲明與調(diào)用的編寫(xiě)順序不分前后。函數(shù)名稱(chēng)(參數(shù)1, 參數(shù)2, )參數(shù)1，參數(shù)2是可選的，用于表示形參列表，其值可以是零個(gè)、一個(gè)或多個(gè)。

3、7.1.2 函數(shù)的調(diào)用示例演示：【實(shí)例7-1 7-2 7-3】7.2 函數(shù)的作用域思考：聲明變量后就可以在任意位置使用該變量嘛？回答：不是。舉例：函數(shù)內(nèi)var關(guān)鍵字聲明的變量，不能在函數(shù)外訪(fǎng)問(wèn)。function info() var age = 18;/ 輸出結(jié)果：Uncaught ReferenceError: age is not definedconsole.log(age); 示例總結(jié)：變量的使用是有作用域范圍的。作用域劃分：全局作用域、函數(shù)作用域和塊級(jí)作用域（ES6提供的）。不同作用域?qū)?yīng)的變量：全局變量、局部變量、塊級(jí)變量（ES6提供的）。demo.js文件函數(shù)含有，如for函數(shù)作

4、用域全局作用域塊級(jí)作用域7.2.1 全局變量和局部變量全局變量：不在任何函數(shù)內(nèi)聲明的變量（顯示定義）或在函數(shù)內(nèi)省略var聲明變量（隱式定義）都稱(chēng)為全局變量。作用范圍：它在同一個(gè)頁(yè)面文件中的所有腳本內(nèi)都可以使用。demo.js文件var num = 1;函數(shù)sum = 0;全局變量7.2.1 全局變量和局部變量局部變量：在函數(shù)體內(nèi)利用var關(guān)鍵字定義的變量稱(chēng)為局部變量，它僅在該函數(shù)體內(nèi)有效。demo.js文件var num = 1;函數(shù)var sum = 0;局部變量7.2.1 全局變量和局部變量塊級(jí)變量：ES6提供的let關(guān)鍵字聲明的變量稱(chēng)為塊級(jí)變量，僅在“”中間有效，如if、for或whil

5、e語(yǔ)句等。塊級(jí)變量demo.js文件var num = 1;函數(shù)let sum = 0;for循環(huán)let i = 2;7.2.1 全局變量和局部變量示例演示：【實(shí)例7-4】函數(shù)表達(dá)式var fn = function sum(num1, num2) return num1 + num2;fn();sum();function sum(num1, num2) return num1 + num2;函數(shù)表達(dá)式函數(shù)聲明方式 函數(shù)的定義方式不同 函數(shù)的調(diào)用方式不同 函數(shù)定義與調(diào)用順序不同7.3 匿名函數(shù)匿名函數(shù)概念：匿名函數(shù)指的是沒(méi)有函數(shù)名稱(chēng)的函數(shù)。作用：可以有效的避免全局變量的污染以及函數(shù)名的沖突問(wèn)

6、題。說(shuō)明：既是函數(shù)表達(dá)式的另一種表示形式，又可通過(guò)函數(shù)聲明的方式實(shí)現(xiàn)調(diào)用。7.3 匿名函數(shù)匿名函數(shù)var fn = function (num1, num2) return num1 + num2;fn(1, 2);(function (num1, num2) return num1 + num2;)(2, 3);document.body.onclick = function () alert(Hi, everybody!); 函數(shù)表達(dá)式中省略函數(shù)名 處理事件 自調(diào)用方式7.3 匿名函數(shù)回調(diào)函數(shù)概念：所謂回調(diào)函數(shù)指的就是一個(gè)函數(shù)A作為參數(shù)傳遞給一個(gè)函數(shù)B，然后在B的函數(shù)體內(nèi)調(diào)用函數(shù)A。此時(shí)，

7、我們稱(chēng)函數(shù)A為回調(diào)函數(shù)。提示：匿名函數(shù)常用作函數(shù)的參數(shù)傳遞，實(shí)現(xiàn)回調(diào)函數(shù)。應(yīng)用：函數(shù)體中某部分功能由調(diào)用者決定，此時(shí)可以使用回調(diào)函數(shù)。7.3 匿名函數(shù)回調(diào)函數(shù)在JavaScript中還為數(shù)組提供了很多利用回調(diào)函數(shù)實(shí)現(xiàn)具體功能的方法。方法名稱(chēng)功能描述find()返回?cái)?shù)組中滿(mǎn)足回調(diào)函數(shù)的第一個(gè)元素的值，否則返回undefinedevery()測(cè)試數(shù)組的所有元素是否都通過(guò)了回調(diào)函數(shù)的測(cè)試some()測(cè)試數(shù)組中的某些元素是否通過(guò)由回調(diào)函數(shù)實(shí)現(xiàn)的測(cè)試forEach()對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)map()創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一次提供的回調(diào)函數(shù)后返回的結(jié)果reduce()

8、對(duì)累加器和數(shù)組中的每個(gè)元素（從左到右）應(yīng)用一個(gè)函數(shù)，將其減少為單個(gè)值reduceRight()接收一個(gè)函數(shù)作為累加器（accumulator）和數(shù)組的每個(gè)值（從右到左）將其減少為單個(gè)值7.3 匿名函數(shù)回調(diào)函數(shù)以map()方法為例進(jìn)行演示，對(duì)arr數(shù)組中的每個(gè)元素都按順序調(diào)用一次回調(diào)函數(shù)。var arr = a, b, c;arr.map(function(value, index) console.log(value, index););參數(shù)：map()的參數(shù)是一個(gè)回調(diào)函數(shù)fn。fn的第1個(gè)參數(shù)表示當(dāng)前數(shù)組的元素。fn的第2個(gè)參數(shù)表示對(duì)應(yīng)元素的索引下標(biāo)。返回值：回調(diào)函數(shù)每次執(zhí)行后的返回值會(huì)組合起來(lái)形成一個(gè)新數(shù)組。示例結(jié)果：在控制臺(tái)依次可查看到，“a 0”、 “b 1”和“c 2”。7.3 匿名函數(shù)多學(xué)一招箭頭函數(shù)(p1, p2, , pN) = statements 參數(shù)函數(shù)體多個(gè)參數(shù)：(p1, p2, , pN)一個(gè)參數(shù)：(p1) 或 p1沒(méi)有參數(shù)：() 或 _函數(shù)體： statements 返回值： return expression; 函數(shù)體只有一條語(yǔ)句：expression7.4 箭頭函數(shù)多學(xué)一招箭頭函數(shù)/ 設(shè)置1個(gè)參數(shù)var fn1 = x = x + 2;console.log(fn1(4);/ 輸出結(jié)果：6