浅谈this的指向问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。
this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的
普通函数中的this指向：

1.在全局模式下，this的指向就是window
2.在函数作用域下

• 在非严格模式下， 如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window。
• 在严格模式下，如果有一个函数中有this，他也没有被上一级的对象所调用，那么this的指向就是undefined。
• 果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
• 如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

3.在对象中this的指向就是当前该对象。

改变this的方法

1.new关键字改变this指向

function Fn(){
    this.user = "粒子";
}
var a = new Fn();
console.log(a.user); //粒子

用变量a创建了一个Fn的实例（相当于复制了一份Fn到对象a里面），此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a，那么为什么对象a中会有user，因为你已经复制了一份Fn函数到对象a中，用了new关键字就等同于复制了一份
2.call（）

var a = {
    user:"粒子",
    fn:function(){
        console.log(this.user); //粒子
    }
}
var b = a.fn;
b.call(a);  //若不用call，则b()执行后this指的是Window对象

把b添加到第一个参数的环境中，简单来说，this就会指向那个对象。
call方法除了第一个参数以外还可以添加多个参数，如下：

var a = {
    user:"粒子",
    fn:function(e,ee){
        console.log(this.user); //粒子
        console.log(e+ee); //3
    }
}
var b = a.fn;
b.call(a,1,2);

3.apply（）
apply方法和call（）方法类似，它也可以添加多个参数，但是不同的就是apply的第二个参数他必须就是一个数组如下：

var a = {
    user:"小明",
    fn:function(e,ee){
        console.log(this.user); //小明
        console.log(e+ee); //11
    }
}
var b = a.fn;
b.apply(a,[10,1]);

4.bind()方法
bind（）方法他返回的就是一个被修改后的函数。

var a = {
    user:"小明",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() { [native code] }

同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。

var a = {
    user:"小明",
    fn:function(e,d,f){
        console.log(this.user); //小明
        console.log(e,d,f); //10 1 2
    }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

总结一下：call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加，这是它们的区别。

react里面的函数的this的指向问题

在JSX回调中你必须注意 this 的指向。 在 JavaScript 中，类方法默认没有 绑定 的。如果你忘记绑定 this.handleClick 并将其传递给onClick，那么在直接调用该函数时，this 会是 undefined 。
解决方法
1.使用箭头函数

 handleClick = () =>{
  	console.log(this)
  }
 <p><button onClick={this.handleClick}>改变count</button></p>

2.可以在构造函数里面进行this的绑定

   constuctor(){
        super()
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick(){
        console.log(this)
    }

    <p><button onClick={this.handleClick}>改变count</button></p>