JavaScript 函數(shù)

avaScript 函數(shù)定義

JavaScript 使用關(guān)鍵字 function 定義函數(shù)

函數(shù)可以通過(guò)聲明定義，也可以是一個(gè)表達(dá)式

函數(shù)聲明

函數(shù)聲明的語(yǔ)法 :

函數(shù)聲明后不會(huì)立即執(zhí)行，會(huì)在我們需要的時(shí)候調(diào)用到

分號(hào)是用來(lái)分隔可執(zhí)行JavaScript語(yǔ)句，由于函數(shù)聲明不是一個(gè)可執(zhí)行語(yǔ)句所以不以分號(hào)結(jié)束

函數(shù)表達(dá)式，又叫函數(shù)字面量

JavaScript 函數(shù)可以通過(guò)一個(gè)表達(dá)式定義

函數(shù)表達(dá)式可以存儲(chǔ)在變量中：

在函數(shù)表達(dá)式存儲(chǔ)在變量后，變量也可作為一個(gè)函數(shù)使用：

兩者的區(qū)別：解析器會(huì)先讀取函數(shù)聲明，并使其在執(zhí)行任何代碼之前可以訪問(wèn)；而函數(shù)表達(dá)式則必須等到解析器執(zhí)行到它所在的代碼行才會(huì)真正被解釋執(zhí)行。

以上函數(shù)實(shí)際上是一個(gè) 匿名函數(shù) (函數(shù)沒(méi)有名稱)。函數(shù)存儲(chǔ)在變量中，不需要函數(shù)名稱，通常通過(guò)變量名來(lái)調(diào)用。上述函數(shù)以分號(hào)結(jié)尾，因?yàn)樗且粋€(gè)執(zhí)行語(yǔ)句。

函數(shù)的幾種寫法

1 常見(jiàn)寫法:

2 匿名函數(shù)

3 自調(diào)用函數(shù)：

4 函數(shù)嵌套

5 函數(shù)繼承和構(gòu)造函數(shù)

Function() 構(gòu)造函數(shù)

在以上實(shí)例中，我們了解到函數(shù)通過(guò)關(guān)鍵字 function 定義。函數(shù)同樣可以通過(guò)內(nèi)置的 JavaScript 函數(shù)構(gòu)造器（Function()）定義

實(shí)際上，你不必使用構(gòu)造函數(shù)。上面實(shí)例可以寫成：

在 JavaScript 中，很多時(shí)候，你需要避免使用 new 關(guān)鍵字

函數(shù)提升（Hoisting）

提升（Hoisting）是 JavaScript 默認(rèn)將當(dāng)前作用域提升到前面去的的行為。

提升（Hoisting）應(yīng)用在變量的聲明與函數(shù)的聲明，因此，函數(shù)可以在聲明之前調(diào)用：

使用表達(dá)式定義函數(shù)時(shí)無(wú)法提升

以上代碼運(yùn)行即會(huì)報(bào)錯(cuò)，原因在于函數(shù)位于一個(gè)初始化語(yǔ)句中，而不是一個(gè)函數(shù)聲明。換句話講，在執(zhí)行到函數(shù)所在的語(yǔ)句之前，變量myFunction中不會(huì)保存有對(duì)函數(shù)的引用；而且，由于第一行代碼就會(huì)導(dǎo)致“unexpected identifier”（意外標(biāo)識(shí)符）錯(cuò)誤，實(shí)際上也不會(huì)執(zhí)行到下一行。

除了聲明時(shí)候可以通過(guò)變量訪問(wèn)函數(shù)這一點(diǎn)區(qū)別之外，函數(shù)聲明與函數(shù)表達(dá)式的語(yǔ)法其實(shí)是等價(jià)的。

自調(diào)用函數(shù)

函數(shù)表達(dá)式可以 "自調(diào)用"。自調(diào)用表達(dá)式會(huì)自動(dòng)調(diào)用。如果表達(dá)式后面緊跟 () ，則會(huì)自動(dòng)調(diào)用。不能自調(diào)用聲明的函數(shù)。通過(guò)添加括號(hào)，來(lái)說(shuō)明它是一個(gè)函數(shù)表達(dá)式：

以上函數(shù)實(shí)際上是一個(gè) 匿名自我調(diào)用的函數(shù)

自調(diào)用函數(shù)可用來(lái)傳參帶返回值

