一篇文章帶你瞭解JavaScript函數定義

點擊上方「 前端進階學習交流 」，進行關注

回覆「前端」便可獲贈前端相關學習資料javascript

今php

日html

雞前端

湯java

福如東海，壽比南山。

JavaScript 函數使用 function 關鍵字來定義，可使用一個函數聲明或者一個函數表達式。web

1、函數聲明

示例：數組

聲明一個函數不會當即執行。微信

它們被「保存以供稍後使用」，稍後將被執行，當它們被調用（call）。app

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>項目</title> </head> <body style="background-color: aqua;"> 
 <h1>JavaScript 函數</h1>
 <p>此示例調用一個函數，該函數執行計算並返回結果</p>
 <p id="demo"></p>
 <script> function myfan(a, b) { return a / b; } document.getElementById("demo").innerHTML = myfan(6, 7);</script>
 </body></html>

分號是用來分隔執行JavaScript語句。由於一個函數聲明不是一個可執行語句，它不用分號結尾。
less

2、函數表達式

一個JavaScript函數也可使用表達式定義。

函數表達式能夠存儲在變量中。

var x = function (a, b) {return a * b};

完整代碼：

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>項目</title> </head> <body style="background-color: aqua;">
 <p>一個函數能夠存儲到一個變量裏面:</p> <p id="demo"></p>
 <script> var x = function(a, b) { return a * b }; document.getElementById("demo").innerHTML = x;</script>
 </body></html>

函數表達式存儲在變量中後，變量能夠做爲函數使用。

var x = function (a, b) { return a * b};var z = x(4, 3);

上面的函數其實是一個匿名函數（一個沒有名字的函數），存儲在變量中的函數不須要函數名。它們老是使用變量名調用（call）。

上面的函數用分號結束，由於它是一個可執行語句的一部分。

3、Function() 構造函數

1. 定義

JavaScript函數使用function關鍵字定義。函數還能夠用一個內置的叫作Function()的構造函數來定義。

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

不一樣的寫法

實際上沒必要使用函數構造函數。上面的例子也能夠寫成這樣。

var myFunction = function (a, b) { return a * b};
var x = myFunction(5, 5);

大多數時候，能夠避免使用 new 關鍵詞在JavaScript 。

2. Function 提高（Hoisting）

Hoisting是JavaScript的默認行爲是移動聲明當前範圍的頂部。Hoisting 適用於變量聲明和函數聲明。

正由於如此，JavaScript函數能夠調用以前就被聲明:

myFunction(5);
function myFunction(y) { return y * y;}

使用表達式定義函數不會被提高。

4、自調用函數

函數表達式能夠進行「自調用」。

自動調用一個自調用表達式（自動啓動），而沒必要調用.函數表達式將自動執行，若是表達式隨後 ()，不能自調用一個函數聲明.您必須在函數的周圍添加圓括號，以指示它是函數表達式:

 <script> (fun document.getElementById("demo").ction () {innerHTML = "Hello! I called myself"; })(); </script>

上面的函數其實是一個匿名的自調用函數（沒有名字的函數）。

函數能夠用做值

JavaScript 函數能夠用做值。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>項目</title></head><body>
 <p>函數能夠做爲值對待:</p> <p>x = myFunction(4,3) or x = 12</p> <p>在這兩種狀況下, x 都會是12.</p> <p id="demo"></p>
 <script> function myFunction(a, b) { return a * b; } var x = myFunction(4, 3); document.getElementById("demo").innerHTML = x;</script></body></html>

JavaScript函數能夠用在表達式:

 <script> function myFunction(a, b) { return a * b; } var x = myFunction(4, 3) * 2; /*函數能夠在表達式中使用.*/ document.getElementById("demo").innerHTML = x;</script>

5、總結

本文主要介紹了JavaScript 函數的定義。經過講解了函數的定義，函數的表達式，如何去定義構造函數，以及如何去調用本身建立的函數，每一點都作了詳細的講解，經過用豐富的案例幫助你們更好理解。

但願你們能夠根據文章的內容，積極嘗試，有時候看到別人實現起來很簡單，可是到本身動手實現的時候，總會有各類各樣的問題，切勿眼高手低，勤動手，才能夠理解的更加深入。

使用JavaScript 語言，方便你們更好理解，但願對你們的學習有幫助。

------------------- End -------------------

往期精彩文章推薦：

歡迎你們點贊，留言，轉發，轉載，感謝你們的相伴與支持

想加入前端學習羣請在後臺回覆【入羣】

萬水千山老是情，點個【在看】行不行

本文分享自微信公衆號 - 前端進階學習交流（gh_cf4e462f0835）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。