JavaScript函數的定義和基本使用方法

更新時間：2022年06月26日 16:28:33 作者：starry陸離

函數就是一種封裝,由事件驅動的或者當它被調用時執(zhí)行的可重復使用的代碼塊,下面這篇文章主要給大家介紹了關于JavaScript函數的定義和基本使用方法的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

1.用函數語句定義

先給一個例子，該函數的功能是返回數組元素的和；

function sumArray(arr) {  
    var sum = 0;  
    for(var i = 0,aLength = arr.length;i < aLength;i++) {  
        sum += arr[i];  
    }  
    return sum;  
}

關鍵字function后面空一格，sumArray是函數的名字，其命名規(guī)范與變量名的命名規(guī)范相同：只能有字母、數字、下劃線和美元符號，不能以數字開頭，不能是關鍵字。

括號中是參數，又叫形式參數，只需要參數名就可以。參數可以是0個、1個或者多個，相互之間用,隔開，{}中間包含的是函數體。含有一條或者多條語句。函數體用來實現函數的功能。

關鍵字return后面是函數的返回值，函數也可以沒有返回值。函數運行完return這句話這里就會退出運行，return下面的語句不再運行。返回值即函數的輸出。

用這種方式定義的函數，在函數定義的前面和后面都可以調用該函數，只要函數和調用函數的語句在一個源文件里面就可以了。

2.用表達式定義

用表達式的方式定義函數，就是用賦值表達式把函數賦值給一個變量，這其實就是把函數看成一個變量。這個時候函數可以有名字，也可以沒有名字，沒有名字的函數叫做匿名函數。

帶名字的；

var funct = function getMax(a,b) {  
    return a>b?a:b;  
};//注意這后面的分號不能少，因為我們定義的是一個變量!

和用函數語句定義不同的是，只能在函數定義語句之后調用該函數，且調用的時候只能用變量名funct，不能用函數名getMax，如：

var funct = function getMax(a,b) {  
    return a>b?a:b;  
};  
console.log(funct(1,2));//輸出2

匿名函數；

所謂匿名函數就是關鍵字function之后直接是參數列表：

var funct = function(a,b) {  
    return a>b?a:b;  
};

這個函數沒有名字，它被賦值給了變量funct，所以叫匿名函數。同樣，也只能在這一語句之后調用該函數。

var funct = function(a,b) {  
    return a>b?a:b;  
};  
console.log(funct(1,2));//輸出2

總結：用表達式定義函數是即拿即用的，定義了就只能在這一語句之后調用該函數

3.函數的調用

在實訓四中，我們曾經介紹過對象可以有自己的方法，當然這也是函數。這種函數的調用和前面兩關定義的函數有細小的區(qū)別。

//函數的定義：求三個數的最大值  
function max(a,b,c) {  
    if(a > b) {  
        if(a > c)  
            return a;  
        else   
            return c;  
    }  
    else {  
        if(b > c)  
            return b;  
        else   
            return c;  
    }  
}  
//調用該函數  
var result = max(1,2,3);//result為3  
console.log(result);//輸出3

調用函數的時候，需要傳入和形參相同個數的的具體值，上面的函數有3個參數，所以下面調用的時候傳入3個具體的值，1傳給參數a，2傳給參數b，3傳給參數c。函數的返回值通過賦值符號=傳給了變量result。如果函數體內沒有return關鍵字，將返回undefined。

對象里定義的函數的調用：

var ob = {  
    id:1,  
    getMax:function(a,b) {  
        return a>b?a:b;  
    }  
};  
var result = ob.getMax(2,1);//result值為2  
var result1 = ob["getMax"](2,1);//result1的值也是2

與上面的區(qū)別是，這里要定位到函數，需要使用對象名.函數名或者對象名["函數名"],其它相同。

4.未定義的實參

在大部分的編程語言里面，都會對調用函數時傳入的實參個數和類型進行檢查，而JavaScript既不檢查實參的類型，也不檢查實參的個數。
JavaScript中的實參會按照順序從左到右依次匹配上形參，例如：

function myFunction(a,b,c) {  
    console.log(a);  
    console.log(b);  
    console.log(c);  
}  
myFunction(1,2,3);

實參1傳入形參a，實參2傳入形參b，實參3傳入形參c。當實參個數少于形參時，靠右的形參會被傳入值undefined。如：

function myFunction(a,b,c) {  
    console.log(a);  
    console.log(b);  
    console.log(c);  
}  
myFunction(1,2);

實參1傳入形參a，實參2傳入形參b，undefined傳入形參c。如果只想給右側的參數傳入數據，可以給前幾個實參傳入undefined。如：

