js 函数的this指向

一、

1、es5：

　　函数里的this指向分两种，一种正常函数调用指向被调用的对象，比如：

    test=()=>{
         console.log(this)
     };
     test();//是当前window调用，所以this指向window。

　　在事件调用里。this指向为当前调用时间的dom元素。

     //es5 this指向 调用时间的dom元素
     btn.onclick=function () {
         console.log(this)
     }

2、es6：

es6 如上情况this指向为window。

     let btn=document.querySelector('.btn');
     //es6 this指向是window
     btn.addEventListener('click',(e)=>{
         console.log(this);
     });

二、

es5：

如何改变this指向呢？可以使用call方法和apply方法以及bind方法，这2个方法效果一致，只是传参类型不一样。

      function  fn1() {
          console.log(arguments);
          console.log(this)
      }
     fn1.call(document.body,,,,);//第一个参数为作用域 第二个是传递的参数值。多个以逗号隔开。
     fn1.apply(document.body,[,,,]);//第一个参数为作用域，第二个参数为数组参数。
     var  newFn=fn1.bind(document.body,,);// 也是可以修改this指向，但是这个返回值是新的函数的副本，需要调用才能执行函数
     newFn();

es6：无论是call方法还是apply方法 bind方法都无法改变this指向。

   fn=(...x)=>{//扩张运算符 可以将参数传的数组 转变成单个参数
          console.log(x);//rest 语法 返回是一个数组
          console.log(this)
      };
      fn.call(document.body,,);//第一个参数为作用域 第二个是传递的参数值。多个以逗号隔开。