关于this指向及常用相关知识记录

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

目前先想到这里，如果有遇到其它问题，再过来记录，如有错误，还请指正，谢谢。

个人博客:
进击的程序茗