【js學習筆記十三】前端中的this指向問題
?
目錄
前言
導語
情況1 默認this指向
情況2 箭頭函數方式
注意
情況3 bind綁定
注意
情況4 new綁定 ?
注意
apply用法
call用法
注意
注意
情況5 對象.
注意
注意
情況6 直接調用
前言
我是歌謠 我有個兄弟 巔峰的時候排名c站總榜19 叫前端小歌謠 曾經我花了三年的時間創(chuàng)作了他 現在我要用五年的時間超越他 今天又是接近兄弟的一天人生難免坎坷 大不了從頭再來 歌謠的意志是永恒的 放棄很容易 但是堅持一定很酷
導語
大家好 我是歌謠 對于平時中的一些問題還是有必要自己總結 有時候自己不總結很難了解全部
情況1 默認this指向
console.log(this,"geyao") //window
直接在瀏覽器中 直接打印 找出this的指向是指向window
情況2 箭頭函數方式
?//箭頭函數
? geyao=()=>{ ? ? console.log(this,"geyao")//window
? } ? geyao();
箭頭函數的指向指向外層的this
注意
//箭頭函數
? geyao=()=>{ ? ? console.log(this,"geyao")//window
? } ?// ?geyao();
? //箭頭函數不能作為構造函數
? new geyao()
箭頭函數不能作為構造函數 報錯 Uncaught TypeError: geyao is not a constructor
情況3 bind綁定
//bind綁定
?function geyao() { ? ?console.log(this)//geyao
?}
?geyao.bind("geyao").bind("fangfang")()
bind綁定以第一次綁定為準
注意
// 箭頭函數
? geyao=()=>{ ? ? console.log(this,"geyao")//window
? }
? geyao.bind("geyao").bind("fangfang")()
箭頭函數中的this不會被修改
情況4 new綁定 ?
function geyao() { ? ?console.log(this,"geyao") //geyao{}
?} ?new geyao()
new 對象的this指向當前的geyao對象
注意
?//new優(yōu)先級大于bind
?function geyao() { ? ?console.log(this,"geyao") //geyao{}
?}
?fangfang= geyao.bind("fangfang") ?new fangfang();
new 的優(yōu)先級大于bind
apply用法
?//apply用法
?function geyao(a,b){ ?return a+b; ?
}function fangfang(a,b){ ?return a-b; ?
}console.log(geyao.apply(fangfang,[4,2])); //fangfang調用geyao的方法 6console.log(fangfang.apply(geyao,[4,2])); //geyao 調用fangfang的方法 2
call用法
?function geyao(a,b){ ?return a+b; ?
}function fangfang(a,b){ ?return a-b; ?
}//call用法var a1 = geyao.call(sub,4,2);//6
區(qū)別在于通過 apply 調用時實參是放到數組中的，而通過 call 調用時實參是逗號分隔的
注意
//箭頭函數的指向不會被apply改變geyao=()=>{ ? ? console.log(this,"geyao")//window
? }
? geyao.apply("fangfang")
箭頭函數的指向不會被apply影響
注意
function geyao(){ ? ? console.log(this,"geyao")//fangfang
? }
?fangfang= geyao.bind("fangfang")
?fangfang.apply("geyao")
bind中this不會被改變
情況5 對象.
function geyao() { ?console.log(this.fangfang) //fangfang}
obj = { fangfang: "fangfang" }
obj.geyao = geyao
obj.geyao()
注意
geyao=()=>{ ?console.log(this.fangfang) //window undefined}
obj = { fangfang: "fangfang" }
obj.geyao = geyao
obj.geyao()
箭頭函數的優(yōu)先級更高
注意
function geyao() { ?console.log(this) //fangfang}
obj = { fangfang: "fangfang" }
obj.geyao = geyao.bind("geyao")
obj.geyao()
bind的優(yōu)先級比對象.高
情況6 直接調用
function geyao() { ?console.log(this) //windows}geyao()
全局調用直接指向windows
