詳解 JavaScript 的函數
函數的語法格式
創建函數/函數聲明/函數定義
function 函數名(形參列表) { 函數體 return 返回值; // return 語句可省略
}
函數調用
函數名(實參列表) // 不考慮返回值
返回值 = 函數名(實參列表) // 考慮返回值
示例代碼
//定義的沒有參數列表,也沒有返回值的一個函數
function hello() {console.log("hello")
}
//定義一個有參數列表,有返回值的一個函數
function hello2(num, name) {console.log(num + " hello " + name)return 1;
}
//hello()
let a = helllo()
console.log(typeof(a))
let b = hello2(1, "小明")
console.log(typeof(b))
注意:
let a = helllo()
// 該函數沒有返回對應的數據,此時a的類型是undefined
- 在JS中,對一個函數不用去聲明它的返回類型,它的返回值類型取決于它return的數據類型(這一點恰巧驗證了JS是一個動態語言的特性)
運行結果
函數的參數個數
在JS中調用一個函數的時候,它的實參和形參之間的個數可以不一樣
注:實際開發一般要求形參和實參個數要匹配
如果實參個數比形參個數少, 則此時多出來的形參值為 undefined;
如果實參個數比形參個數多, 則多出的參數不參與函數運算;
示例代碼
function hello2(num, name) {console.log(num + " hello " + name)return 1;
}
hello2()
hello2(1,"小明",3)
運行結果
函數表達式
把這個函數直接賦值給一個變量,通過調用這個變量來完成函數的調用,函數的另外一種定義方式
注:JS中,函數是一等公民, 可以用變量保存, 也可以作為其他函數的參數或者返回值
示例代碼
let result = function Sum() {// 計算1~100之間的和ret = 0;for(i = 0; i <= 100; i++) {ret += i;}return ret
}
console.log(result())
運行結果
2.還可以使用匿名函數,省略函數名
示例代碼
let b = function() {console.log(arguments)// 打印調用的參數列表
}
b();
b(1,2,3);
運行結果
作用域
某個標識符名字在代碼中的有效范圍,作用域主要分成以下兩個:
- 全局作用域: 在整個
script
標簽中, 或者單獨的 js 文件中生效 - 局部作用域: 在函數內部生效
示例代碼
let num = 10;// 全局變量
function test01() {let num = 100;// 局部變量console.log(num)
}
function test02() {let num = 200;// 局部變量console.log(num)
}
console.log(num)
test01()
test02()
運行結果
2.在JS中,如果定義一個變量不使用let
,var
,此時這個變量就變成一個全局變量
示例代碼
for(i = 1; i <= 100; i++) {}
console.log(i)
運行結果
作用域鏈
函數可以定義在函數內部,內部函數可以訪問外部函數的變量,采取的是鏈式查找的方式,從內到外依次進行查找
示例1:
let num = 10
function test01() {let num = 100//100console.log(num)function test02() {let num = 200;//200console.log(num)}test02()
}
test01()
運行結果
示例2:
let num = 10
function test01() {let num = 100//100console.log(num)function test02() {//let num = 200;//100console.log(num)}test02()
}
test01()
運行結果
示例3:
let num = 10
function test01() {// let num = 100//10console.log(num)function test02() {//let num = 200;//10console.log(num)}test02()
}
test01()
運行結果
示例4:
//let num = 10
function test01() {// let num = 100//10console.log(num)function test02() {//let num = 200;//10console.log(num)}test02()
}
test01()
運行結果