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,1,2,3,4);//第一个参数为作用域 第二个是传递的参数值。多个以逗号隔开。
    fn1.apply(document.body,[1,2,3,4]);//第一个参数为作用域，第二个参数为数组参数。
    var  newFn=fn1.bind(document.body,1,2);// 也是可以修改this指向，但是这个返回值是新的函数的副本，需要调用才能执行函数
    newFn();

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

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