this指向
今天就和大家来探讨一下在js面向对象中的这个this的指向问题,
一般来讲在函数中this的指向是当前函数的拥有者,也就是说当前谁这个函数,那么这个this就指向谁.
例:这里有一按钮 btn
<input type ="button" id ="btn">
document.getElementById('btn').onclick = function(){
alert(this)//input
}
此时this是指向按钮 btn
第一种情况:
在面向对象中用了定时器
这里有一个对象;
function fn(){
this.a= 1;//fn中的一个属性
}
fn.prototype.show = function(){
alert(this.a)//fn原型链上的一个方法
}
var obj = new fn();//实例化的时候
obj.show();//执行以下show()方法,弹出值为1
现在我们给这个对象加一个定时器看会怎么样
function fn(){
this.a= 1;//fn中的一个属性
setInterval(this.show,1000)//定时器
}
fn.prototype.show = function(){
alert(this.a)//fn原型链上的一个方法 弹出a的值
}
var obj = new fn();//实例化
这个时候函数在执行的时候 弹出值为undefined
为什么那?
现在我们来看一下这个this 是指向谁的
function fn(){
this.a= 1;//fn中的一个属性
setInterval(this.show,1000)//定时器 弹出值是window
}
fn.prototype.show = function(){
alert(this)
}
var obj = new fn();//实例化
原因就是定时器调用的函数都是指向`window`,所以我们这里弹出的都是`undefined` 因为window上没有`show()`这个方法;
现在原因找到了怎么解决那,其实很简单;
我们不要改变他的所属关系就好,就像这样:
function fn(){
var _this = this //将我们原来的this赋给_this
this.a= 1;//fn中的一个属性
//将原来的方法包一下目的就是不改变他们的所属关系
setInterval(function(){
_this.show();
},1000)//定时器
}
fn.prototype.show = function(){
alert(this.a)//fn原型链上的一个方法 弹出的就是:1
//因为上面我们已经将this赋给_this了,所以此时this的指向就不在是window了,而是指向了obj
}
var obj = new fn();//实例化
好~~第一种情况我们已经接解决了,下面我们来看第二种情况,,,
第二种情况:
面向对象添加了事件的,
例:这里有一个按钮
<input id="btn" type="button" value="按钮"/>
function fn(){
this.a = 1;
document.getElmentById('btn').onclick = this.show;
//弹出值为undefined 此时的this指向是input,而input是没有 show()方法,所以undefined
}
fn.prototype.show = function(){
alert(this.a)
}
new fn()
怎么解决那?
方法和含有定时器的一样都是在原来的方法外面在套一层 并未把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()
其实这两种情况的解决方式都用到了闭包,
将函数外面的this给存一下,然后通过闭包传递this
function fn(){
var _this = this //存一下this
this.a= 1;
setInterval(function(){
_this.show();//里面调用
},1000)
}
以上就是个人关于面向对象中的一些看法希望各位看官,多度指正 :>