把一段相對獨立的具有特定功能的代碼塊封裝起來,形成一個獨立實體,就是函數,起個名字(函數名),在後續開發中可以反覆調用
函數的作用就是封裝一段代碼,將來可以重複使用
6.1 函數的聲明及調用
6.1.1 聲明
關鍵字聲明
function 函數名(){ // 函數體 }
表達式聲明
var fn = function() { // 函數體 }
特點:
函數聲明的時候,函數體並不會執行,只要當函數被調用的時候纔會執行。
一個函數一般都特定的用來幹 一件 事情
函數需要先定義 , 然後才能使用
函數名字 : 要遵循駝峯命名法
函數一旦重名 , 會把前面的函數覆蓋
6.1.2 調用
調用函數的語法:
函數名();
特點:
函數體只有在調用的時候纔會執行,調用需要()進行調用。可以調用多次(重複使用)
// 聲明函數
function sayHi() {
console.log("吃了沒?");
}
// 調用函數
sayHi();
// 求1-100之間所有數的和
function getSum() {
var sum = 0;
for (var i = 0; i < 100; i++) {
sum += i;
}
console.log(sum);
}
// 一段代碼可以多次調用
getSum();
getSum();
getSum();
6.2 參數
爲什麼要有參數
function getSum() { var sum = 0; for (var i = 1; i <= 100; i++) { sum += i; } console.log(); } // 雖然上面代碼可以重複調用,但是隻能計算1-100之間的值 // 如果想要計算n-m之間所有數的和,應該怎麼辦呢?
語法:
// 函數內部是一個封閉的環境,可以通過參數的方式,把外部的值傳遞給函數內部
// 帶參數的函數聲明
function 函數名(形參1, 形參2, 形參 ){
// 函數體
}
// 帶參數的函數調用
函數名(實參1, 實參2, 實參3);
形參和實參
形式參數:在聲明一個函數的時候,爲了函數的功能更加靈活,有些值是固定不了的,對於這些固定不了的值。我們可以給函數設置參數。這個參數沒有具體的值,僅僅起到一個佔位置的作用,我們通常稱之爲形式參數,也叫形參。
實際參數:如果函數在聲明時,設置了形參,那麼在函數調用的時候就需要傳入對應的參數,我們把傳入的參數叫做實際參數,也叫實參。
function fn(a, b) {
console.log(a + b);
}
var x = 5, y = 6;
fn(x,y);
// x,y實參,有具體的值。
// 函數執行的時候會把x,y複製一份給函數內部的a和b,
// 函數內部的值是複製的新值,無法修改外部的x,y
6.3 函數的返回值
當函數執行完的時候,並不是所有時候都要把結果打印。我們期望函數給我一些反饋(比如計算的結果返回進行後續的運算),這個時候可以讓函數返回一些東西。也就是返回值。函數通過return返回一個值
返回值語法:
//聲明一個帶返回值的函數
function 函數名(形參1, 形參2, 形參 ){
//函數體
return 返回值;
}
//可以通過變量來接收這個返回值
var 變量 = 函數名(實參1, 實參2, 實參3);
返回值詳解:
如果函數沒有顯示的使用 return語句 ,那麼函數有默認的返回值:undefined
如果函數使用 return語句,那麼跟再return後面的值,就成了函數的返回值
如果函數使用 return語句,但是return後面沒有任何值,那麼函數的返回值也是:undefined
函數使用return語句後,這個函數會在執行完 return 語句之後停止並立即退出,也就是說return後面的所有其他代碼都不會再執行。
6.4 函數相關的其它事情
6.4.1 匿名函數與自調用函數
匿名函數:沒有名字的函數
匿名函數如何使用:
將匿名函數賦值給一個變量,這樣就可以通過變量進行調用
匿名函數如果沒有任何變量來表示它,那麼就不能直接調用來執行,因此可以通過匿名函數的自調用的方式來執行
(function () { alert(123); })();
關於自執行函數(匿名函數自調用)的作用:防止全局變量污染。
6.4.2 函數本身也是值
function fn() {}
console.log(typeof fn);
函數作爲參數
因爲函數也是一種值類型,可以把函數作爲另一個函數的參數,在另一個函數中調用
function f1(f){
f();
}
function f2(){
console.log(2);
}
f1(f2); //2
函數做爲返回值
因爲函數是一種類型,所以可以把函數可以作爲返回值從函數內部返回,這種用法在後面很常見。
function fn(b) { var a = 10; return function () { alert(a+b); } } var f = fn(5); f(); //15
6.4.3 關於函數定義一些有趣的事情
//情況1:
//關鍵字聲明定義函數
function f1() {
console.log(1);
}
f1(); //2
function f1() {
console.log(2);
}
f1(); //2
//情況2:
//表達式聲明定義函數
var f2 = function () {
console.log(1111);
}
f2(); //1111
var f2 = function () {
console.log(2222);
}
f2(); //2222
總結 : 使用兩種不同的方式定義同名的函數出現了不同的效果 , 這是因爲情況2中進行的是賦值操作 , 而情況一發生的是函數的提升