自執(zhí)行函數(shù)嚴(yán)格來(lái)說(shuō)也叫函數(shù)表達(dá)式，它主要用于創(chuàng)建一個(gè)新的作用域，在此作用域內(nèi)聲明的變量，不會(huì)和其它作用域內(nèi)的變量沖突或混淆，大多是以匿名函數(shù)方式存在，且立即自動(dòng)執(zhí)行。

JavaScript函數(shù)可作為一個(gè)值使用

JavaScript函數(shù)可作為表達(dá)式使用：

函數(shù)是對(duì)象

在 JavaScript 中使用 typeof 操作符判斷函數(shù)類型將返回 "function" ,但JavaScript 函數(shù)描述為一個(gè)對(duì)象更加準(zhǔn)確。

JavaScript 函數(shù)有屬性和方法。

arguments.length 屬性返回函數(shù)調(diào)用過(guò)程接收到的參數(shù)個(gè)數(shù)：

toString() 方法將函數(shù)作為一個(gè)字符串返回:

函數(shù)定義作為對(duì)象的屬性，稱之為對(duì)象方法。

函數(shù)如果用于創(chuàng)建新的對(duì)象，稱之為對(duì)象的構(gòu)造函數(shù)

JavaScript 函數(shù)參數(shù)

JavaScript 函數(shù)對(duì)參數(shù)的值(arguments)沒(méi)有進(jìn)行任何的檢查

函數(shù)顯式參數(shù)與隱藏參數(shù)(arguments)

函數(shù)顯式參數(shù)在函數(shù)定義時(shí)列出

函數(shù)隱藏參數(shù)(arguments)在函數(shù)調(diào)用時(shí)傳遞給函數(shù)真正的值

參數(shù)規(guī)則

JavaScript 函數(shù)定義時(shí)參數(shù)沒(méi)有指定數(shù)據(jù)類型,對(duì)隱藏參數(shù)(arguments)沒(méi)有進(jìn)行檢測(cè),對(duì)隱藏參數(shù)(arguments)的個(gè)數(shù)沒(méi)有進(jìn)行檢測(cè)

默認(rèn)參數(shù)

如果函數(shù)在調(diào)用時(shí)缺少參數(shù)，參數(shù)會(huì)默認(rèn)設(shè)置為： undefined

有時(shí)這是可以接受的，但是建議最好為參數(shù)設(shè)置一個(gè)默認(rèn)值：

或者，更簡(jiǎn)單的方式：

如果y已經(jīng)定義， y || 返回y, 因?yàn)閥是 true, 否則返回 0, 因?yàn)閡ndefined為 false

如果函數(shù)調(diào)用時(shí)設(shè)置了過(guò)多的參數(shù)，參數(shù)將無(wú)法被引用，因?yàn)闊o(wú)法找到對(duì)應(yīng)的參數(shù)名。只能使用 arguments 對(duì)象來(lái)調(diào)用

Arguments 對(duì)象

JavaScript 函數(shù)有個(gè)內(nèi)置的對(duì)象 arguments 對(duì)象。arguments 對(duì)象包含了函數(shù)調(diào)用的參數(shù)數(shù)組。通過(guò)這種方式你可以很方便的找到每個(gè)參數(shù)的值：

或者創(chuàng)建一個(gè)函數(shù)用來(lái)統(tǒng)計(jì)所有數(shù)值的和：

通過(guò)值傳遞參數(shù)

在函數(shù)中調(diào)用的參數(shù)是函數(shù)的參數(shù)。

如果函數(shù)修改參數(shù)的值，將不會(huì)修改參數(shù)的初始值（在函數(shù)外定義）。

通過(guò)對(duì)象傳遞參數(shù)

在JavaScript中可以引用對(duì)象的值，因此我們?cè)诤瘮?shù)內(nèi)部修改對(duì)象的屬性就會(huì)修改其初始的值。

修改對(duì)象屬性可作用于函數(shù)外部（全局變量）。

JavaScript 函數(shù)調(diào)用

JavaScript 函數(shù)有 4 種調(diào)用方式。每種方式的不同方式在于 this 的初始化

this 關(guān)鍵字

一般而言，在Javascript中，this指向函數(shù)執(zhí)行時(shí)的當(dāng)前對(duì)象

注意 this 是保留關(guān)鍵字，你不能修改 this 的值

調(diào)用 JavaScript 函數(shù)

函數(shù)中的代碼在函數(shù)被調(diào)用后執(zhí)行

