VUE3 課前章節-JS 必備觀念-箭頭函式

1.箭頭函式的縮寫

const arr = [1, 2, 3, 4, 5];

const filterArr = arr.filter(function(item){
    return item % 2; //結果為真值
});
console.log(filterArr)
//會得到陣列[1,3,5]

可以改寫為
(先將function移掉改為箭頭指向大括號，再將大括號和return移掉將結果移到同一行)
箭頭函式會自動帶上return

const filterArr = arr.filter(item => item % 2); // 取有餘數的值（單數）
console.log(filterArr);

1. This綁定的差異 內層改為箭頭

此部分的setTimeout是simplecall 因此2跟3都會找到全域的部分

var name = '全域'
const person = {
  name: '小明',
  callName: function () { 
    console.log('1', this.name); // 1 小明
    setTimeout(function () {
      console.log('2', this.name); // 2
      console.log('3', this); // 3
    }, 10);
  },
}
person.callName();

若將setTimeout的function部分改為箭頭函式
則This會直接找到外層作用域的指向

var name = '全域'
const person = {
  name: '小明',
  callName: function () { 
    console.log('1', this.name); // 1 小明
    setTimeout(() => {  //這邊！！
      console.log('2', this.name); // 2
      console.log('3', this); // 3
    }, 10);
  },
}
person.callName();

3.箭頭函式的陷阱
由於person的callName用箭頭函式，前面學到要匡起來往外找
但是外層並沒有其他的函式，因此會找到全域

var name = '全域'
const person = {
  name: '小明',
  callName: () => { 
    console.log(this.name); // 請尋找箭頭所在的作用域為何？
  },
}
person.callName();

但若是外層有找到 就會往外層找 如下圖

1. 實戰應用

var someone = '全域';

var obj4 = {
  someone: '物件 4',
  fn() {
    setTimeout(()=> { //這裡將原本的function改為箭頭函式 便可以找到外層
      console.log(this.someone);
    });
  }
}