iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
自我挑戰組

Be friend with JavaScript系列 第 14

Day 14 - Es6 - Arrow Function Expression & this

this

待補

  • 在 Object 中的 this
    在 Object 中 this 指向原物件
let Helen = {
    age:24,
    is_single:false,
    sayAge(){
        console.log("I am" + this.age + "years old.")
    }
};
Helen.sayAge(); // I am 24 years old.

且this能改變物件的值

let Helen = {
    age:24,
    is_single:false,
    sayAge(){
        console.log("I am" + this.age + "years old.")
    }
};
Helen.age = 25;
Helen.sayAge(); // I am 25 years old.

Arrow Function Expression

箭頭函式語法簡單,和傳統函式比,可以少打很多字,也讓程式碼較好閱讀,且某些情況下可以綁定 this 的值。
過去我們寫函式的方式如下:

function sayHi(){
    console.log("Hi");
}
sayHi(); // Hi

將上面例子改成箭頭函式:

const sayHi = () => {
    console.log("Hi")
}
sayHi(); // Hi
  • 如果函式有回傳值,要加上 return,且如果沒有參數,就一定要加括號,例如:
const sayHi = () => {
  return "Hi";
}
sayHi(); // Hi

上面的例子也可以簡化成下面這樣:

  • 省略 return 及 {},因為當沒有 {} 時,會自帶 return
const sayHi = () => "Hi";
sayHi(); // Hi
  • 如果函式只有一個參數時,() 可以省略
    原始程式碼:
let count = (x) => {
    console.log(x + 1)
}
count(3); // 4

參數省略 () 後:

let count = x => {
    console.log(x + 1)
}
count(3); // 4
  • 箭頭函式如果在定義 function 前就先執行會出錯
sayHi("Gina");
let sayHi = (name) => {
    console.log("Hi" + name)
}

執行上面的程式碼,會得到 Uncaught RefernceError 不能在定義前執行的錯誤提示

let May={
    name:"May",
    //function declaration
    greeting(){
        console.log("Hey " + this.name); // Hey May
    },
    //arrow function expression
    walk:()=>{
        console.log(this.name + is walking) // is walking
        console.log(this) // Window
    }
    
}

Arrow Function 的 this指向 window,所以通常在 object 裡面不太會使用 Arrow function


上一篇
Day 13 - ES6 - Spread / Rest Operator
系列文
Be friend with JavaScript14

尚未有邦友留言

立即登入留言