函式

在javascript函式的關鍵字為function,主要功用同時可以建立變數的scope存取範圍,也可以利用function來讓程式碼更好維護。另外也可建立物件,也就是相當於其他語言的class

宣告方式

宣告函式方式,只要在function後方加入函式名稱,在用{}包覆,如下:

1
2
3
function say(){
alert("hello world");
}

同樣也可以把function指定給變數

1
2
3
var say = function(){
alert("hello world");
};

呼叫函式的方式如下:

1
say();

用指定給變數的方式,與直接宣告function,這兩者最大不同的地方,主要是可執行的涵蓋範圍

直接宣告方式,可將呼叫say()寫在前面:範例

1
2
3
4
5
say();

function say(){
alert("Hello world");
}

反之,如果你用指定的方式,一定得將呼叫say()寫在後方:範例

1
2
3
4
5
var say = function(){
alert("Hello world");
}

say();

加入傳入值

在沒傳入值的情況下,上方的範例,永遠只能跳出"Hello world"的訊息,這時加上傳入值,就可以隨意傳入你想跳出的訊息。

加入傳入值只需在()中間寫入變數名稱:

1
2
3
var say = function( message ){
alert(message);
}

呼叫方式,只需將值傳入如下:範例

1
say("Hello Tom");

如果你要傳入多個參數,你只要加上,就可以,例如:範例

1
2
3
4
var say = function( message, name ){
alert(message + " " + name);
}
say("Hello", "Tom");

回傳值

有些狀況你可能需要回傳值,透過function處理後,回傳一個值出來,這時可在function裡面加入一個關鍵字return,將你要回傳的值丟出來。

兩值相加透過return回傳總和:範例

1
2
3
4
5
var add = function( val1, val2 ){
return val1 + val2
};
var total = add(1, 2);
alert( total );

關鍵字arguments

這時你一定會覺得add可能想相加多個數值,那你可以透過arguments這個關鍵字,在function可以取到多個參數,而不需一個一個參數名稱自己寫上。

使用for in迴圈的語法,可以透過arguments中,取得所有傳入的參數,以下面範例為例,i的值分別會是012,也就是arguments[0]arguments[1]arguments[2]範例

1
2
3
4
5
6
7
8
9
var add = function(){
var total = 0;
for( var i in arguments ) {
total = total + arguments[i];
}
return total;
};

alert(add(1,2,3));

函式的scope

當你聽到scope可能會有點陌生,其實就是變數可以存取範圍,在function裡的使用var來做宣告,或者傳入值的變數,你會發現外部無法取得值。

當你用typeof時,你會發現都回拿到undefined,就是未定義的意思:範例

1
2
3
4
5
6
7
8
var add = function(val1, val2){
var total = val1 + val2;
return total;
};
add(1, 2);

alert("total = " + typeof total);
alert("val1 = " + typeof val1);

那回過頭來說,當你沒透過var宣告的變數是就是全域變數全域變數本身可以透過已存在的window,或者this這關鍵字取得:範例

1
2
3
4
5
6
var add = function(val1, val2){                             
total = val1 + val2;
return total;
};
add(1,2);
alert("total = "+ total + "\n" + "window.total = " + window.total + "\n" + "this.total = " + this.total);

其中this這關鍵字,是指當下指向的object,你可以透過===來判斷object,若是回傳true,代表就是完全是同個object範例

1
alert(window === this);

使用function建立物件

function還有一個功能可以拿來建立物件,也就是其他語言的class,然後可以透過new這關鍵字建立物件。

首先建立一個function名稱為Person,而內容就是透過this把名稱指定給建立的object

1
2
3
var Person = function(name){
this.name = name;
};

建立一個person物件:

1
2
var person1 = new Person("Tom");
var person2 = new Person("Jack");

Person已經預設有name這個參數,可直接透過person1.name,將person的名稱印出:

1
alert("person1.name = " + person1.name + "\nperson2.name = " + person2.name);

從上面例子你應該就能知道如何透過function建立物件了,並且知道person1person2,是兩個不相同個object了,你可以透過===去做驗證:完整範例

1
alert("\nperson1 == person2 :" + (person1 === person2));

建立物件中的function

有以上的例子,你可能會想要,在物件裡面再放入function,去做一些處理。

你同樣可透過this去添加你要加入的function,然後被添加在this裡面的function,也可透過this取得到該物件的_name值:範例

1
2
3
4
5
6
7
8
9
var Person = function( name ){
this._name = name;
this.say = function(){
alert("I am " + this._name);
};
}

var person = new Person("Tom");
person.say();