函式

函式

更新於 發佈於 閱讀時間約 4 分鐘

函式最基本的形式長這樣 :

function greet(name) {
return "Hello, " + name + "!";
}

這個函式接受一個參數name,並返回一個問候語。您可以這樣調用它

console.log(greet("Alice")); // 輸出: Hello, Alice!


接下來講宣告函式跟箭頭函式,函式的宣告方式會影響 this 的指向 :

  1. 宣告函式(Function Declaration)

語法:

function functionName(parameters) {

return result;
}

特點:

  • 使用 function 關鍵字
  • 函式名稱是必需的
  • 存在函式提升(hoisting)
  • 有自己的 this 綁定

例子:

function greet(name) {
return `Hello, ${name}!`;
}

console.log(greet("Alice")); // 輸出: Hello, Alice!


  1. 箭頭函式(Arrow Function)

箭頭函式是 ES6 引入的簡潔函式語法。

語法:

const functionName = (parameters) => {

return result;
};

特點:

  • 使用 => 符號
  • 通常賦值給變數
  • 沒有自己的 this,繼承外圍作用域的 this

例子:

const greet = (name) => `Hello, ${name}!`;

console.log(greet("Bob")); // 輸出: Hello, Bob!


主要區別:

this 綁定:

  • 有自己的 this 綁定,根據調用方式決定
  • 箭頭函式沒有自己的 this,使用外圍作用域的 this

函式提升:

  • 宣告函式會被提升
  • 箭頭函式不會被提升

使用情況:

  • 宣告函式適用於需要自己的 this 的情況
  • 箭頭函式適用於簡短的函式表達式,特別是在回調函式中


以下有兩個例子,都是關於this的指向性

// 宣告函式
const obj1 = {
name: "Object 1",
greet: function() {
console.log(`Hello from ${this.name}`);
}
};

// 箭頭函式
const obj2 = {
name: "Object 2",
greet: () => {
console.log(`Hello from ${this.name}`);
}
};

obj1.greet(); // 輸出: Hello from Object 1
obj2.greet(); // 輸出: Hello from undefined (因為箭頭函式沒有自己的 this)


總結:

  • 宣告函式的 this 是動態綁定的,取決於函式如何被調用。
  • 箭頭函式的 this 是靜態的,在函式創建時就確定了,它繼承自外層作用域的 this


參考資料 :
iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天 (ithome.com.tw)










avatar-img
郭欣玫的沙龍
3會員
17內容數
留言
avatar-img
留言分享你的想法!
郭欣玫的沙龍 的其他內容
就是指變數可以被訪問和使用的範圍,來說一下var、let和const的作用域差異。 var :function example() { console.log(x); // 輸出: undefined 因為變量提升造成的 var x = 5; } 函數作用域或全域作用域 可以重複宣告
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
今天要來討論 1 + "1" 。 如果當兩個操作數都是數字時,+ 會執行數字相加。例如,1 + 1 結果是 2。 那如果是"1"+"1",就變成字符串相加變成11。 那我們今天要講的是1 + "1",答案是11,為甚麼呢? 這是一個類型強制轉換,今天當 + 遇到不一樣的類型時,JavaScrip
首先要安裝vscode : Visual Studio Code - Code Editing. Redefined 安裝後我們就可以把她打開來,接著去檔案 -> 喜好設定 -> 設定檔(預設) -> 你就會看到設定裡面的 settings.json,就可以開始你的設定拉(主要是依照個人的喜好設定
pure function 是甚麼呢? 最主要兩大特點 : 淺顯易懂的說法就是 : 對於有相同的輸入,就會有相同的輸出。 無副作用 : 不會去修改或依賴外部的狀態。 舉一個例子 : function add(a, b) { return a + b; } function裡面他帶入的
Node.js是一個JavaScript運行環境。它使用了一個非阻塞、事件驅動的I/O模型,使其非常適合用於數據密集型的即時應用程序。簡單來說,Node.js允許你使用JavaScript來編寫伺服器端代碼。 nvm 安裝nvm Windows : 點擊 Releases · coreybut
就是指變數可以被訪問和使用的範圍,來說一下var、let和const的作用域差異。 var :function example() { console.log(x); // 輸出: undefined 因為變量提升造成的 var x = 5; } 函數作用域或全域作用域 可以重複宣告
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
今天要來討論 1 + "1" 。 如果當兩個操作數都是數字時,+ 會執行數字相加。例如,1 + 1 結果是 2。 那如果是"1"+"1",就變成字符串相加變成11。 那我們今天要講的是1 + "1",答案是11,為甚麼呢? 這是一個類型強制轉換,今天當 + 遇到不一樣的類型時,JavaScrip
首先要安裝vscode : Visual Studio Code - Code Editing. Redefined 安裝後我們就可以把她打開來,接著去檔案 -> 喜好設定 -> 設定檔(預設) -> 你就會看到設定裡面的 settings.json,就可以開始你的設定拉(主要是依照個人的喜好設定
pure function 是甚麼呢? 最主要兩大特點 : 淺顯易懂的說法就是 : 對於有相同的輸入,就會有相同的輸出。 無副作用 : 不會去修改或依賴外部的狀態。 舉一個例子 : function add(a, b) { return a + b; } function裡面他帶入的
Node.js是一個JavaScript運行環境。它使用了一個非阻塞、事件驅動的I/O模型,使其非常適合用於數據密集型的即時應用程序。簡單來說,Node.js允許你使用JavaScript來編寫伺服器端代碼。 nvm 安裝nvm Windows : 點擊 Releases · coreybut