作為一個(gè)函數(shù)調(diào)用

以上函數(shù)不屬于任何對(duì)象。但是在 JavaScript 中它始終是默認(rèn)的全局對(duì)象。

在 HTML 中默認(rèn)的全局對(duì)象是 HTML 頁(yè)面本身，所以函數(shù)是屬于 HTML 頁(yè)面。

在瀏覽器中的頁(yè)面對(duì)象是瀏覽器窗口(window 對(duì)象)。以上函數(shù)會(huì)自動(dòng)變?yōu)?window 對(duì)象的函數(shù)

myFunction() 和 window.myFunction() 是一樣的：

這是調(diào)用 JavaScript 函數(shù)常用的方法，但不是良好的編程習(xí)慣。全局變量，方法或函數(shù)容易造成命名沖突的bug

全局對(duì)象

當(dāng)函數(shù)沒(méi)有被自身的對(duì)象調(diào)用時(shí)， this 的值就會(huì)變成全局對(duì)象。

在 web 瀏覽器中全局對(duì)象是瀏覽器窗口（window 對(duì)象）。

該實(shí)例返回 this 的值是 window 對(duì)象:

函數(shù)作為全局對(duì)象調(diào)用，會(huì)使 this 的值成為全局對(duì)象。使用 window 對(duì)象作為一個(gè)變量容易造成程序崩潰

函數(shù)作為方法調(diào)用

在 JavaScript 中你可以將函數(shù)定義為對(duì)象的方法。

以下實(shí)例創(chuàng)建了一個(gè)對(duì)象 (myObject), 對(duì)象有兩個(gè)屬性 (firstName 和 lastName), 及一個(gè)方法 (fullName):

ullName 方法是一個(gè)函數(shù)。函數(shù)屬于對(duì)象。 myObject 是函數(shù)的所有者。

this對(duì)象，擁有 JavaScript 代碼。實(shí)例中 this 的值為 myObject 對(duì)象。

測(cè)試以下！修改 fullName 方法并返回 this 值:

函數(shù)作為對(duì)象方法調(diào)用，會(huì)使得 this 的值成為對(duì)象myObject本身

使用構(gòu)造函數(shù)調(diào)用函數(shù)，參數(shù)必須加引號(hào)

如果函數(shù)調(diào)用前使用了 new 關(guān)鍵字, 則是調(diào)用了構(gòu)造函數(shù)。這看起來(lái)就像創(chuàng)建了新的函數(shù)，但實(shí)際上 JavaScript 函數(shù)是重新創(chuàng)建的對(duì)象：

構(gòu)造函數(shù)的調(diào)用會(huì)創(chuàng)建一個(gè)新的對(duì)象。新對(duì)象會(huì)繼承構(gòu)造函數(shù)的屬性和方法

構(gòu)造函數(shù)中 this 關(guān)鍵字沒(méi)有任何的值。this 的值在函數(shù)調(diào)用時(shí)實(shí)例化對(duì)象(new object)時(shí)創(chuàng)建。

作為函數(shù)方法調(diào)用函數(shù)

在 JavaScript 中, 函數(shù)是對(duì)象。JavaScript 函數(shù)有它的屬性和方法。call() 和 apply() 是預(yù)定義的函數(shù)方法。兩個(gè)方法可用于調(diào)用函數(shù)，兩個(gè)方法的第一個(gè)參數(shù)必須是對(duì)象本身。

兩個(gè)方法都使用了對(duì)象本身作為第一個(gè)參數(shù)。兩者的區(qū)別在于第二個(gè)參數(shù)： apply傳入的是一個(gè)參數(shù)數(shù)組，也就是將多個(gè)參數(shù)組合成為一個(gè)數(shù)組傳入，而call則作為call的參數(shù)傳入（從第二個(gè)參數(shù)開(kāi)始）。call和apply的第一個(gè)參數(shù)就是this指針要指向的對(duì)象

在 JavaScript 嚴(yán)格模式(strict mode)下, 在調(diào)用函數(shù)時(shí)第一個(gè)參數(shù)會(huì)成為 this 的值，即使該參數(shù)不是一個(gè)對(duì)象。

在 JavaScript 非嚴(yán)格模式(non-strict mode)下, 如果第一個(gè)參數(shù)的值是 null 或 undefined, 它將使用全局對(duì)象替代。

