箭頭函式與傳統函式差異

Posted on | In

arguments 參數 、This、建構式

A. 沒有arguments 參數

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// # 1. 沒有arguments 參數
// 將以下改成Arrow Function，並觀察差異
const nums = function () {
  console.log(arguments)
  // argument 參數是屬於類陣列
}

const nums = () => {
  console.log(arguments)
  // Uncaught ReferenceError: arguments is not defined
}
// 若還是要取其餘參數
const nums = (...arg) => {
  console.log(arg)
}

B. 沒有自己的This

This 綁定的差異
箭頭函式沒有自己的This
也無法透過 call, apply, bind 重新給予this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var myName = '全域'
var person = {
   myName: '小明',
   callName: function () {
     console.log('1', this.myName) // 1 小明
     setTimeout(function() {
       console.log('2', this.myName) // 2 全域
     }, 0)
   },
   // 箭頭函式沒有自己的This, this 指向外層
   callArrowName: function () {
     console.log('3', this.myName) // 3 小明
     setTimeout(() => {
       console.log('4', this.myName) // 4 小明
     }, 0)
   },
   // 箭頭函式沒有自己的This, this 指向外層
   callArrowName2 : () => {
     console.log('5', this.myName) // 5 全域 
     setTimeout(() => {
       console.log('6', this.myName) // 6 全域 
     }, 0)
   }
 }
person.callName()
person.callArrowName()
person.callArrowName2()

箭頭函式是「無法」做建構函式使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const Fn = function (a) {
  this.name = a
}
const ArrowFn = (a) => {
  this.name = a;
}
console.log(Fn.prototype, ArrowFn.prototype)
// {constructor: ƒ} undefined

const a = new Fn('a')
console.log(a) //Fn {name: "a"}

const b = new ArrowFn('b’)  
// ArrowFn is not a constructor