ES6 箭頭函式

let
func
= num =>
;func(1
)//1

//1沒有使用箭頭函式
const jelly =)}
}jelly.
printhobbies()
;//如上，在沒有使用箭頭函式時，要想呼叫name值，需要在function中宣告self，
// 然後在map()函式中呼叫self.name才能呼叫，如果在map()函式中直接呼叫this，則該map()中的this值為window物件。
//2.使用箭頭函式
const tom =)}
}tom.
printhobbies()
;// 如上，當使用箭頭函式時：this繼承自其父作用域，所用this.name能被呼叫

const
person
=(name, age)
=>
const bom =
newperson
("bom",18
);//person is not a constructor 
// 因為使用箭頭函式不能用於建構函式因為箭頭函式本身沒有屬於自己的this，所以箭頭函式不可以當做建構函式，

const div = document.
queryselector
(".box1");
div.
addeventlistener
("click",(
)=>
,2000)}
)//預設情況下，click回掉函式會繫結到觸發事件的元素上，
//但因為是箭頭函式，箭頭函式不會繫結到觸發事件的元素上，此時this即為外層this，即this為window。

constb=
(b)=>b(
2,92,
32,32)
;// arguments is not defined

consta=
()=>
functionb(
)console.
log(a.prototype)
;// undefined
console.
log(b.prototype)
;//

箭頭函式優勢

1.隱式返回

2.箭頭函式都是匿名函式，無function宣告

3.箭頭函式沒有自己的this，它的this繼承自其父作用域。

不適宜箭頭函式的場景

1.不能作為建構函式

2.定義物件的方法時，不適合使用箭頭函式，因為箭頭函式中的this值繼承自父域，如果使用箭頭函式定義物件方法，則this會指定為window。

3.繫結事件也不適合使用箭頭函式，預設情況下，click回掉函式會繫結到觸發事件的元素上，

但因為是箭頭函式，箭頭函式不會繫結到觸發事件的元素上，此時this即為外層this，即this為window。

4.當需要使用arguments引數時,不能使用箭頭函式,因為箭頭函式沒有arguments，caller，callee

5.箭頭函式沒有原型屬性

ES6 箭頭函式

es6箭頭函式

es6 箭頭函式

ES6 箭頭函式

ES6 箭頭函式

es6箭頭函式

es6 箭頭函式

ES6 箭頭函式

相關推薦