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)

}

以上就是个人关于面向对象中的一些看法希望各位看官，多度指正 :>