iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 3
0
自我挑戰組

重新開始的Vue.js 30day系列 第 4

從頭開始的Javascript 入門 -函式 day3

從頭開始的Javascript 入門 -函式 day3

前言

  • 函式是物件 (除了基本型別以外的都是物件)
  • 宣告函式名稱方式常見有兩種:
    函式宣告(Function Declaration)
    函式運算式(Function Expressions)
    透過 new Function 關鍵字建立函式

函式 function

函式是由一系列的敘述句組合而成,以完成一項指定的工作任務。
假設今天,你有一個女朋友專門幫你買早餐(好可能沒有,他還在找你吧XD) 因為你們還剛磨合,所以不了解你的愛好。所以當第一次要幫你跑腿時,你需要一個詳細指令: 我平常就點對面公園的早餐店 大溫奶+凱薩沙拉,沙拉醬另外裝,起司蛋餅一份。
下一次幫你買早餐時,就不需要跟他講那麼多了:
幫我買個早餐,寶貝。 她就會找到早餐店並幫你買早餐。
(投資一定有風險,愛情投資有賺有賠,交往前應詳閱公開說明書)
也就是說,妳只需要講一次詳細的指令,女朋友下次聽到“幫我買早餐”
就會想起那些步驟,等一下就會有好吃的早餐可以吃喔!

Javascript 所提供類似機制就稱為函式。

設定好一連串步驟,就像你跟你想像中女朋友講去哪裡買早餐,買什麼東西一樣。當你建立函式時它還不會馬上執行,函式會被存在網頁瀏覽器記憶體中,在任何你需要執行那些步驟時機就可以呼叫它。

要建立一個函式,給它賦予一個名字,並在大括號內寫其工作任務所需程式敘述。這樣的行為稱為函式宣告。

  • 宣告一個函式要用function 關鍵字
    function sayNo(){ document.write('hello!'); }
    sayNo() 函式名稱接著一個小括弧,執行工作的敘述句則放置程式區段中
    (在大括弧中)

完成宣告之後,就可以以一行程式碼執行函式大括號所有敘述句,這就是所謂函示呼叫。
sayNo(); 函式名稱

    function isAdult(age) {
        if (age >= 18) {
        return true;
        } else {
        return false;
        }
     }

    var yourAge = 20;
       if (isAdult(yourAge)) {
            console.log('可以觀賞這部電影!');
       } else {
            console.log('抱歉,您的年紀尚無法觀看此部影集!');
         }

如果沒學函式,就要在if裡面寫上判斷,這好處就是你可以重複使用!

參數

有時函式要需要一些自訓才能完成他的工作,宣告函式時需再給予它參數。
這類函式內容中,參數功能就有如變數一般。

function getArea(width,height){ 
 return width * height ;  // 參數在函式中就有如變數的使用方式
} 
(width,height)//參數

當呼叫一個需要資訊的函式,你必須在函式名稱後的括號中傳入需使用的值,這些數值就成為引數,它們可以數值或變數方式傳遞。

  • 引數以數值方式傳遞

當以下函式被呼叫時,數值3被傳入作為寬度,數值5則作為高度。

getArea(3,5);
  • 引數以變數方式傳遞

當呼叫函式,你不需要使用確定的數值,而是使用變數傳遞至對應的參數。
因此下列方式也可以完成相同的工作。

wallWidth =3;
wallHeight =5;
getArea(wallWidth,wallHeight);

另一種function 定義方式

// 寫法 1    函式宣告(Function Declaration)
function isAdult(age) {
 return (age >= 18);
}
// 寫法 2 函式運算式(Function Expressions)
var isAdult = function(age) {
 return (age >= 18);
}

寫法2是匿名函式 函式被儲存變數isAdult中;
兩者有何不同?

變數提升:用var 會有變數提升的宣告,

function a1(){
  console.log(a1);
}

var a2 = function a2(){
  console.log(a2);
}

a1();
a2();

以上都會出現正確函式宣告

var greeting= a1();
function a1(){
 //執行訊息
}

你可能預期以上會發生錯誤,因為a1()函式在被定義之前就呼叫執行
但他仍然可以正確執行,因為函式和第一句敘述是處於相同執行環境;
故他會被視為如下敘述:


function a1(){
 //執行訊息
}
var greeting= a1();

但是以下就會發生錯誤 因為a1()函式是在 hello()函式執行環境中建立

var greeting= a1();
function hello(){
     function a1(){
        //執行訊息
     }
     //回傳hello~
}

函式取得多個回傳值

函式可使用陣列回傳多個值,例如以下函式可計算和盒子面積與體積

  1. 建立一個getSize()函式,會計算盒子面積並將結果儲存於area變數中
  2. 體積儲存於volum 這兩變數同存在一個名為size陣列裡
  3. 函式將整個陣列回傳至原始碼中呼叫getSize()函式敘述,如此這兩個數值結果可被使用。
function getSize(width,height,depth){
  var area = width * height;
  var volume =width *height *depth;
  var size =[area,volume];
  return size;
}


下一回講陣列


上一篇
從頭開始的Javascript 入門 -流程控制 Day2
下一篇
從頭開始的Javascript 入門 -陣列 day4
系列文
重新開始的Vue.js 30day21

尚未有邦友留言

立即登入留言