理解JS中this的指向

this 指代当前对象，若在全局内使用，则指代当前页面window；若在函数中使用，则依据当前函数被调用的对象而定，可初步理解为“谁调用就是谁”。

一、this的指向在函数定义时是无法确定的，只有函数执行时才能确定this到底指向谁。

 1　　　function demo() {
            console.log(this.fruit);
    }
    // 定义全局变量，等同于window.fruit = "banana";
    var fruit = "banana";
    // 此时函数中的this指向window;
    demo();  //   "banana"
    
    var  obj = {
          fruit : "apple",
          demo : demo    
    };
    // 此时函数中的this指向obj
    obj.demo();  // "apple"

二、JS中函数也是对象，可定义属性

        function demo() {
             if(this === window){
                console.log("this is window");
               }   
        };
        // 函数也是对象，可以为对象定义属性，值为函数
        demo.bar = function(){
            if(this === demo){
                 console.log("this is demo");       
            }else if(this === window){
                    console.log("this is window");
                }
        };
        
        // 等价于 window.demo();
        demo();  // "this is window";
        // 函数中this指向调用函数的对象
        demo.bar();  // "this is demo";
        // 可以使用call改变函数中this指向
        demo.bar.call(window); // "this is window";

三、对象中嵌套函数的this指向不是当前对象，而是window

        var name = "window.name";
        var obj = {
            name : "obj.name",
            getName:function(){
            　　console.log(this.name);
            　　return function(){ //return 返回一个函数，
                  console.log(this.name); 
            } 
          }
        }
        obj.getName()();  // "obj.name"  "window.name"

obj.getName()执行后返回一个函数，这个返回函数再次执行是被window对象调用的，因此前者this指向obj对象，后者指向window对象。可通过三种方式改变此this指向。

1、使用函数的bind方法

        var name = "window.name";
        var obj = {
            name : "obj.name",
            getName:function(){
            　  console.log(this.name);
               return function(){
                   console.log(this.name);
             　}.bind(this);
          　}
        };
        obj.getName()();  //  "obj.name"  "obj.name"

2.使用变量接收上面的this，下面使用变量替代

        var name = "window.name";
        var that = null;
        var obj = {
            name : "obj.name",
            getName:function(){
                that = this;
                console.log(this.name);
                 return function(){
                    console.log(that.name);
                }
            }
        }
        obj.getName()();  //  "obj.name"    "obj.name"

3.使用ES6的箭头函数

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

四、全局函数apply和call可以用来改变this的指向

apply和call的唯一区别，就是在传参的时候，apply的参数需要放在一个数组里面，而call不需要。

        function demo(){
            console.log(this.fruit);
        }
        // 定义一个全局变量，等同于window.fruit = "banana";
        var fruit = "banana";

        var  obj = {
            fruit : "apple"
        };
        demo(); //相当于window.demo()和demo.apply(window);
        demo.apply(window);  // "banana";
        demo.call(obj);  // "apple";