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     }

 

2、es6：

es6 如上情况this指向为window。

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

二、

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

 

posted @ 2019-05-05 22:16  evil_liu  阅读(6654)  评论(0)  编辑  收藏  举报