首頁 > web前端 > js教程 > 深入解析JS自訂函數的聲明和調用

深入解析JS自訂函數的聲明和調用

青灯夜游
發布: 2022-08-04 09:13:26
轉載
2157 人瀏覽過

函數是一組執行特定任務(具有特定功能)的,可以重複使用的程式碼區塊。除了使用內建函數外,我們還可以自行建立函數(自訂函數),然後在需要的地方呼叫這個函數,這不僅可以避免編寫重複的程式碼,還有利於程式碼的後期維護。

深入解析JS自訂函數的聲明和調用

一:宣告函數的幾種方法

JavaScript中自訂函數的宣告方法有3 種,即使用function語句、使用Function() 建構函數和定義函數直接量。

1、function 語句

#在 JavaScript 中可以使用 function 語句宣告函數。具體用法如下:

function funName([args]) {
    statements
}
登入後複製

funName 是函數名,與變數名一樣必須是 JavaScript 合法的識別碼。在函數名稱之後是一個由一個小括號包含的參數列表,參數之間以逗號分隔。參數是可選的,沒有數量限制。

作為標識符,參數只在函數體內被訪問,參數是函數作用域的私有成員。呼叫函數時,透過為函數傳遞值,然後使用參數來取得外部傳入的值,並在函數體內幹預函數的運作。

在小括號之後是一個大括號,大括號內包含的語句就是函數體結構的主要內容。在函數體重,大括號是必不可少的,缺少大括號,JavaScript 將會拋出語法錯誤。

範例

function 語句必須包含函數名稱、小括號和大括號,其他程式碼都可省略,因此最簡單的函數體就是一個空函數。

function funName() {}  //空函数
登入後複製

如果使用匿名函數,則可以省略函數名稱。

function () {}  //匿名空函数
登入後複製

var 語句和 function 語句都是宣告語句,它們宣告的變數和函數都在 JavaScript 預先編譯時被解析,也稱為變數提升和函數提升。在預編譯期,JavaScript 引擎會為每個 function 建立上下文,定義變數對象,同時把函數內所有形參、私有變數、巢狀函數作為屬性註冊到變數物件上。

2、Function() 建構子

#使用 Function() 建構子可以快速產生函數。具體用法如下:

var funName = new Function(p1, p2, ..., pn, body);
登入後複製

Function() 的參數類型都是字串,p1~pn 表示所建立函數的參數名稱列表,body 表示所建立函數的函數結構體語句,在body 語句之間以分號分隔。

範例1

可以省略所有參數,只傳遞一個字串,用來表示函數體。

var f = new Function ("a", "b", "return a+b");  //通过构造函数来克隆函数结构
登入後複製

在上面程式碼中,f 就是所建立函數的名稱。同樣是定義函數,使用 function 語句可以設計相同結構的函數。

function f(a, b) {  //使用function语句定义函数结构
    return a + b;
}
登入後複製

範例2

使用 Function() 建構子可以不指定任何參數,建立一個空函數結構體。

var f = new Function();  //定义空函数
登入後複製

使用 Function() 建構子可以動態的建立函數,它不會把使用者限制在 function 語句預先宣告的函數體內。使用 Function() 建構函數能夠把函數當作表達式來使用,而不是當做一個結構,因此使用起來會比較靈活。其缺點就是,Function() 建構函式在執行期間被編譯,執行效率非常低,一般不建議使用。

3、匿名函數(函數直接量)

函數直接量也稱為匿名函數,即函數沒有函數名,只包含function 關鍵字、參數和函數體。具體用法如下:

function ([args]) {
    statements
}
登入後複製

範例1

下面程式碼定義一個函數直接量。

function (a, b) {  //函数直接量
    return a + b;
}
登入後複製

在上面程式碼中,函數直接量與使用 function 語句定義函數結構基本上相同,它們的結構都是固定的。但是函數直接量沒有指定函數名,而是直接利用關鍵字 function 來表示函數的結構,這種函數也稱為匿名函數。

範例2

匿名函數就是一個表達式,也就是函數表達式,而不是函數結構的語句。下面把匿名函數當作一個值賦值給變數 f。

//把函数作为一个值直接赋值给变量 f
var f = function (a, b) {
    return a + b;
};
登入後複製

當把函數結構當作一個值賦值給變數之後,變數就可以當作函數被調用,此時變數就指向那個匿名函數。

console.log(f(1,2));  //返回值3
登入後複製

深入解析JS自訂函數的聲明和調用

範例3

#匿名函數作為值,可以參與更複雜的表達式運算。針對上面範例可以使用以下程式碼完成函數定義和呼叫一體化操作。

console.log(  //把函数作为一个操作数进行调用
    (function (a,b) {
        return a + b;
    })(1, 2));  //返回数值3
登入後複製

深入解析JS自訂函數的聲明和調用

4、箭頭函數

箭頭函數是es6函數的簡寫方式,箭頭函數沒有自己的this,他的this是在定義的時候確定的,值為上一層的this。

//箭头函数
const sayName = ()=>{
    console.log("箭头函数")
}
登入後複製

二:调用函数

一旦定义好了一个函数,我们就可以在当前文档的任意位置来调用它。调用函数非常简单,只需要函数名后面加上一个括号即可,例如 alert()、write()。注意,如果在定义函数时函数名后面的括号中指定了参数,那么在调用函数时也需要在括号中提供对应的参数。

示例代码如下:

function sayHello(name){
    document.write("Hello " + name);
}
// 调用 sayHello() 函数
sayHello('PHP中文网');
登入後複製

深入解析JS自訂函數的聲明和調用

提示:JavaScript 对于大小写敏感,所以在定义函数时 function 关键字一定要使用小写,而且调用函数时必须使用与声明时相同的大小写来调用函数。

【相关推荐:javascript学习教程

以上是深入解析JS自訂函數的聲明和調用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:biancheng.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板