更新時間:2022-06-20 09:06:17 來源:動力節點 瀏覽725次
首先,我們來看一下過去我們撰寫函數的方法:
在ES6 中,我們可以把它改成箭頭函數的寫法,它會變成下面這樣:
沒有參數的時候要記得加上空括號
要特別留意的地方是,在箭頭函數中如果沒有帶入參數時,一樣要加上空括號。
如果只是要回傳某個值,可以省略return
如果我們的函式本身只是要回傳某個值的話,可以把return 這個字省略掉:
兩個以上的參數,需要使用括號
當我們的函式擁有兩個以上的參數時,我們一樣要使用括號來帶入參數,寫法像是下面這樣子:
當函數只有一個參數時,不需要使用括號
從上面的例子我們可以知道,當函數沒有參數或有兩個以上的參數時,我們都要加上括號( ),但是當函數只有一個參數時,可以省略括號不寫,因此,當我們的函數只有一個參數時,我們的函數長得像這樣:
在使用箭頭函數時,有一點要注意的是,在箭頭函數中,this 指稱的對象在所定義時就固定了,而不會隨著使用時的脈絡而改變。
讓我們來看一下這個例子:
在這個范例中,不論我們使用的是原本function 的寫法或ES6中的箭頭函式,都會回傳得到最外層的window 物件,這樣看起來似乎兩者沒有太大的差別。
然而,換個例子的情況就不一樣,讓我們來看看下面兩個不同的例子:
例子一
我們分別用原本的寫法和箭頭函示的寫法建立了兩個function:
// 原本的 function
let fn = function(){
console.log(this.constructor.name); // Object(data)
setTimeout(function(){
console.log(this.constructor.name) // Window
},100);
}
// 箭頭函式 Arrow function
let fn_arr = function(){
console.log(this.constructor.name); // Object(data)
setTimeout(() => {
console.log(this.constructor.name) // Object(data)
},100);
}
let id = 21;
let data = {
id: 21
}
fn.call(data);
fn_arr.call(data);
例子二
第二個例子是使用addEventListener 來達到示范,首先我們在HTML 中建立一個button element,然后利用JS 來抓取這個button,接著JS 部分則如下所示:
var button = document.querySelector('button');
var fn_arr = () => {
// 建立 function 時 this 指 Window
console.log(this.constructor.name) // 執行function時 this 指 Window
};
var fn = function(){
// 建立 function 時 this 指 Window
console.log(this.constructor.name) // 執行function時 this 指 HTMLButtonElement
button.addEventListener('click', fn_arr);
和例子一中的setTimeout 類似,我們使用的addEventListener ,也會在整個execution context 執行結束后,在網頁觸發事件時才執行。
因此不論在傳統的函式寫法(fn)或箭頭函式(fn_arr)的寫法,一開始建立function的時候this所指稱的都是 window 這個物件,然而,如果是使用傳統的寫法,在觸發這個事件時所指稱的對象會從原本的window 變成HTMLButtonElement;若使用的是箭頭函式,則會固定所指稱的對象,因此this 依然指稱的是window 這個物件。
0基礎 0學費 15天面授
有基礎 直達就業
業余時間 高薪轉行
工作1~3年,加薪神器
工作3~5年,晉升架構
提交申請后,顧問老師會電話與您溝通安排學習