通過(guò) call() 或 apply() 方法你可以設(shè)置 this 的值, 且作為已存在對(duì)象的新方法調(diào)用

JavaScript 閉包

JavaScript 變量可以是局部變量或全局變量

私有變量可以用到閉包

局部變量和全局變量

函數(shù)可以訪問(wèn)函數(shù)內(nèi)部定義的變量

函數(shù)也可以訪問(wèn)函數(shù)外部定義的變量

后面一個(gè)實(shí)例中， a 是一個(gè)全局變量。在web頁(yè)面中全局變量屬于 window 對(duì)象。全局變量可應(yīng)用于頁(yè)面上的所有腳本。

在第一個(gè)實(shí)例中， a是一個(gè)局部變量。局部變量只能用于定義它函數(shù)內(nèi)部。對(duì)于其他的函數(shù)或腳本代碼是不可用的。全局和局部變量即便名稱相同，它們也是兩個(gè)不同的變量。修改其中一個(gè)，不會(huì)影響另一個(gè)的值。

變量聲明是如果不使用 var 關(guān)鍵字，那么它就是一個(gè)全局變量，即便它在函數(shù)內(nèi)定義

變量生命周期

全局變量的作用域是全局性的，即在整個(gè)JavaScript程序中，全局變量處處都在。而在函數(shù)內(nèi)部聲明的變量，只在函數(shù)內(nèi)部起作用。這些變量是局部變量，作用域是局部性的；函數(shù)的參數(shù)也是局部性的，只在函數(shù)內(nèi)部起作用。

計(jì)數(shù)器困境

設(shè)想下如果你想統(tǒng)計(jì)一些數(shù)值，且該計(jì)數(shù)器在所有函數(shù)中都是可用的。你可以使用全局變量，函數(shù)設(shè)置計(jì)數(shù)器遞增：

計(jì)數(shù)器數(shù)值在執(zhí)行 add() 函數(shù)時(shí)發(fā)生變化。但問(wèn)題來(lái)了，頁(yè)面上的任何腳本都能改變計(jì)數(shù)器，即便沒(méi)有調(diào)用 add() 函數(shù)。如果我在函數(shù)內(nèi)聲明計(jì)數(shù)器，如果沒(méi)有調(diào)用函數(shù)將無(wú)法修改計(jì)數(shù)器的值：

以上代碼將無(wú)法正確輸出，每次我調(diào)用 add() 函數(shù)，計(jì)數(shù)器都會(huì)設(shè)置為 1。JavaScript 內(nèi)嵌函數(shù)可以解決該問(wèn)題

JavaScript 內(nèi)嵌函數(shù)

所有函數(shù)都能訪問(wèn)全局變量。實(shí)際上，在 JavaScript 中，所有函數(shù)都能訪問(wèn)它們上一層的作用域。JavaScript 支持嵌套函數(shù)。嵌套函數(shù)可以訪問(wèn)上一層的函數(shù)變量。

該實(shí)例中，內(nèi)嵌函數(shù) plus() 可以訪問(wèn)父函數(shù)的 counter 變量：

如果我們能在外部訪問(wèn) plus() 函數(shù)，這樣就能解決計(jì)數(shù)器的困境。我們同樣需要確保 counter=0 只執(zhí)行一次。我們需要閉包。

JavaScript 閉包

變量 add 指定了函數(shù)自我調(diào)用的返回字值。自我調(diào)用函數(shù)只執(zhí)行一次。設(shè)置計(jì)數(shù)器為 0。并返回函數(shù)表達(dá)式。add變量可以作為一個(gè)函數(shù)使用。非常棒的部分是它可以訪問(wèn)函數(shù)上一層作用域的計(jì)數(shù)器。這個(gè)叫作 JavaScript 閉包。它使得函數(shù)擁有私有變量變成可能。計(jì)數(shù)器受匿名函數(shù)的作用域保護(hù)，只能通過(guò) add 方法修改。

閉包是可訪問(wèn)上一層函數(shù)作用域里變量的函數(shù)，即便上一層函數(shù)已經(jīng)關(guān)閉

歡迎加油QQ群461593224 web前端學(xué)習(xí)交流