function myFunction(a,b,c){  
console.log(a);  
console.log(b);  
console.log(c);  
}  
myFunction(undefined,1,2);

上面這兩種做法不夠嚴謹，最佳實踐是給可能被傳入undefined值的形參設定一個默認值。如：

function getSum(a,b,c) {  
    if(c === undefined)   
        c = 0;  
    console.log(a+b+c);  
}  
myFunction(1,2);

5.實參對象

JavaScript一切都是對象，實參也是一個對象，有一個專門的名字arguments，這個對象可以看成一個數組（類數組，不是真的數組），實參從左到右分別是arguments[0]、arguments[1]...，arguments.length表示實參的個數。

//求參數的和  
function getSum() {  
    var aLength = arguments.length;  
    var sum = 0;  
    for(var i = 0;i < aLength;i++) {  
        sum += arguments[i];  
    }  
    return sum;  
}  
console.log(getSum(1,2,3,4,5))//輸出15

這里的形參直接省略，使用arguments[i]表示。

6.對象作為參數

復雜的函數通常多達十幾個參數，盡管JavaScript不做參數個數和類型的檢查，但是調用時實參的順序不能亂。開發(fā)人員需要檢查每一個實參和形參的對應關系，這樣效率很低。一種很好的解決方案是使用對象作為參數，函數會根據對象的屬性名操作參數。

function myFunction(obj) {  
    console.log(obj.name);  
    obj.number++;  
    return obj.number;  
}  
myObj = {name:"myObj",number:34};  
myFunction(myObj);//輸出myObj  
console.log(myObj.number);//輸出35

7.函數對象作為另一個函數的參數

一個函數（為方便行文，稱為a函數）可以作為另外一個函數（稱為b函數）的參數，b函數最終可以返回一個具體的值。

從原理上來說，b函數在自己的函數體內調用了a函數，所以需要把a函數的名字作為實際參數傳遞給b函數。如下：

//求最大值  
function getMax(a,b) {  
    return a>b?a:b;  
}  
//求最小值  
function getMin(a,b) {  
    return a<b?a:b;  
}  
//下面這個函數以函數作為參數，并最終返回一個值  
function getM(func,num1,num2) {  
    return func(num1,num2);  
}  
getM(getMax,1,2);//返回2  
getM(getMin,1,2);//返回1

我們把a函數的名字（getMax或者getMin）傳給b函數（getM（）），然后在b函數內部調用傳入的a函數，得到相關的結果。

總結

到此這篇關于JavaScript函數的定義和基本使用方法的文章就介紹到這了,更多相關JS函數定義和使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JS實現簡單拖拽效果
這篇文章主要為大家詳細介紹了JS實現拖拽效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
得到元素真實的背景顏色的js代碼
這個函數來自Rico，Longbill及Dnew.cn修改。說明: 傳入參數一個，為元素的id值或元素本身，返回為元素的真實背景色值（字符串）。背景值均為16進制的值（原代碼是是IE里面返回的是16進制的值，而Mozilla則是rgb值，Dnew.cn將其修改為均返回16進制的值）。
2007-12-12
詳解JavaScript什么情況下不建議使用箭頭函數
箭頭函數作為ES6新增的語法，在使用時不僅能使得代碼更加簡潔，而且在某些場景避免this指向問題。但是箭頭函數不是萬能的，也有自己的缺點以及不適用的場景，本文總結了JavaScript什么情況下不建議使用箭頭函數，感興趣的可以了解一下
2022-06-06
微信小程序基于ColorUI構建皮皮蝦短視頻去水印組件
這篇文章主要介紹了微信小程序-基于ColorUI構建皮皮蝦短視頻去水印組件，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2020-11-11
js實現簡單的手風琴效果
本文主要介紹了js實現簡單手風琴效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
JS創(chuàng)建自定義對象的六種方法總結
這篇文章主要給大家介紹了關于JS創(chuàng)建自定義對象的六種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-12-12
JavaScript 中級筆記第二章
對象是組成JavaScript的基本單元。本章將從JavaScript語言中最重要的幾個部分開始介紹：引用，函數重載，作用域，閉包和上下文。有了這些知識后，面向對象開發(fā)就將變得簡單。
2009-09-09
JavaScript基于用戶照片姓名生成海報
這篇文章主要介紹了JavaScript基于用戶照片姓名生成海報,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-05-05
原生js實現五子棋游戲
這篇文章主要為大家詳細介紹了原生js實現五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05
Web版彷 Visual Studio 2003 顏色選擇器
Web版彷 Visual Studio 2003 顏色選擇器...
2007-01-01