iT邦幫忙

第 11 屆 iThome 鐵人賽

0
自我挑戰組

新手初探 Vue系列 第 24

鐵人賽Day25 - ES6 之箭頭函式

var callSomeone = function (someone) {
  return someone + '吃飯了'
}

上面是我們一般傳統函式的寫法,如果改成箭頭函式會變成如下:

var callSomeone = (someone) => {
    return someone + '吃飯了'
}

return 只有單行的時候,我們可以縮寫的更精簡:

var callSomeone = (someone) => someone + '吃飯了';

在參數的部分我們甚至可以省略 () ,變成如下:

var callSomeone = someone => someone + '吃飯了';

如果沒有參數代入,() 是不可以省略的:

var callSomeone = () => someone + '吃飯了';

另外箭頭函式是沒有 arguments 變數的,如果是一般傳統函式,呼叫函式時參數帶入一個不用參數的 function 時,這時候還有 arguments 變數可以來存放:

const updateEasyCard = function () {
  let cash = 0;
  console.log(arguments); 
}
updateEasyCard(10, 50, 100, 50, 5, 1, 1, 1, 500);

但在箭頭函式,並沒有 arguments 這個變數,如果我們把它改成箭頭函式:

const updateEasyCard = () => {
  let cash = 0;
  console.log(arguments); 
}
updateEasyCard(10, 50, 100, 50, 5, 1, 1, 1, 500);

這時候是會跳錯的,但是我們使用前面講的其餘的方式來存放這些呼叫函式的參數:

const updateEasyCard = (...arg) => {
  let cash = 0;
  console.log(arg); 
}
updateEasyCard(10, 50, 100, 50, 5, 1, 1, 1, 500);

這時候就會正常顯示了

然而箭頭函式跟一般傳統函式最大的差異性是 this 的使用上,會指向不一樣的地方,先用傳統函式來撰寫,會發現 this 指向的都是 auntie 這個物件,如我們預期:

var name = '全域阿婆'
var auntie = {
  name: '漂亮阿姨',
  callName: function () { 
    console.log('1', this.name); // 1 漂亮阿姨
    setTimeout(function () {
      console.log('2', this.name); // 2 全域阿婆
      console.log('3', this); // 3 window 物件
    }, 10);
  },
}
auntie.callName();

這裡補充一下,setTimeout 用的其實是在 window 物件下,所以它的 this 會指向全域的部分
如果改成箭頭函式:

var name = '全域阿婆'
var auntie = {
  name: '漂亮阿姨',
  callName: () => { 
    console.log('1', this.name); // 1 全域阿婆
    setTimeout(() => {
      console.log('2', this.name); // 2 全域阿婆
      console.log('3', this); // 3 window 物件
    }, 10);
  },
}
auntie.callName();

會發現它的 this 都是指向 window,為了避免這樣的狀況,我們在使用 Vue 時的 methods 盡量採用傳統函式,不然 this 會指向其他物件
那箭頭函式到底用在哪呢?
其實我們可以如下使用:

var auntie = {
  name: '漂亮阿姨',
  callName () { 
    var vm = this;
    setTimeout(() => {
      console.log(vm);
    }, 10);
  }
}
auntie.callName();

主要是在 callName 這個 function 內先宣告一個 vm 變數指向這個物件,這樣 setTimeout 就會指向這個物件了


上一篇
鐵人賽Day24 - ES6 之縮寫
下一篇
鐵人賽Day26 - ES6 之字串模板 Template String
系列文
新手初探 Vue30

尚未有邦友留言

立即登入留言