數(shù)(Function)是被設(shè)計(jì)為執(zhí)行特定任務(wù)的代碼塊。它在可以實(shí)現(xiàn)定制運(yùn)算功能的同時(shí)，還帶有一個(gè)入口和一個(gè)出口。所謂的入口，就是函數(shù)所帶的各個(gè)參數(shù)，我們可以通過(guò)這個(gè)入口，把函數(shù)的參數(shù)值代入子程序，供計(jì)算機(jī)處理；所謂出口，就是指函數(shù)的函數(shù)值，在計(jì)算求得結(jié)果之后，由此口帶回給調(diào)用它的程序。

在程序設(shè)計(jì)中，常將一些常用的功能模塊編寫成函數(shù)，放在函數(shù)庫(kù)中供用戶選用。善于利用函數(shù)，可以減少重復(fù)編寫程序段的工作量。

本文介紹Javascript函數(shù)的幾種常用定義方式。掌握J(rèn)S函數(shù)基本技術(shù)后，在統(tǒng)計(jì)數(shù)據(jù)處理過(guò)程中，我們將函數(shù)理解為某一統(tǒng)計(jì)對(duì)象（項(xiàng)目）所定制的方法。

導(dǎo)讀：

普通函數(shù)
函數(shù)arguments對(duì)象
匿名函數(shù)
閉包和遞歸函數(shù)
Promise回調(diào)函數(shù)

1、普通函數(shù)

I、基本語(yǔ)法

function 函數(shù)名稱(參數(shù)1, 參數(shù)2, 參數(shù)3) {
		//要執(zhí)行的代碼
return 返回值
}

JavaScript函數(shù)語(yǔ)法解析如下：

JavaScript函數(shù)通過(guò)function關(guān)鍵詞進(jìn)行定義，其后是函數(shù)名稱和括號(hào)()
函數(shù)名可包含字母、數(shù)字、下劃線和美元符號(hào)
圓括號(hào)可包括由逗號(hào)分隔的參數(shù)
由函數(shù)執(zhí)行的代碼被放置在花括號(hào){}中
函數(shù)返回值由return關(guān)鍵字指定

II、無(wú)參數(shù)函數(shù)

console.clear();
function test1() {
return "Hello World!";
}
//執(zhí)行函數(shù)返回"Hello World!"，并賦值給變量str
var str=test1();
console.log(str);

注：Console對(duì)象用于JavaScript調(diào)試，為了顯示Console.log輸出結(jié)果，通過(guò)按Control+Shift+i（PC平臺(tái)）來(lái)打開(kāi)Console窗口

III、有參數(shù)函數(shù)

//計(jì)算任意兩個(gè)數(shù)的和
function oSum(x, y) {
return x+y;
}
var mySum=oSum(15, 85);
console.log(mySum); //100

IV、參數(shù)默認(rèn)值設(shè)置

//求和函數(shù)中給兩個(gè)參數(shù)設(shè)置默認(rèn)值
console.clear();
function oSum(x=50, y=50) {
return x+y;
}
var mySum=oSum(15, 55);
console.log(mySum); //70
mySum=oSum(15);
console.log(mySum); //65
mySum=oSum();
console.log(mySum); //100

V、參數(shù)為函數(shù)

console.clear();
function oSum(x, y) {return x+y;}
var mySum=oSum(oSum(45, 75), 100);
console.log(mySum); //220

VI、對(duì)象{}為參數(shù) - 解構(gòu)賦值默認(rèn)值

console.clear();
function oSum({x=10, y=20}) {
return x+y;
}
console.log(oSum({})); //30，這里直接調(diào)用oSum()出錯(cuò)
console.log(oSum({x:100})); //120
console.log(oSum({y:100})); //110
console.log(oSum({x:100,y:200})); //300
console.log(oSum({y:50,x:20})); //70

VII、對(duì)象{}為參數(shù) - 雙重默認(rèn)值

//代碼容錯(cuò)更好
console.clear();
function oSum({x=10, y=20}={}) {
return x+y;
}
console.log(oSum()); //30
console.log(oSum({})); //30
console.log(oSum({x:100})); //120
console.log(oSum({y:100})); //110
console.log(oSum({x:100,y:200})); //300
console.log(oSum({y:50,x:20})); //70

2、函數(shù)arguments對(duì)象

在JavaScript中，參數(shù)在函數(shù)內(nèi)部是以一個(gè)數(shù)組表示的，arguments是函數(shù)內(nèi)部的一個(gè)專門用來(lái)存儲(chǔ)實(shí)參的數(shù)組對(duì)象。函數(shù)arguments的對(duì)象在函數(shù)運(yùn)行時(shí)用于檢測(cè)和重新設(shè)置參數(shù)。

