iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
0
Modern Web

30天前端網頁技術超入門介紹系列 第 27

Day27. ES6(五) - Arrow Function(箭頭函式) 簡單須知

今天要來介紹箭頭函式了~~簡單來說,方便的東西,但有不少陷阱!

要注意的地方

  1. 首先,他沒有 arguments[註1]、super[註2]。
  2. 因為沒有建構式的屬性,所以無法 new 來呼叫箭頭函式。
  3. 無法使用 new 來呼叫,所以也沒有原型
  4. 在函式中使用的 this 指得與傳統函式的 this 不同。

基礎使用

從樣子看來就是把 function 拿掉改用箭頭。

let fun1 = function(參數){
    console.log('我是傳統函式');
}
let fun2 = (參數) => {
    console.log('我是箭頭函式');
}

假如只需一行的話

let fun3 = () => console.log('我是單行的箭頭函式');

this 的處理

傳統函式在 this 上雖然通常指的是呼叫 function 的物件,但還是要根據上下文來判斷。
箭頭函式的 this 因為不會產生作用域,所以指的是上層的 this,通常會被指向 window。(通常啦...

var name = "基德";
var nameObj = {
    name: "亮",
    obj1: function(){
        console.log("1", this); // nameObj 物件
        console.log("2", this.name); // 亮
    },
    obj2: () => {
        console.log("3", this); // window
        console.log("4", this.name); // 基德
    }
}

假如有括號包著讓他擁有作用域的話

var name = "基德";
var nameObj = {
    name: "亮",
    obj() {
        setTimeout(() => {
            console.log(this); // nameObj 物件
            console.log(this.name); // 亮
        }, 100)
    }
}
nameObj.obj();

是不是覺得一不小心就會掉入陷阱之中呢?假如還不熟悉的話就繼續用傳統的函式吧~


註1:argument 指的是「引數」,意思是函式被呼叫時所帶入的參數。而 arguments 是所有引數的集合,以「類似」陣列的型態顯示,因為無法使用 JavaScript 的陣列屬性,所以又稱為「類陣列」。

註2:其實這個我也不熟...不過根據 Understanding ECMAScript 6 的說明,似乎能使 JS 的原型更方便操作。


上一篇
Day26. ES6(四) - 解構賦值
下一篇
Day28. Prototype(原型) 基本介紹
系列文
30天前端網頁技術超入門介紹30

尚未有邦友留言

立即登入留言