js 函數的this指向

1、

一、es5：

　　函數裏的this指向分兩種，一種正常函數調用指向被調用的對象，好比：

1    test=()=>{
2         console.log(this)
3     };
4     test();//是當前window調用，因此this指向window。

 

　　在事件調用裏。this指向爲當前調用時間的dom元素。

1     //es5 this指向 調用時間的dom元素
2     btn.onclick=function () {
3         console.log(this)
4     }

 

二、es6：

es6 如上狀況this指向爲window。

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

2、

es5：

如何改變this指向呢？能夠使用call方法和apply方法以及bind方法，這2個方法效果一致，只是傳參類型不同。

1  
2      function  fn1() {
3          console.log(arguments);
4          console.log(this)
5      }
6     fn1.call(document.body,1,2,3,4);//第一個參數爲做用域 第二個是傳遞的參數值。多個以逗號隔開。
7     fn1.apply(document.body,[1,2,3,4]);//第一個參數爲做用域，第二個參數爲數組參數。
8     var  newFn=fn1.bind(document.body,1,2);// 也是能夠修改this指向，可是這個返回值是新的函數的副本，須要調用才能執行函數
9     newFn();

es6：不管是call方法仍是apply方法 bind方法都沒法改變this指向。

1   fn=(...x)=>{//擴張運算符 能夠將參數傳的數組 轉變成單個參數
2          console.log(x);//rest 語法 返回是一個數組
3          console.log(this)
4      };
5      fn.call(document.body,1,2);//第一個參數爲做用域 第二個是傳遞的參數值。多個以逗號隔開。