I、arguments.length - 函數(shù)參數(shù)數(shù)量

console.clear();
function fn(a,b,c){
console.log(arguments.length); //3
return a+b+c;
}
console.log(fn(1,2,3)); //6

II、arguments[] - 函數(shù)輸出和設(shè)置

console.clear();
function fn(a,b,c){
console.log(arguments[0]); //1
console.log(arguments[1]); //2
console.log(arguments[2]); //3
arguments[0]=5; //重新設(shè)置參數(shù)a=5
return a+b+c;
}
console.log(fn(1,2,3)); //10

III、arguments轉(zhuǎn)數(shù)組

arguments對(duì)象不是一個(gè)真正的數(shù)組，它類似于數(shù)組，但除了length屬性和索引元素之外沒(méi)有任何數(shù)組屬性。例如，它沒(méi)有pop方法。但是它可以被轉(zhuǎn)換為一個(gè)真正的數(shù)組，轉(zhuǎn)換為真實(shí)的數(shù)組后就可以使用完整的數(shù)組方法

console.clear();
function fn(a, b, c) {
var arr=Array.from(arguments); //進(jìn)行轉(zhuǎn)數(shù)組操作
console.log(arr); //輸出數(shù)組
return a + b + c;
}
console.log(fn(1, 2, 3)); //6

3、匿名函數(shù)

匿名函數(shù)顧名思義指的是沒(méi)有名稱的函數(shù)，在實(shí)際開(kāi)發(fā)中使用的頻率非常高，是學(xué)好JS編程的重點(diǎn)。

I、變量匿名函數(shù)

console.clear();
var fn=function fn(a,b,c=9) {
return a+b+c;
}
console.log(fn(1,2)); //12
console.log(fn(1,2,3)); //6

II、無(wú)名稱匿名函數(shù)

即在函數(shù)聲明時(shí)，在后面緊跟參數(shù)。JS語(yǔ)法解析此函數(shù)時(shí)，里面代碼立即執(zhí)行。

console.clear();
console.log(function(a,b){return a+b;}(2,3));
console.clear();
//加括號(hào)執(zhí)行無(wú)匿名函數(shù)（輸出"Hello Word!"）
(function (){
		console.log("Hello Word!");
})()
//加括號(hào)執(zhí)行有匿名函數(shù)（輸出"Hello Word! lei."）
(function (str){
		console.log("Hello Word!" +" "+ str +".");
})("lei")

注：函數(shù)代碼function(a,b){return a+b;}沒(méi)指定函數(shù)名稱，如果需要執(zhí)行匿名函數(shù)，在匿名函數(shù)后面加上一個(gè)括號(hào)即可立即執(zhí)行

III、事件綁定匿名函數(shù)

通常我們?yōu)g覽網(wǎng)頁(yè)時(shí)會(huì)通過(guò)鼠標(biāo)或鍵盤輸入信息，例如鼠標(biāo)點(diǎn)擊某個(gè)按鈕稱“click點(diǎn)擊事件”、文本框內(nèi)文字信息改變了稱“change事件”。總之，用戶所有的鼠標(biāo)、鍵盤操作都稱為事件，都可以通過(guò)JS代碼來(lái)捕獲這些事件。

console.clear();
//通過(guò)id或取圖標(biāo)對(duì)象
var logo=document.querySelector("#myLogo");
//給左上角“銀河統(tǒng)計(jì)”圖標(biāo)增加點(diǎn)擊事件
logo.onclick=function(){
		console.log("歡迎來(lái)到銀河統(tǒng)計(jì)工作室！");
}
logo.onmousemove=function(){
    logo.style.cursor="pointer";
    console.log("鼠標(biāo)在圖像上面！");
}
logo.onmouseout=function(){
    logo.style.cursor="default";
    console.log("鼠標(biāo)已經(jīng)離開(kāi)圖像！");
}

注：代碼中網(wǎng)頁(yè)圖像標(biāo)記為<img id="myLogo" src="###"/>

IV、對(duì)象綁定匿名函數(shù)做為對(duì)象的方法

前面我們介紹JS對(duì)象時(shí)提到，事件是有屬性和方法組成的數(shù)據(jù)結(jié)構(gòu)，事件的方法可以通過(guò)綁定匿名函數(shù)的方式建立。

