JavaScript Function (函式)-學習筆記

Photo by Shahadat Rahman on Unsplash

Funtion 函式，它是物件的一種，更正確的說法是可以呼叫的物件並能透過宣告變數賦值，當透過 typeof 去檢查時會發現是 function 的結果，但它不是 function 型別，而是物件。

函式是將重複的程式封裝在一起，並可以重複使用，也方便維護。

定義函式的方式

• 函式宣告
• 函式運算式
• 透過 new Function 關鍵字來建立

函式宣告 (Function declaration)

通常一個函式包括三個部份 ：

• 函式的名稱(可有可無)
• 在括號內()，函式的參數 arguments ，參數與參數之間可以用逗號 , 隔開，如沒有參數時也不能省略。
• 在大括號內 {} ，想封裝的程式，也是函式的主要區塊。
• 函式中可以有個回傳值，用 return 關鍵字來回傳值，如沒有要回傳的值可以省略，並會回傳 undefined 。

function 函式名稱(參數) {
 // 封裝的程式
}

範例 :

function addition(a, b) {
 return a + b  
}
addition(1, 2) //3
addition(3, 4) //7

這是函式的宣告與呼叫的範例。

在函式的參數就如同已經 var 宣告過，如再次使用 let 宣告時會產生錯誤。

function foo(arg) {
 let arg = 1
 return arg
}
foo() //SyntaxError: Identifier 'arg' has already been declared

但如果使用 var 宣告變數時，就不會產生錯誤。

function foo(arg) {
 var arg = 1
 return arg
}
foo() //1

函式運算式（Function Expressions）

是透過 變數名稱 = function 函式名稱(參數) {} ，將函式賦值 = 給變數。

let addition = function (a, b) { 
 return a + b
}
addition(1, 2) //3
addition(3, 4) //7

這裡會發現到函式function 之後沒有名稱，這部份稱為匿名函式。

如果要在函式之後加上名稱也是可以，但它的作用域只有自身內有效 ：

let addition = function func(a, b) {
 console.log(typeof func) //function 自身內有效
 return a + b
}
addition()
console.log(func) //undefined

透過 new Function 關鍵字建立函式

最後一種可以透過 new Function 關鍵字(F是大寫)來建立函式。

let addition = new Function("a", "b", "return a+b")
addition(1, 2)

使用 new Function關鍵字來建立函式時，它每次執行會解析 'return a+b' ，所以運作效能會比較差。

函式物件的屬性 (Object Properties)

Function.length

• 代表參數的長度。

(function () {}).length  //0
(function (a, b) {}).length  //2
(function (...args) {}).length  //0
(function (a, b = 2, c) {}).length  //1
只有預設前的參數會被算到，c 會被認為是 undefined

Function.name

• 代表函式的名稱。

(function foo() {}).name)//foo
(new Function()).name //anonymous
let func = function () {}
func.name //func
let obj = { objFunc: function () {} }
obj.objFunc.name //objFunc
let obj1 = { objFunc: function objInside() {} }
obj1.objFunc.name //objInside
let f = { fun() {} }  //es6
f.fun.name //fun

函式物件的方法 (Object Methods)

Function.prototype.call(thisArg, arg1, arg2, …)

• 可以用來明確將 this 指定哪個物件，在呼叫時帶入所需的物件，並立即執行。
• 參數 thisArg : 強制指定某個物件作為該 function 執行時的 this ，如沒有指定的物件須代入 null。
• 參數 argN : 代表是要輸入函式的參數，如函式不需要可以省略。

function Foo(age) {
 console.log(`My name is ${this.name},I am ${age} years old`)
}
let obj = {
 name: "Thomas"
}
Foo.call(obj, 33) //My name is Thomas,I am 33 years old

使用 call 呼叫另個函式並指定 this

function Foo(name, age) {
 this.name = name
 this.age = age
}
function showInfo(name, age) {
 Foo.call(this, name, age)  
}
let a = new showInfo("Castle", 12)
a //showInfo { name: 'Castle', age: 12 }

如沒有指定的物件須代入 null

function add() {
 return Array.from(arguments).reduce((acc, cur) => acc + cur)
}
add.call(null, 3, 5)  //8

Function.prototype.apply(thisArg, [argsArray])

• 可以用來明確將 this 指定哪個物件，在呼叫時帶入所需的物件，並立即執行。
• 參數 thisArg : 強制指定某個物件作為該 function 執行時的 this，如沒有指定的物件須代入 null。
• 參數 argsArray : 代表是要輸入函式的參數，但需要是陣列，如函式不需要可以省略。

let array = [2, 10, 1, 45, 66, 32, 8, 91, 4, 55, 12, 0]
Math.max.apply(null, array)  //91 找出最大值
Math.min.apply(null, array)  //0  找出最小值

使用 apply 呼叫另個函式並指定 this

function Foo(age) {
 console.log(`My name is ${this.name},I am ${age} years old`)
}
let obj = {
 name: "Thomas"
}
Foo.apply(obj, [33]) //My name is Thomas,I am 33 years old

apply 也常拿來結合 arguments 做運用

function Foo() {
 let obj = {
  name: "Thomas",
  func: function () {
   console.log(`${this.name} ${arguments[1]}`)
  },
 }
 obj.func.apply(obj, arguments)
}
Foo("abc", "Hello") //Thomas Hello

如沒有指定的物件須代入 null

function add() {
 return Array.from(arguments).reduce((acc, cur) => acc + cur)
}
add.apply(null, [1, 2]) //3

Function.prototype.bind(thisArg[, arg1[, arg2[, …]]])

• 可以用來在呼叫前先綁定 this 給某個物件，回傳包裹後的函式並存於宣告變數中。
• 參數 thisArg : 強制指定某個物件作為該 function 執行時的 this ，如沒有指定的物件須代入 null。
• 參數 argN : 代表是要輸入函式的參數，如函式不需要可以省略。

function add() {
 return Array.from(arguments).reduce((acc, cur) => acc + cur)
}
let funBind = add.bind(null)  //回傳包裹後的函式並存於宣告變數中
funBind(3, 5) //8

使用 bind() 來綁定物件並存於變數中

x = 9  //全域變數
let obj = {
 x: 45,
 fuc: function () {
  return this.x
 },
}
obj.fuc() //45
let objfunc = obj.fuc 
objfunc() //9 this 會指向全域變數中
let objfunc1 = objfunc.bind(obj)  
objfunc1() //45

…

參考：Function

以上是我對 Function (函式) 的學習筆記 😉。

***如果有任何想法，也歡迎留言與我分享~***