js中的this，箭头函数的this，以及call()和bind()

js中的this问题

js中的this有点时候很迷，不同的时候this会指向不同的对象。
1.函数的this：通常情况是“谁调用指向谁”。比方说单独调用一个函数时，this指向的是全局对象，也就是window。在w3school中提到，在 HTML 事件处理程序中，this 指的是接收此事件的 HTML 元素：

  点击来删除我！

2.对象方法中的this：this指向的是声明方法的那个对象。

var xm = {
    nm:'xiaoming',
    act:function(){
        console.log(this.nm)
    }
}

var nm = 'xiaogang'

xm.act();

这里控制台输出的是‘xiaoming’，尽管是在window中调用的。

怎么改变this指向呢？

箭头函数

ES6中的箭头函数可以解决对象方法中this指向原对象的问题，当方法被声明为箭头函数的时候，this将会指向调用者，而不是原对象：

var xm = {
    nm:'xiaoming',
    act:() => {console.log(this.nm)}
}

var nm = 'xiaogang'

xm.act();

这里控制台将会输出‘xiaogang’，因为调用者是window，所以输出的是window.nm即xiaogang。

call()/bind()

或者，使用js给的call()或者bind()方法。还有个apply()方法，但apply方法与call的唯一区别是给函数的参数的形式(call是将参数跟在第一个参数后面，而apply是放在数组里面)

call的使用规则是：
A对象.对象方法.call(B对象，可能存在的参数)
相当于B对象调用了A对象的方法，此时this将会指向B对象，也就是调用了这个方法的对象

var xm = {
    nm:'xiaoming',
    act:function(){
        console.log(this.nm)
    }
}

var xh = {
    nm:'xiaohong'
}

var nm = 'xiaogang'

xm.act.call(xh);

此时控制台输出的是‘xiaohong’，也就是说，是xh对象的nm属性被打印了出来
call函数的第一个参数就是this的指向对象，如果说想调用的方法需要传递参数，那么参数应该写在call方法的从第二个参数起。

bind的使用规则类似：
A对象.对象方法.bind(B对象，可能存在的参数)
但不同点在于，bind返回的是一个函数，也就是没有调用，如果需要调用的话需要在后面再加()

var xm = {
    nm:'xiaoming',
    act:function(){
        console.log(this.nm)
    }
}

var xh = {
    nm:'xiaohong'
}

var nm = 'xiaogang'

xm.act.bind(xh)();

同样，控制台输出‘xiaohong’。
bind也要在第二个参数开始写入调用方法需要的参数，或者也可以写在后面的括号中。我在学习过程中发现，他会优先使用bind中的参数，而不是后面括号的参数：

function pr(x){
    console.log(x);
}

pr.bind(window,1)(2);

这里的输出是1，如果bind中不写参数的话，就会使用后面括号中的参数也就是2。