跳至主要内容

3 篇文章 含有標籤「arrow function」

檢視所有標籤

JavaScript this 使用情境入門教學筆記 | 學習筆記

· 閱讀時間約 3 分鐘
kdchang

在 JavaScript 中，箭頭函式（arrow function）與傳統函式在 this 的行為上有一些不同。箭頭函式不會創建自己的 this，而是繼承外部作用域的 this，這就是為什麼你會遇到 this 的問題。

傳統函式中的 this​

在傳統的函式中，this 會指向該函式被調用時的上下文。例如，當函式作為事件處理器時，this 會指向觸發事件的元素。

function regularFunction() {
  console.log(this);  // 'this' 是調用它的上下文
}

const obj = {
  name: 'KD',
  show: regularFunction
};

obj.show();  // 'this' 會指向 obj

箭頭函式中的 this​

在箭頭函式中，this 並不會綁定到函式的上下文，而是繼承自外部作用域。這通常會讓箭頭函式的 this 變得不同於你預期的結果。

例子：this 的問題​

假設有這樣的情境，當你在一個物件的方法中使用箭頭函式作為事件處理器，this 會指向外部作用域，而不是該物件本身。

const obj = {
  name: 'KD',
  show: function() {
    // 使用傳統函式作為事件處理器
    document.getElementById('btn').addEventListener('click', function() {
      console.log(this);  // 'this' 指向的是 'btn' 按鈕元素
    });

    // 使用箭頭函式作為事件處理器
    document.getElementById('btn').addEventListener('click', () => {
      console.log(this);  // 'this' 指向外部作用域，即 'obj' 物件
    });
  }
};

obj.show();
  • 在傳統函式中，this 會指向觸發事件的 DOM 元素（這裡是 btn 按鈕）。
  • 在箭頭函式中，this 會指向外部作用域（這裡是 obj 物件），因為箭頭函式不會創建自己的 this。

解決方案：確保 this 正確指向​

如果你希望 this 指向物件本身，可以使用傳統函式或手動綁定 this。

使用傳統函式​

如果你希望在事件處理器中讓 this 指向物件本身，可以使用傳統函式，或者使用 bind 顯式綁定 this。

const obj = {
  name: 'KD',
  show: function() {
    document.getElementById('btn').addEventListener('click', function() {
      console.log(this);  // 'this' 指向 obj
    }.bind(this));  // 顯式綁定 'this' 到 obj
  }
};

obj.show();

另一個選項：箭頭函式和外部 this​

如果你希望繼續使用箭頭函式，你可以將物件的 this 儲存到外部變數中，並在箭頭函式中引用它。

const obj = {
  name: 'KD',
  show: function() {
    const self = this;  // 保存物件的 'this'
    document.getElementById('btn').addEventListener('click', () => {
      console.log(self);  // 使用外部的 'self'，指向 obj
    });
  }
};

obj.show();

總結​

  • 傳統函式 會根據調用上下文決定 this 的值。
  • 箭頭函式 會繼承外部作用域的 this，不會創建自己的 this，這樣在某些情況下會導致 this 不如預期。
  • 如果你需要在事件處理器中使用物件的 this，可以選擇使用傳統函式或顯式綁定 this。

JavaScript 多事件處理綁定使用情境入門教學筆記 | 學習筆記

· 閱讀時間約 3 分鐘
kdchang

在 JavaScript 中，你可以通過事件處理的方式來為多個 input 元素綁定事件處理器。這樣做可以讓你在父容器上綁定一個事件處理器，並通過 event.target 確定觸發事件的具體 input 元素，而不需要為每個 input 元素單獨綁定事件。

事件委派的概念​

事件委派是一種常見的事件處理技術，它將事件綁定到父元素或容器上，然後通過 event.target 來確定哪個子元素觸發了事件。這種方式在動態生成的元素中非常有用，因為無論多少個元素，它們都會使用相同的事件處理器。

例子：為多個 input 元素使用事件委派​

假設有多個 input 元素，並且我們希望根據用戶在每個 input 中的輸入執行某些操作，可以像這樣使用 event.target：

<div id="inputContainer">
  <input type="text" id="input1" />
  <input type="text" id="input2" />
  <input type="text" id="input3" />
</div>

<script>
  // 綁定事件處理器到父容器
  document.getElementById('inputContainer').addEventListener('input', function(event) {
    // 檢查事件目標是否為 input 元素
    if (event.target.tagName.toLowerCase() === 'input') {
      console.log('觸發的 input 元素 ID:', event.target.id);
      console.log('輸入的值:', event.target.value);
    }
  });
</script>

