JS this指向

      /*

        定义：

        ==>this 是一个使用在作用域内部的关键字

        ==>全局很少用，大部分是在函数内部使用

        指向：

        ==>全局使用：window

        ==>函数使用：**不管函数在哪定义，只看函数的调用(箭头函数除外)**

            ->普通调用(直接调用/全局调用)

                函数名()    :this->window

                function fn() {

                    console.log(this);

                }

                fn(); //普通调用

            ->对象调用

                xxx.函数名()    :this->点前面是谁就是谁

                var obj = {

                    //把fn的存储地址赋值给了obj的f成员

                    //obj.f和全局变量fn指向同一个函数空间

                    f: fn,

                    name: "对象",

                };

                obj.f(); //对象调用 this->obj

            ->定时器处理函数

                setTimeout(function(){},0)  :this->window

                setInterval(function (){},0)    :this->window

                    setTimeout(fn, 0); //定时器处理函数 this->window

                    setInterval(obj.f, 0); //定时器处理函数 this->window

            ->事件处理函数

                xxx.onclick=function(){}    :this->事件源(绑定在谁身上的事件)

                xxx.addEventListener('',function(){})   :this->事件源

                     var btn = document.querySelector("button");

                    //当点击按钮时，执行obj.f函数

                    btn.onclick = obj.f; //事件处理函数  this->事件源

            ->自执行函数

                (function(){})()    :this->window

        _________________________________________________________________________

                function fn() {

                        console.log(this);

                    }

                    fn(); //普通调用

                    var obj = {

                        //把fn的存储地址赋值给了obj的f成员

                        //obj.f和全局变量fn指向同一个函数空间

                        f: fn,

                        name: "对象",

                    };

                    obj.f(); //对象调用 this->obj

                    //把fn函数当作定时器处理函数使用

                    setTimeout(fn, 0); //定时器处理函数 this->window

                    //setInterval(obj.f, 0); //定时器处理函数 this->window

                    //获取

                    var btn = document.querySelector("button");

                    // /当点击按钮时，执行obj.f函数

                    // btn.onclick = obj.f; //事件处理函数  this->事件源

 

                        */

      /*

            强行改变this指向

            ==>this有自身的指向性

            ==>不管本身指向哪里，让其指向谁，就指向谁

            ==>三个方法

            **1、call()**

            ->使用方法，直接连接在函数名后面使用

            ->语法：

                    >fn.call()

                    >obj.fn.call()

            ->参数：

                    >第一个参数，就是函数内部的this指向

                    >第二个参数开始，依次给函数传递参数

            ->特点：

                    >会立即执行函数(不适合用作定时器处理函数或者事件处理函数)

             ->作用：伪数组借用数组方法

                    >Math.max()        

            **2、apply()**

             ->使用方法，直接连接在函数名后面使用

            ->语法：

                    >fn.apply()

                    >obj.fn.apply()

            ->参数：

                    >第一个参数，就是函数内部的this指向

                    >一个数组或者伪数组都行，里面的每一项依次给函数传递参数

            ->特点：

                    >会立即执行函数(不适合用作定时器处理函数或者事件处理函数)

            ->作用：可以以数组的形式给某些功能函数传参

                    >Math.max()

           **3、bind()**

            ->使用方法，直接连接在函数名后面使用

            ->语法：

                    >fn.bind()

                    >obj.fn.bind()

            ->参数：

                    >第一个参数，就是函数内部的this指向

                    >第二个函数开始，依次给函数传递参数

            ->特点：

                    >不会会立即执行函数

                    >会返回一个新的函数，一个已经被改变好this指向的函数

             ->作用：改变事件处理函数或者定时器处理函数的this指向

            */

      /*   function fn(a, b) {

        console.log(this);

        console.log(a);

        console.log(b);

      }

      var obj = {

        name: "对象",

      };

      fn(); //this->window

      //使用call方法调用fn函数，把函数内部的this指向改变成obj

      fn.call(obj, 100, 200); // this->obj

      fn.apply(obj, [1000, 2000]); // this->obj */

      /*

      **小例子**

      1、call()

       function f() {

        console.log(arguments);

        //伪数组用不了数组常用方法

        //报错:Uncaught ReferenceError: arguments is not defined

        //arguments.every()因为arguments没有every方法，所以报错

        /* var res = arguments.every(function (t) {

        return t >= 20;

        **步骤**

        //数组调用every方法

        //every里面的this指向前面的数组

        //利用call方法来执行数组的every()函数

        //call的第一个参数是every里面的this指向

        //原先erery的this指向数组的时候，遍历查看数组

        //现在的every的this指向arguments，遍历查看arguments

        //call的第二个参数是给函数传递参数

        //函数a就是传递给every方法里面的参数函数

        var res = [].every.call(arguments, function a(t) {

          return t >= 20;

        });

        console.log(res); //false

      });

       

      }

      f(10, 20, 30, 40, 50);

      */

      /*

     **小例子**

     2、apply()

     var arr = [100, 200, 300, 400, 300, 200];

      var res = Math.max.apply(null, arr);

      console.log(res);//400

     

     */

      /*

     **小例子**

    3、bind()

     var btn = document.querySelector("button");

      function handler(a, b) {

        console.log(this);

        console.log(a, b);

      }

      var obj = { name: "对象" };

      //call apply不合适，因为还没点击函数就执行了

      // btn.onclick = handler.call(obj);

      //btn.onclick = handler.apply(obj);

      //不会把handler函数执行，而是返回一个新的函数，一个已经锁死this指向的函数

      //var res = handler.bind(obj);

      //调用一个被bind锁死this指向的函数

      btn.onclick = handler.bind(obj, 100, 200);

     

     */