iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
自我挑戰組

Vue.js 從零開始系列 第 6

Vue.js 從零開始:箭頭函式

上篇説到傳統函式This指向基本原則:呼叫時前面的物件是誰,和怎麼定義無關,但箭頭函式的This指向,完全不是這樣運作的。


箭頭函式基本認識

  • ES6 新增的語法。
  • 讓 JavaScript 的撰寫的更精簡。

再來看傳統函式與箭頭函式的差別:

  • 傳統函式
const arr = [1,2,3,4,5];

const  filterArr = arr.filter(function(item){
  return item % 2; //除2的餘數 為真值取出來
});

  • 箭頭函式
const arr = [1,2,3,4,5];

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

console.log(filterArr);

區別在於以下幾點:

  • function
  • 大括號 { }
  • item的( )
    以上幾個都被拿掉,但是要注意 function 裡面的參數只有一個時才可以把( )拿掉。
    補充:箭頭函式自帶return功能,但是前提是要把{}拿掉才會生效。

再來一段範例:

var name = '全域';
const obj = {
    name: '物件',
    callName: function () {
    console.log(this.name); //物件
    setTimeout(function () {
      console.log(this.name); //全域
      console.log(this); //windows
    }, 100);
  },
};

obj.callName();

setTimeout裡面的callback function this.name指向會是全域,this 則是指向windows。

接下來改成箭頭函式:

var name = '全域';
const obj = {
    name: '物件',
    callName: function () {
    console.log(this.name); //物件
    setTimeout(() => {
      console.log(this.name); //物件
      console.log(this); //obj
    }, 100);
  },
};

obj.callName();

因為箭頭函式沒有自己的This,所以callback function This指向會變成跟外部函式作用域的This指向ㄧ樣。

假如箭頭函式外部沒有函式呢?

var name = '全域';
const obj = {
  name: '物件',
   callName: () => {
     console.log(this.name)
   }
};

obj.callName();

外部找不到函式,箭頭函式This就會指向為全域。

總結

傳統函式This指向是看呼叫函式前面的物件
箭頭函式沒有自己的This,如果外部有函式,作用域This就會跟外部函式一樣,如果沒有外部無函式This指向則是全域。
setTimeout裡面的callback function this指向則會是windows

明天要來講解最後一篇JavaScript的觀念篇,其他觀念則會放在其他篇小章節裡,之後就會開始Vue的篇章,敬請期待,祝大家中秋節快樂!

/images/emoticon/emoticon61.gif


上一篇
Vue.js 從零開始:This 是什麼?
下一篇
Vue.js 從零開始:物件參考 深拷貝 淺拷貝
系列文
Vue.js 從零開始30

尚未有邦友留言

立即登入留言