解釋：​

  1. 我們將 input 元素的 input 事件綁定到父容器 #inputContainer 上。
  2. 當任何一個 input 元素觸發 input 事件時，事件會冒泡到父容器，並且事件處理器會被執行。
  3. 在事件處理器中，我們使用 event.target 來確定是哪個 input 元素觸發了事件。event.target 會返回實際觸發事件的元素。
  4. 通過 event.target.id 和 event.target.value，我們可以獲取觸發事件的 input 元素的 ID 和輸入的值。

優點：​

  • 減少事件綁定數量：不需要為每個 input 元素單獨綁定事件，減少了冗餘代碼。
  • 動態元素支持：即使後來添加了新的 input 元素，父容器上的事件處理器也會自動處理新元素。

當 input 元素是動態創建時：​

如果你有動態創建的 input 元素，事件委派依然有效，因為事件處理器是綁定在父容器上的，而不需要直接綁定在每個 input 元素上。

// 假設需要動態創建 input 元素
const container = document.getElementById('inputContainer');

for (let i = 1; i <= 5; i++) {
  const input = document.createElement('input');
  input.type = 'text';
  input.id = 'input' + i;
  container.appendChild(input);
}

這樣，當你動態創建新的 input 元素時，父容器上的事件處理器會自動處理這些新的 input 元素。

JavaScript 箭頭函式 (Arrow Function）入門教學筆記 | 學習筆記

· 閱讀時間約 3 分鐘
kdchang

在 JavaScript 的 箭頭函式 (Arrow Function, =>) 中，this 的行為與傳統的 函式表達式 (Function Expression) 不同，主要特點如下：

箭頭函式的 this 綁定​

  1. 箭頭函式不會建立自己的 this，而是繼承定義它的上下文（也稱為 詞法作用域 Lexical Scope）。
  2. 在箭頭函式內部，this 指向的是箭頭函式所處的外部函式的 this 值。

範例​

1. 一般函式的 this​

function normalFunction() {
  console.log(this); // this 取決於調用方式
}

const obj = {
  method: normalFunction
};

obj.method(); // this 指向 obj
normalFunction(); // this 指向全域物件 (在瀏覽器是 window，在 Node.js 是 global)

2. 箭頭函式的 this​

const arrowFunction = () => {
  console.log(this); // 繼承外部作用域的 this
};

const obj2 = {
  method: arrowFunction
};

obj2.method(); // this 指向定義時的外部作用域，而不是 obj2

解析：

  • arrowFunction 並未創建自己的 this，所以 this 仍然指向外部作用域的 this，而不是 obj2。

箭頭函式適用場景​

1. 在物件方法中避免 this 綁定問題​

const person = {
  name: "John",
  sayHello: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`); // this 繼承 sayHello 的 this，即 person
    }, 1000);
  }
};

person.sayHello(); // Hello, John

解析：

  • setTimeout 中的箭頭函式不會創建新的 this，它會繼承 sayHello 方法中的 this，所以 this.name 正確指向 person.name。

若使用一般函式，this 會指向 window（瀏覽器環境）或 undefined（嚴格模式）。

2. 當作回呼函式 (Callback)​

const numbers = [1, 2, 3];

// 使用箭頭函式讓 this 指向外部作用域
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6]

map() 內的箭頭函式不需要 this，但讓語法更簡潔。

箭頭函式的 this 限制​

1. 不能作為建構函式 (Constructor)​

const Person = (name) => {
  this.name = name; //  錯誤，this 不會指向新建的物件
};

const john = new Person("John"); // TypeError: Person is not a constructor

解法： 必須使用 function 來定義建構函式：

function Person(name) {
  this.name = name;
}

const john = new Person("John"); //  正常運作

2. 不能使用 arguments​

const sum = () => {
  console.log(arguments); //  ReferenceError: arguments is not defined
};

sum(1, 2, 3);

解法： 可以使用 展開運算符 ...args

const sum = (...args) => {
  console.log(args); //  [1, 2, 3]
};

sum(1, 2, 3);

3. 無法使用 .bind() 改變 this​

const obj = {
  value: 42,
  method: () => {
    console.log(this.value);
  }
};

const newMethod = obj.method.bind({ value: 100 });
newMethod(); // undefined (this 不會變)

箭頭函式的 this 綁定無法透過 bind()、call() 或 apply() 來改變。

總結​

特性一般函式 (Function)箭頭函式 (Arrow Function)
this依呼叫方式決定繼承外部作用域
arguments有 (function 內部)無 (...args 取代)
bind()/call()/apply()可改變 this無效
new 關鍵字可用於建構函式無法當建構函式

適用場景​

適合使用箭頭函式：

  • 短小的回呼函式 (e.g. map, filter, forEach)
  • setTimeout() 或 setInterval()
  • 物件內部方法但不希望 this 被改變

不適合使用箭頭函式：

  • 建構函式
  • 需要動態 this 的方法
  • 使用 arguments 物件的場合