js中的this问题
js中的this有点时候很迷，不同的时候this会指向不同的对象。
1.函数的this：通常情况是“谁调用指向谁”。比方说单独调用一个函数时，this指向的是全局对象，也就是window。在w3school中提到，在 HTML 事件处理程序中，this 指的是接收此事件的 HTML 元素：
<button onclick="this.style.display='none'">
点击来删除我！
</button>
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。
网友评论