這篇文章主要介紹“JavaScript箭頭函數(shù)的this怎么使用”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“JavaScript箭頭函數(shù)的this怎么使用”文章能幫助大家解決問(wèn)題。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序設(shè)計(jì)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了尼勒克免費(fèi)建站歡迎大家使用！
//構(gòu)造函數(shù)內(nèi)部使用箭頭函數(shù)
function Person(a) {
this.a = a
this.b = () => {
console.log(this.a)
}
}
new Person(10).b()//輸出10
//箭頭函數(shù)的this從外層繼承而來(lái)。本例箭頭函數(shù)中this等于箭頭函數(shù)外的this，正確。
//自定義類(lèi)時(shí)使用箭頭函數(shù)
var a="1"
class A {
constructor(a) {
this.a = a
}
getName = () => {
console.log(this)
}
}
new A("2").getName()//輸出2
//箭頭函數(shù)的this從外層繼承而來(lái)。我的理解是箭頭函數(shù)中this繼承了類(lèi)中的this，正確
//對(duì)象中使用構(gòu)造函數(shù)
var a = 1;
var obj = {
a: 2,
say1: () => {
console.log(this.a);
},
say2: function () {
console.log(this.a);
},
b: {
a: 3,
say5: ()=> {
console.log(this.a)
}
}
};
obj.say1(); //1
obj.say2(); //2
obj.b.say5() //1
let say3 = obj.say1;
let say4 = obj.say2;
say3(); //1
say4(); //1
//如果說(shuō)箭頭函數(shù)的this從外層繼承而來(lái)的話，那么這里say1中的this應(yīng)該是指向obj，但是結(jié)果是指向window，而且不管嵌套多少層對(duì)象，箭頭函數(shù)的this始終指向window（從say5輸出1可以看出）,say3之所以輸出1是因?yàn)閘et say3=obj.say1只是將函數(shù)賦值給say3，say3的擁有者是window，故this指向window。
總結(jié)：我覺(jué)得”箭頭函數(shù)的this從外層繼承而來(lái)“這句話不能將this的指向一言概之，還是要分情況討論，當(dāng)然，也有可能是我對(duì)這句話理解的還不夠透徹。
最后還有一個(gè)知識(shí)點(diǎn)：箭頭函數(shù)中的this指向的是定義時(shí)的this，而不是執(zhí)行時(shí)的this。
先來(lái)看普通函數(shù)，普通函數(shù)的this值會(huì)因調(diào)用該函數(shù)的對(duì)象發(fā)生改變而改變
var a=1
var obj = {
a:2,
say(){
setTimeout(
function(){console.log(this.a);},
1000
);
}
};
obj.say();//輸出1
//因?yàn)閟etTimeout是window對(duì)象的方法，當(dāng)延遲1s后執(zhí)行console.log(this.a)時(shí)，這時(shí)的this已經(jīng)由指向obj變成指向window，所以輸出1
//同樣的，apply,call,bind也能改變普通函數(shù)中this指向
var obj = {
a: 2,
say: function () {
console.log(this.a)
}
};
var obj2 = {
a: 3
}
obj.say()//輸出2
obj.say.call(obj2)//輸出3
obj.say.apply(obj2)//輸出3
var say2=obj.say.bind(obj2)
say2()//輸出3
對(duì)比之下，箭頭函數(shù)的this在函數(shù)定義時(shí)就已經(jīng)確定，不會(huì)改變(看下面例子)
var a = 1
var obj = {
a: 2,
say() {
setTimeout(
() => { console.log(this.a); },
1000
);
}
};
obj.say();//輸出2
var a = 1
var obj = {
a: 2,
say: ()=> {
console.log(this.a)//這里前面已經(jīng)講過(guò)了，this指向的是window
}
};
var obj2 = {
a: 3
}
obj.say()//輸出1
obj.say.call(obj2)//輸出1
obj.say.apply(obj2)//輸出1
var say2=obj.say.bind(obj2)
say2()//輸出1
關(guān)于“JavaScript箭頭函數(shù)的this怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
重慶分公司
重慶分公司
