天天看點

《AngularJS進階程式設計》——5.4 定義并使用函數

本節書摘來自異步社群《angularjs進階程式設計》一書中的第5章,第5.4節,作者:【美】adam freeman(弗裡曼)著,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

當浏覽器處理html文檔時,它會一個挨一個地往下讀。當其遇到script元素,就立刻按其定義順序執行所包含的javascript語句。

這就是前面的例子中發生的,向控制台寫了兩條消息。你也可以将多條語句包成函數,在浏覽器遇到調用該函數的語句前它不會執行,如清單5-4所示。

清單5-4 在檔案jsdemo.html中定義javascript函數

《AngularJS進階程式設計》——5.4 定義并使用函數

定義函數很簡單:使用function關鍵字,後面跟着你想的函數名,然後是一對括号(“(”和“)”)。把你想包含的語句用花括号括起來(“{”和“}”)。

在清單中我使用了名稱myfunc,函數包含單個語句,向javascript控制台寫入消息。函數中的語句不會執行,直到浏覽器到達另一條調用myfunc函數的語句,像這樣:

《AngularJS進階程式設計》——5.4 定義并使用函數

執行函數中的語句會産生以下輸出:

《AngularJS進階程式設計》——5.4 定義并使用函數

除了示範函數如何定義,本例并沒什麼用,因為函數在其定義之後立即就被執行了。當函數為響應一些類型的改變或事件時被調用,它們才有用得多,比如使用者界面(ui)。

5.4.1 定義帶參函數

javascript讓你可以定義函數的參數,如清單5-5所示。

清單5-5 在檔案jsdemo.html中定義帶參函數

《AngularJS進階程式設計》——5.4 定義并使用函數

我為函數myfunc添加了兩個參數,叫name和weather。javascript是動态類型語言,這意味着你無需在定義函數時聲明參數的資料類型。在本章後面講到javascript變量時我會再談動态類型。調用帶參函數,在你調用函數時你得提供一個值作為參數:

《AngularJS進階程式設計》——5.4 定義并使用函數

其結果如下:

《AngularJS進階程式設計》——5.4 定義并使用函數

在你調用函數時所提供的參數的數量不一定要和函數的參數數量一緻。如果調用函數時比它擁有的參數少些,那麼任何你未提供的參數的值都是undefined,這是一個javascript的特殊值。如果你調用函數的參數比它有的多了,那麼多出來的會被忽略。

是以結果就是你不能建立兩個同名卻不同參數的函數,然後又按照你在調用時提供的參數來執行不同的javascript。這叫多态(polymorphism),雖然它在一些語言中被支援,比如java和c#,但它在javascript中不适用。反而,如果你定義兩個同名函數,那第二個會取代第一個。

提示:

在javascript中你最能接近于多态的就是定義一個函數,根據參數的類型和數量來做不同的行為。這樣做的時候需要仔細測試,會導緻尴尬的api,一般最好避免這樣。

5.4.2 定義傳回結果的函數

使用return關鍵字你可以從函數中傳回結果。清單5-6顯示了傳回結果的函數。

清單5-6 在檔案jsdemo.html中從函數中傳回結果

《AngularJS進階程式設計》——5.4 定義并使用函數

該函數定義一個參數,并使用其産生結果。我調用函數并傳入作為參數的結果給console.log函數,像這樣:

《AngularJS進階程式設計》——5.4 定義并使用函數

注意你無需聲明函數會傳回結果或者表明結果的資料類型。清單的結果如下:

《AngularJS進階程式設計》——5.4 定義并使用函數

5.4.3 檢查函數

在javascript中可以傳遞對象,是以讓你知道對象是否為函數十分有用。為此angularjs提供了angular.isfunction方法,如清單5-7所示範的。

注意:

所有angularjs工具方法都可以通過全局的angular對象通路,比如angular.isfunction,它是本例的主題。當你在html檔案中使用script元素添加angular.js時angular對象就自動被建立了。

清單5-7 在檔案jsdemo.html中檢查函數

《AngularJS進階程式設計》——5.4 定義并使用函數

該示例更複雜一些,因為它沒有實際項目的上下文。我定義了printmessage函數,它期望收到不同類型的參數。我使用angular.isfunction方法檢查我處理的對象是否為函數,并且(若是)我就調用函數,像這樣:

《AngularJS進階程式設計》——5.4 定義并使用函數

如果isfunction方法拿到對象作為參數,參數是函數就傳回true,否則傳回false。對于不是函數的對象,我将它傳給console.log方法。

我建立了兩個變量以示範printmessage函數:variable1是函數,而variable2是字元串。我分别傳給printmessage函數,variable1被識别出是函數,被調用了,variable2則被寫入控制台。當variable1被調用時,它用任意方式寫入了控制台,産生了以下結果:

《AngularJS進階程式設計》——5.4 定義并使用函數