Javascript中this指向

面试时候总会被问this的指向问题，之前未对其进行深入的研究，总会被问的一脸蒙蔽。
最近沉迷于考证，闲下来对this的指向进行相应的研究，使自己可以劳逸结合。

• 普通函数 this指向window 对应的箭头函数 this指向window

        function common(){
            console.log(this);    // window
        }
        common();

        var commonArrow = ()=>{
            console.log(this);   // window
        }
        commonArrow();

---

• 构造函数 this指向实例 对应的箭头函数 this会报typeError

        function Animal(name){
            this.name = name;
        }
        var constructor = new Animal('Lemon');
        console.log(constructor)

        const AnimalArrow = (name)=>{
            this.name = name;
        }
        var constructorArrow = new AnimalArrow('Demon');
        console.log(constructorArrow) //Uncaught TypeError: AnimalArrow is not a constructor

---

• 对象方法

  • 普通对象方法 this指向对象 对应的箭头函数 this指向window

    var name = "window";
    var obj = {
        name:"outer var",
        sayName : function(){
            return this.name;
        }
    }
    console.log(obj.sayName());  // outer var
    
    var name = "window";
    var objArrow = {
        name:"outer var",
        sayName : ()=>{
            return this.name;
        }
    }
    
    console.log(objArrow.sayName()); // window

  • 对象方法中内嵌闭包 this指向window 对应的箭头函数 this指向对象

    var name = "window";
    var obj = {
        name:"outer var",
        sayName : function(){
            console.log(this); // this指向对象
            var name = "inner var";
            return function(){
                console.log(this)  // 闭包 this指向全局对象window
                return this.name;
            }
        }
    }

    console.log(obj.sayName()())  // window

         注：改变this指向，call/apply或者外部函数定义变量指向当前对象

    var name = "window";
    var objArrow = {
        name:"outer var",
        sayName : function(){
            var name = "inner var";
            return ()=> this.name; // this 指向对象
        }
    }
    console.log(objArrow.sayName()()) // outer var 

         注：箭头函数本身无this，需沿着作用域链网上找，直至找到全局对象window。
         故而当前的父级函数也是箭头函数时，应继续往上找。

普通函数在函数运行时，this才会指向调用的对象，找不到宿主则是window;
箭头函数在定义时就明确了this的指向，this继承的是父级函数的this。