JS 觀念 - 箭頭函式的 this 指向差異

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

const filterArr = arr.filter(function(item) {
  return item % 2 // 只要結果為真值就會回傳
})

console.log(filterArr); // [ 1,3,5 ]

const filterArr = arr.filter(item => item % 2);
console.log(filterArr);

var name = '全域'
const person = {
  name: '小胖',
  callName: function () { 
    console.log('1', this.name); // 1 小胖
    setTimeout(function () {
      console.log('2', this.name); // 2 simple call 指向全域的 name
      console.log('3', this); // 3 指向 window
    }, 10);
  },
}
person.callName();

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 指向 person 物件
    }, 10);
  },
}
person.callName();

var name = '全域'
const person = {
  name: '小胖',
  callName: () => { 
    console.log(this.name);
  },
}
person.callName(); // 全域

var name = '全域'
const person = {
  name: '小胖',
  callMe() {
    const callName = () => { 
      console.log(this.name);
    };
    callName();
  }
}
person.callMe();

var someone = '全域';

var obj4 = {
  someone: '物件 4',
  fn() {
    setTimeout(function () {
      console.log(this.someone);
    });
  }
}

obj4.fn();

var someone = '全域';

var obj4 = {
  someone: '物件 4',
  fn() {
    const vm = this;
    setTimeout(function () {
      console.log(vm.someone); // 確保取得 obj4 物件，不受干擾
    });
  }
}

obj4.fn();

var someone = '全域';

var obj4 = {
  someone: '物件 4',
  fn() {
    setTimeout(()=> { // 改成箭頭函式
      console.log(this.someone);
    });
  }
}

obj4.fn();