函式 expressions 是函式
預期會產生一個運算式經常會遇到函式
運算式視為指派給變數的值。雖然函式宣告
一律需要名稱,您可以使用函式運算式建立匿名
函式,方法是省略 ID,然後在 function
關鍵字後方加上
一對包含選用參數的括號:
const myVariable = function() { };
接著,您就能呼叫這些服務 透過變數 ID 使用這些函式運算式:
const myVariable = function() {
console.log( "This is my function." );
};
myVariable();
> "This is my function."
您也可以使用函式運算式,透過語法建立已命名函式 類似於函式宣告:
const myVariable = function myFunction() {
console.log( "This is my function." );
};
myVariable();
> "This is my function."
但與函式宣告不同的是,已命名函式運算式可以 僅由函式名稱中的函式名稱存取:
const myVariable = function myFunction() {
console.log( `I'm a ${ typeof myFunction }.`);
};
typeof myFunction;
> "undefined"
typeof myVariable;
> "function"
myVariable();
> "I'm a function."
與函式運算式相關聯的名稱主要用於偵錯。A 罩杯 已命名函式運算式也可以遞迴方式呼叫本身, 現代開發的常見用途
const myVariable = function myFunction() {
console.log( "One second elapsed." );
setTimeout( myFunction, 1000 );
};
setTimeout( myVariable, 1000 );
> "One second elapsed."
> "One second elapsed."
> "One second elapsed."
…
透過箭頭函式運算式
箭頭函式運算式 (通常稱為「箭頭函式」或「lambda」 函式」),提供簡潔的語法,方便您建立 添加一些獨特行為的匿名函式運算式
您可以在任何需要運算式的地方建立箭頭函式,
舉例來說,這是指派給變數的值在最常見的形式中,
函式由一組比對括號組成,其中包含零或多個
參數、箭頭由一個等號和大於字元組成
(=>
),以及一組含有函式主體的配對大括號:
const myFunction = () => {};
在某些條件下,您可以讓語法變得更小。如果您是 只使用一個參數,可以省略起始括號:
const myFunction = myParameter => {};
當您希望函式主體傳回單一運算式的值時,
沒有將函式主體用大括號括住
return
關鍵字是必要項目:
const myFunction = () => 2 + 2
myFunction()
> 4
箭頭函式具有獨特之處,因為系統本身沒有
arguments
或
this
值。而是沿用
來自箭頭函式的值
集中式包容環境,最接近
可提供上述結構定義的封閉函式。
function myParentFunction() {
this.myProperty = true;
let myFunction = () => {
console.log( this );
}
myFunction();
};
let myInstance = new myParentFunction();
> Object { myProperty: true }
呼叫箭頭函式
箭頭函式與其他類型的函式綁定引數的方式不同。箭頭函式主體中的 arguments
物件繼承了
最接近該箭頭函式
廣泛包入環境:
function myFunction() {
let myArrowFunction = () => {
console.log( arguments[ 0 ] );
}
myArrowFunction( true );
};
myFunction( false );
> false
在這個範例中,使用引數 false
呼叫的外部函式會呼叫
加上 true
引數的內部箭頭函式。由於箭頭函式中的 arguments
物件會解析為外部函式中的繫結,因此內部函式會記錄外部函式的 false
。
如果沒有可從父項結構定義繼承的 arguments
物件,箭頭就是箭頭
函式的 arguments
物件未定義,而嘗試存取該物件會導致
錯誤:
let myArrowFunction = () => {
console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined
立即叫用函式運算式 (IIFE)
立即叫用的函式運算式 (IIFE) ,有時也稱為 「自行執行匿名函式」是一種函式運算式 並在定義後立即顯示IIFE 會使用函式運算式,這個運算式是將函式包在分組運算子中所建立。第二對括號呼叫函式後,系統會立即呼叫函式 參照,或緊接在函式定義之後 運算子。如果使用標準函式,則沒有實質的差異 比較簡單
(function() {
console.log( "IIFE.")
}
)();
> "IIFE."
(function() {
console.log( "IIFE.")
}
());
> "IIFE."
第一個範例會呼叫分組的函式運算式。第二個範例 會在分組運算子中呼叫函式宣告,然後 會視為已分組的運算式在 確認是否屬於此情況
不過,如果 IIFE 是箭頭函式,則會產生差異。在本 為大寫,用於呼叫函式的括號必須位於分組之外 運算子,因為箭頭函式本身並非運算式,但必須 在預期有運算式的環境中建立。當嘗試呼叫 群組運算子內部的方向鍵 呼叫尚未在結構定義中建立的箭頭函式 運算式:
( () => {
console.log( "IIFE." );
}() );
> Uncaught SyntaxError: missing ) in parenthetical
由於分組運算子需要運算式,因此當中的箭頭函式 定義完成後,後面的括號呼叫 運算式:
( () => {
console.log( "IIFE." );
} )();
> "IIFE."
傳統應用程式,經常使用 IIFE 管理範圍,特別是 避免汙染全域範圍 搭配函式範圍變數 和函式宣告 區塊範圍設定推出前 常見的做法是將整段腳本包裝在 IIFE 內, 避免全球範圍的意外汙染
隨堂測驗
您可以在 功能?