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);//第一个参数为做用域 第二个是传递的参数值。多个以逗号隔开。