this指向说明：
- 全局作用域或者普通函数中this指向全局对象window
- 方法调用中this指向调用该方法的对象
- 在构造函数或者构造函数原型对象中this指向构造函数的实例
this指向问题：
此前对于click，setTimeOut理解成了其回调函数中的this会指向window，但是这样的理解是不准确的，
- 如下第一种示例，onclick中this指向的是调用该方法的对象，输出的是dom元素，在aa函数中，aa函数可以被看做是window.aa，所以其中的this是指向了window。
document.getElementById('test').onclick=function(){
console.log(this);//this输出的是DOM元素
aa()
}
function aa(){
console.log(this)//this输出的是window对象
}
- 第二种示例如下，init方法被person调用，所以其中的this指向的是person，而click被body调用，所以其this指向的是body
let person = {
name:'jike',
init:function(){
console.log(this);//{name: "jike", init: ƒ}
document.body.onclick =function(){
console.log(this); //body元素
}
}
}
person.init();
通过这两个例子可以更加了解一下方法调用中this指向调用该方法的对象这句话
call、apply、bind
对于上面的第一种示例，我们并不希望this指向了全局window，所以我们要对aa函数进行更改其this指向的改变，由此提到了三个方法。call、apply、bind都是可以改变this的指向。
call、apply区别在于传递的第二个参数不同，apply接受数组。
call、apply与bind的区别在于call、apply为调用及立刻执行，而bind则不会立刻执行。把上面的代码改成如下方式,通过执行即可看出区别，bind要在调用后再去主动执行一次：
document.getElementById('test').onclick=function(){
console.log(this);//this输出的是DOM元素
aa.call(this)
aa.apply(this)
aa.bind(this)()
}
function aa(){
console.log(this)//this输出的是DOM元素
}
关于bind
提起bind我们就会提到兼容问题，在IE8中是并没有兼容bind函数的，那么对于bind函数的兼容性写法如下：
function bind(f,o){
if(f.bind){
return f.bind(o);
}else{
return f.apply(o)
}
}//该代码为权威指南上的代码，目前凭记忆写下的，我回去再查一下书，如果我写错了，那么我再回来改
关于箭头函数
对于上面的第二个示例问题，或者说在业务中用到的经常是第二个示例，我们希望body的onclick里面的this指向的是person，那么此时就可以用到箭头函数,代码更改如下：
let person = {
name:'jike',
init:function(){
console.log(this);
document.body.onclick = ()=>{//此处采用了箭头函数
console.log(this); //{name: "jike", init: ƒ}
}
}
}
person.init();
http://blog.getify.com/arrow-this/关于箭头函数对于this的作用，在这篇文章里提到了箭头函数并没有像bind一样改变this的指向，而是生来局部，完全不把 this 绑定到里面去，也就是去上一层去查找this
Tbc
目前先想到这里，如果有遇到其它问题，再过来记录，如有错误，还请指正，谢谢。
个人博客:
进击的程序茗
网友评论