console.clear();
    var obj={
    name:"Carolyn",
    age:11,
    fn:function(str){
    		return "My name is "+this.name+" Siyu"+". I'm "+this.age+" years old now.";
    }
};
console.log(obj.fn("Siyu")); //My name is Carolyn Siyu. I'm 11 years old now.

注：這里定匿名函數(shù)為屬性的返回值

V、匿名函數(shù)做為回調(diào)函數(shù)(callback)

什么是同步，什么是異步?

同步指的是一次只能完成一件任務(wù)。如果有多個(gè)任務(wù)，就必須排隊(duì)，前面一個(gè)任務(wù)完成，再執(zhí)行后面一個(gè)任務(wù)，以此類推。

異步指的是每一個(gè)任務(wù)有一個(gè)或多個(gè)回調(diào)函數(shù)（callback），前一個(gè)任務(wù)結(jié)束后，不是執(zhí)行后一個(gè)任務(wù)，而是執(zhí)行回調(diào)函數(shù)，后一個(gè)任務(wù)則是不等前一個(gè)任務(wù)結(jié)束就執(zhí)行，所以程序的執(zhí)行順序與任務(wù)的排列順序是不一致的、異步的。

JS是單線程的，它本身不可能是異步的，通過(guò)回調(diào)函數(shù)可以實(shí)現(xiàn)異步。JS中最基礎(chǔ)的異步是setTimeout和setInterval函數(shù)。

console.clear();
var interval=setInterval(function(){
		console.log("回調(diào)函數(shù)，每間隔1秒鐘會(huì)被執(zhí)行一次");
},1000);
//點(diǎn)擊銀河統(tǒng)計(jì)圖表停止setInterval計(jì)算器運(yùn)行
var logo=document.querySelector("#myLogo");
logo.onclick=function(){
    console.log("Stop!");
    clearInterval(interval)
}
setTimeout(function() {
		console.log("張三")
}, 1000 );
setTimeout(function() {
		console.log("李四")
}, 2000 );
setTimeout(function() {
		console.log("王五")
}, 3000 );
//jS最基礎(chǔ)的異步實(shí)現(xiàn)
function a() {
    console.log("執(zhí)行a函數(shù)");
    setTimeout(function() {
    		console.log("執(zhí)行a函數(shù)的延遲函數(shù)");
    },2000);
}
function b() {
		console.log("執(zhí)行b函數(shù)");
}
a();
b();

VI、匿名函數(shù)做為返回值

console.clear();
function fn(){
    return function(){
    		return "Carolin";
    }
}
//調(diào)用匿名函數(shù)
console.log(fn()()); //Carolin
//或者
var box=fn();
console.log(box()); //Carolin

4、閉包和遞歸函數(shù)

假設(shè)，函數(shù)A內(nèi)部聲明了個(gè)函數(shù)B，函數(shù)B引用了函數(shù)B之外的變量，并且函數(shù)A的返回值為函數(shù)B的引用，那么函數(shù)B就是閉包函數(shù)。

遞歸就是函數(shù)自己調(diào)用自己，當(dāng)函數(shù)自己時(shí)，其自身為閉包函數(shù)，參數(shù)為域外變量。

console.clear();
function funA(arg1,arg2) {
    var i=0; //funA作用域的變量
    function funB(step) {
        i=i + step; //訪問(wèn)funB作用域外變量i
        console.log(i)
    }
    return funB;
}
var allShowA=funA(2, 3); //調(diào)用的是funA arg1=2，arg2=3
allShowA(1);//調(diào)用的是funB step=1,輸出 1
allShowA(3);//調(diào)用的是funB setp=3,輸出 4
//累加
console.clear();
function f(num){
    if(num<1) {
   		 return 0;
    } else {
    		return f(num-1)+num;
    }
}
console.log(f(9)); //45
//階乘
console.clear();
function f(num){
    if(num<1) {
    return 1;
    } else {
    return f(num-1)*num;
    }
}
console.log(f(4)); //24
//在對(duì)象中定義遞歸方法
var obj={
    num : 5,
    fac : function (x) {
        if (x===1) {
        		return 1;
        } else {
        		return x * obj.fac(x - 1);
        }
    }
};
console.log(obj.fac(5)) /120
//使用arguments.callee
function fact(num){
    if (num<=1){
    		return 1;
    }else{
   		 return num*arguments.callee(num-1);
    }
}
console.log(fact(4)); //24

