Sign in

JavaScript: (1) The “this” concept, (2)IIFE (Immediately Invoked Function Expression)

Also on Strikingly:
https://ryanx94.medium.com/javascript-1-the-this-concept-2-iife-immediately-invoked-function-expression-cceb60252674

更新

新增:

  1. 立即函式 IIFE (Immediately Invoked Function Expression)
  2. 立即函式 IIFE 對 this 的影響

前言

學習 this 觀念後,後續遇到應用情境,仍似懂非懂,因此歸納統整,儘量明確釐清:(1) this、(2) 前端 Views (MVC Framework)、(3) 物件導向的 Constructor (建構式函式),3者觀念和實務應用情境。

目前自己實務上,常用操作情境和 this 觀念:

  1. 前端 Views (MVC Framework):
    (1) 使用 this 的 Implicit Binding (隱式綁定),即 this 自動指向最近(父層)的 Object。
    (2) Controllers 將 Array Data 傳至 Views,Views 搭配 this 指向該 Array,幫助 render 頁面。
  2. Design Operational Data API (Object-oriented programming-Constructor):
    設計 API 時,透過物件導向的 Constructor (建構式函式)產生符合 JSON 的資料格式,另搭配使用 this 的 New Binding (new 關鍵字綁定)
  3. Arrow function (箭頭函式)不適用 this

this 定義

  1. JavaScript 中的 this ,會在調用某個 function 時,「自動」添加到該 function 中。
  2. 注意:this 是在 function 執行時才被自動添加在該 function 中,當 function 尚未執行時,無法確定 this 綁定對象為何。
  3. 隨著 function 執行環境不同,this 會綁定到不同對象

MDN-this

A function’s this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.

In most cases, the value of this is determined by how a function is called (runtime binding). It can't be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the bind() method to set the value of a function's this regardless of how it's called, and ES2015 introduced arrow functions, which don't provide their own this binding (it retains the this value of the enclosing lexical context).

this 的 4 種 Binding (綁定)方式

自己目前最常用 Implicit Binding (隱式)New Binding (new 關鍵字)

  1. Implicit Binding (隱式綁定):this 自動指向 最近的(父層) Object。

2. Explicit Binding (顯式綁定):自己設定 this 指定對象。
(1) .call()
(2) .apply()
(3) .bind()

3. Default Binding (預設綁定):
JavaScript 不知 this 綁定何者,因此直接預設綁定 Window 物件 (即綁定 Global Object 全域物件)。

4. New Binding (new 關鍵字綁定):
自己設定 this 指定對象;建構式 function 建立新物件,須用 new

※ 注意:Arrow function (箭頭函式)不適用 this

MDN-Arrow function expressions

An arrow function expression is a compact alternative to a traditional function expression, but is limited and can’t be used in all situations.

Differences & Limitations:

  1. Does not have its own bindings to this or super, and should not be used as methods.
  2. Does not have arguments, or new.target keywords.
  3. Not suitable for call, apply and bind methods, which generally rely on establishing a scope.
  4. Can not be used as constructors.
  5. Can not use yield, within its body.

立即函式 IIFE (Immediately Invoked Function Expression)

立即函式 IIFE:指透過 function expression 方式建立函式,並立即執行。
※ 注意:function 本身即為物件

Expressions (表達式):指輸入後能直接回傳值的一串程式(a unit of code that results in a value),一般可能把它存成一個變數,但是它不一定要被存成一個變數。

PJCHENDer:[筆記] 談談JavaScript中的IIFEs(Immediately Invoked Functions Expressions)

PJCHENDer:[筆記] 進一步談JavaScript中函式的建立─function statements and function expressions

MDN-IIFE

IIFE (Immediately Invoked Function Expression) 是一個定義完馬上就執行的 JavaScript function (en-US)

他又稱為 Self-Executing Anonymous Function (en-US),也是一種常見的設計模式,包含兩個主要部分:第一個部分是使用Grouping Operator (en-US) () 包起來的 anonymous function。這樣的寫法可以避免裡面的變數污染到 global scope。

第二個部分是馬上執行 function 的 expression (),JavaScript 引擎看到它就會立刻轉譯該 function。

Examples
Function 轉換為 expression 形式,並且馬上執行,function scope 內的變數在外面是無法存取的。

立即函式 IIFE 對 this 的影響

※ 注意:本例 inner function[func: function] 的 inner function 為立即函式 IIFE [後面有()],須特別指定 this,否則 this 都一律指向 global,console.log印出 undefined。

Equipped with web development, communication, and business analytical skills.

Equipped with web development, communication, and business analytical skills.