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);//第一個參數為作用域 第二個是傳遞的參數值。多個以逗號隔開。