5、Promise回調(diào)函數(shù)

Promise是ES6語(yǔ)言標(biāo)準(zhǔn)中提供的對(duì)象。Promise是異步編程的一種解決方案，比傳統(tǒng)的解決方案（回調(diào)函數(shù)和事件）更合理和更強(qiáng)大。

console.clear();
//基本用法，
var p=new Promise(function(resolve, reject){
    setTimeout(function(){
    		resolve(console.log("done"));
    }, 1000);
});
//做為對(duì)象返回
function timeout(ms) {
    return new Promise((resolve, reject)=> {
    		setTimeout(resolve, ms, 'done');
    });
}
timeout(1000).then((value)=> { //參數(shù)value='done'
		console.log(value);
});
//完整使用方法
function promiseTest(){
let p=new Promise(function(resolve, reject){
    setTimeout(function(){
        var num=Math.random()*100; //生成1-100的隨機(jī)數(shù)
        console.log('隨機(jī)數(shù)生成的值：',num)
        if(num>=60){
            resolve(num);
        } else {
            reject('數(shù)字太于60了即將執(zhí)行失敗回調(diào)');
        }
        }, 2000);
    })
    return p
}
promiseTest().then(
    function(data){ //data=num
        console.log('resolved成功回調(diào)');
        console.log('成功回調(diào)接受的值：',data);
    }
)
.catch(function(reason, data){
    console.log('catch到rejected失敗回調(diào)');
    console.log('catch失敗執(zhí)行回調(diào)拋出失敗原因：',reason);
});

注：Promise回調(diào)函數(shù)在網(wǎng)頁(yè)數(shù)據(jù)抓取時(shí)常常遇到

JavaScript是一種面向?qū)ο蟮木幊陶Z(yǔ)言，因此對(duì)象在JavaScript中扮演了很重要的角色。

Javascript函數(shù)是能完成某個(gè)常用功能的一小段代碼，而Javascript方法（method）是通過(guò)對(duì)象調(diào)用的Javascript函數(shù)。

JS中所有事物都是對(duì)象，對(duì)象是擁有屬性和方法的數(shù)據(jù)。但是，JS對(duì)象又是由函數(shù)創(chuàng)建的，JS函數(shù)本身也是對(duì)象。“方法是函數(shù)、對(duì)象是函數(shù)”，JS中函數(shù)的用途和含義有點(diǎn)繞口，需要大量練習(xí)和運(yùn)用才能掌握。

數(shù)的定義方式

1. 函數(shù)聲明方式 function 關(guān)鍵字 (命名函數(shù))

2. 函數(shù)表達(dá)式 (匿名函數(shù))

3. new Function()

Function 里面參數(shù)都必須是字符串格式

第三種方式執(zhí)行效率低，也不方便書寫，因此較少使用

所有函數(shù)都是 Function 的實(shí)例(對(duì)象)

函數(shù)也屬于對(duì)象

函數(shù)的調(diào)用方式

1. 普通函數(shù)

function fn() {

console.log('人生的巔峰');

}

fn(); fn.call()

2. 對(duì)象的方法

var o={

sayHi: function() {

console.log('人生的巔峰');

}

o.sayHi();

3. 構(gòu)造函數(shù)

function Star() {};

new Star();(構(gòu)造函數(shù)和普通函數(shù)肯定不一樣了，他們的主要區(qū)別是構(gòu)造函數(shù)首字母大寫，還有就是new關(guān)鍵字調(diào)用)

4. 綁定事件函數(shù)

btn.onclick=function() {}; // 點(diǎn)擊了按鈕就可以調(diào)用這個(gè)函數(shù)

5. 定時(shí)器函數(shù)

setInterval(function() {}, 1000); 這個(gè)函數(shù)是定時(shí)器自動(dòng)1秒鐘調(diào)用一次

6. 立即執(zhí)行函數(shù)

(function() {

console.log('人生的巔峰');

})();

立即執(zhí)行函數(shù)是自動(dòng)調(diào)用

在線咨詢

上一篇：使用React，自己模擬實(shí)現(xiàn)a標(biāo)簽的錨點(diǎn)功能
下一篇：CSS動(dòng)畫和變換的詳細(xì)指南

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

JavaScript 函數(shù)

avaScript 函數(shù)定義

函數(shù)表達(dá)式，又叫函數(shù)字面量

函數(shù)的幾種寫法

您的項(xiàng)目需求