iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
自我挑戰組

開始入坑網頁吧!系列 第 14

JavaScript Arrow Function(箭頭函式)

箭頭函式

箭頭函式功能與一般函式的用法大致差不多,不過寫法卻比一般函式還要簡潔的多。
這裡就直接來時做如何把一般函式改成箭頭函式,如此會比較好理解兩者之間的差異。

EX1:

//原函式
function sum(a,b){
return a+b;
}

//改成箭頭函式
var sum = (a,b)=> a+b;

1.可以省掉 function 關鍵字
2.加上箭頭
3.單一行陳述不需要 {} ,而且在沒有 {} 情況下就算沒寫 return 會預設 return
4.//如果只有一個參數 () 也可以省略

EX2:

//原函式
function sayHi(){
console.log('Hi!!');
}
//改成箭頭函式
var sayHi = ()=>console.log('Hi!!')

EX3:

//原函式
document.addEventListener('click',function(){
console.log('clicked!');
})
//改成箭頭函式
document.addEventListener('click',()=>console.log('clicked!'));

箭頭函式需要注意之處

1.沒有arguements

一般函式:

const abc = function() {
  console.log(arguments); 
}
abc('a', 'b', 'c');
//VM1203:2 Arguments(3) ['a', 'b', 'c', callee: ƒ, Symbol(Symbol.iterator): ƒ]

就會顯示出arguements這樣的類陣列

箭頭函式:

const abc = () => {
  console.log(arguments); 
}
abc('a', 'b', 'c');//VM1133:2 Uncaught ReferenceError: arguments is not defined

2.箭頭函式綁定的this不同

一般函式:

var person={
name: 'Lisa',
call:function(){
console.log(this.name);
}
}
person.call()//Lisa

箭頭函式:

var person={
name: 'Lisa',
call:()=>console.log(this.name)
}
person.call()//undifined

因為這個函式指的是window 所以才得到undifined

W3school JavaScript Arrow Function
鐵人賽:箭頭函式 (Arrow functions)


上一篇
JavaScript This
下一篇
JavaScript class
系列文
開始入坑網頁吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言