箭頭函數(shù)中的this指向的是定義時(shí)的this唉俗,而不是執(zhí)行時(shí)的this
一兽赁、為什么要有箭頭函數(shù)
先看如下代碼;
const Person = {
'name': 'little bear',
'age': 18,
'sayHello': function () {
setInterval(function () {
console.log('我叫' + this.name + '我今年' + this.age + '歲!')
}, 1000)
}
}
Person.sayHello()
上面的代碼運(yùn)行會(huì)是上面結(jié)果呢谊路?
上例的輸出結(jié)果是我叫undefined耳璧,今年我undefined歲治筒。
這是因?yàn)閟etInterval執(zhí)行的時(shí)候,是在全局作用域下的羊赵,所有this指向的是全局window,而window上沒有name和age趟佃,所以當(dāng)然輸出的是undefined咯。
那么昧捷,我們?cè)趺匆鉀Q這個(gè)問題呢闲昭?
通常的寫法是緩存this,然后在setInterval中用緩存的this進(jìn)行操作,如下
const Person = {
'name': 'little bear',
'age': 18,
'sayHello': function () {
let self = this
setInterval(function () {
console.log('我叫' + self.name + '我今年' + self.age + '歲!')
}, 1000)
}
}
const sayHelloFun = Person.sayHello
sayHelloFun()
明明是寫在對(duì)象里面的方法靡挥,為什么還要使用緩存這個(gè)對(duì)象才能正確使用?
于是在es6的新特性里添加了箭頭函數(shù)序矩,它能很好的解決這個(gè)問題。
二 什么是箭頭函數(shù)
function(){
console.log('hello')
}
向上面的方法寫成箭頭函數(shù)后是這樣的:
()=> conosle.log('hello')
三芹血、和普通函數(shù)的區(qū)別
主要是兩方面的優(yōu)勢(shì):
①不綁定this,arguments
②更簡化的代碼語法贮泞。
3.1不綁定this
不綁定this的意思就是說:箭頭函數(shù)的this是在定義的時(shí)候就確定好的,以后不管怎樣調(diào)用箭頭函數(shù)幔烛,箭頭函數(shù)的this始終未定義的this
3.2不綁定arguments
箭頭函數(shù)還有一個(gè)比較有特點(diǎn)的地方就是其不綁定arguments,即如果你在箭頭函數(shù)中使用arguments參數(shù)不能得到想要的內(nèi)容啃擦。
四、什么時(shí)候不能使用箭頭函數(shù)
前面我們已經(jīng)看到了很多關(guān)于es6箭頭函數(shù)的好處饿悬,也看到了箭頭函數(shù)的一些不足令蛉。那么我們應(yīng)該在什么時(shí)候使用箭頭函數(shù),而什么時(shí)候最好不要使用呢?
1.作為對(duì)象的方法
最好不要在對(duì)象的方法中使用箭頭函數(shù)珠叔,這樣可能會(huì)導(dǎo)致一些問題的產(chǎn)生蝎宇。除非你很熟悉箭頭函數(shù)。
2.不能作為構(gòu)造函數(shù)
由于箭頭函數(shù)的this不綁定的特點(diǎn)祷安,所以不能使用箭頭函數(shù)作為構(gòu)造函數(shù)姥芥,實(shí)際上如果這樣做了,也會(huì)報(bào)錯(cuò)汇鞭。
3.定義原型方法
function Person (name){
this.name = name
}
Person.prototype.sayHello = () => {
console.log(this)
}
var p1 = new Person()
p1.sayHello()
//output
window對(duì)象
這里的this指向的是window對(duì)象凉唐,這點(diǎn)和在對(duì)象方法中定義有點(diǎn)像