this指向
今天就和大家來探討一下在js面向?qū)ο笾械倪@個(gè)this的指向問題亚皂，
一般來講在函數(shù)中this的指向是當(dāng)前函數(shù)的擁有者就珠，也就是說當(dāng)前誰這個(gè)函數(shù)蛉威，那么這個(gè)this就指向誰.
例：這里有一按鈕 btn
<input type ="button" id ="btn">
document.getElementById('btn').onclick = function(){
? ? ? ?alert(this)//input
}
此時(shí)this是指向按鈕 btn
第一種情況：
在面向?qū)ο笾杏昧硕〞r(shí)器
這里有一個(gè)對(duì)象仿荆；
function fn(){
? ? this.a= 1;//fn中的一個(gè)屬性
}
fn.prototype.show = function(){
? ?alert(this.a)//fn原型鏈上的一個(gè)方法
}
var obj = new fn();//實(shí)例化的時(shí)候
obj.show();//執(zhí)行以下show()方法,彈出值為1
現(xiàn)在我們給這個(gè)對(duì)象加一個(gè)定時(shí)器看會(huì)怎么樣
function fn(){
this.a= 1;//fn中的一個(gè)屬性
? ? setInterval(this.show,1000)//定時(shí)器
}
fn.prototype.show = function(){
? ? alert(this.a)//fn原型鏈上的一個(gè)方法 彈出a的值
}
var obj = new fn();//實(shí)例化
這個(gè)時(shí)候函數(shù)在執(zhí)行的時(shí)候 彈出值為undefined
為什么那？
現(xiàn)在我們來看一下這個(gè)this 是指向誰的
function fn(){
? ? ?this.a= 1;//fn中的一個(gè)屬性
? ? ? setInterval(this.show,1000)//定時(shí)器 彈出值是window
}
fn.prototype.show = function(){
? ? ? alert(this)
}
var obj = new fn();//實(shí)例化
原因就是定時(shí)器調(diào)用的函數(shù)都是指向`window`,所以我們這里彈出的都是`undefined` 因?yàn)閣indow上沒有`show()`這個(gè)方法鲤桥；
現(xiàn)在原因找到了怎么解決那揍拆，其實(shí)很簡(jiǎn)單；
我們不要改變他的所屬關(guān)系就好茶凳，就像這樣：
function fn(){
? ? var _this = this //將我們?cè)瓉淼膖his賦給_this
? ? this.a= 1;//fn中的一個(gè)屬性
? ?//將原來的方法包一下目的就是不改變他們的所屬關(guān)系
? setInterval(function(){
? ? ? ?_this.show();
? ?},1000)//定時(shí)器
}
fn.prototype.show = function(){
? ? alert(this.a)//fn原型鏈上的一個(gè)方法? 彈出的就是：1
? ? //因?yàn)樯厦嫖覀円呀?jīng)將this賦給_this了,所以此時(shí)this的指向就不在是window了,而是指向了obj
}
var obj = new fn();//實(shí)例化
好~~第一種情況我們已經(jīng)接解決了嫂拴，下面我們來看第二種情況播揪，，筒狠，
第二種情況：
面向?qū)ο筇砑恿耸录模?/p>
例：這里有一個(gè)按鈕
<input id="btn" type="button" value="按鈕"/>
function fn(){
? ? ? this.a = 1;
? ? ? document.getElmentById('btn').onclick = this.show;
? ?//彈出值為undefined 此時(shí)的this指向是input猪狈，而input是沒有 ? ?show()方法，所以u(píng)ndefined
}
fn.prototype.show = function(){
? ? alert(this.a)
}
new fn()
怎么解決那辩恼？
方法和含有定時(shí)器的一樣都是在原來的方法外面在套一層 并未把this重新附一下值雇庙；
function fn(){
? ?var _this = this
? ?this.a = 1;
? ?document.getElmentById('btn').onclick = function(){
? ? ? ?_this.show();//彈出值為1
? ?}
}
fn.prototype.show = function(){
? ?alert(this.a)
}
new fn()
其實(shí)這兩種情況的解決方式都用到了閉包,
將函數(shù)外面的this給存一下，然后通過閉包傳遞this
function fn(){
? ? var _this = this //存一下this
? ? this.a= 1;
? ? setInterval(function(){
? ? ? ? _this.show();//里面調(diào)用 ?
?},1000)
}
以上就是個(gè)人關(guān)于面向?qū)ο笾械囊恍┛捶ㄏＭ魑豢垂僭舜欤喽戎刚?:>
