浅释js中this_JavaScript

浅释js中this

<!DOCTYPE html>
<html>
   <head></head>
   <body>
       <script type="text/javascript">
           /*
           * 对js this的探讨
           */


           //情况一隐式调用
           var a = 2;
           function _f1(){
               console.log(this.a)
           }
           _f1.a = 1;
           _f1();//这里是隐式调用真正调用_f1()函数的是window 因此在_f1中的this指向了全局




           function _f2(){
               this.a = 3;//这里的this指向全局因为是window调用
               setTimeout(function(){
                   console.log(this.a);
               },1000)
           }
           _f2()//输出3

           //那么我们如何才能使这个this能指回对应的函数或者对象呢？

           //方法一：直接在函数中使用该函数
           var a = 2;
           function _f1(){
               console.log(_f1.a)
           }
           _f1.a = 1;
           _f1();//输出1


           //方法二：使用call()或者apply() 将函数内部的this强制转给某个对象
           var a = 2;
           function _f1(){
               this.a = 4
               console.log(this.a)
           }
           _f1.call(_f1);//输出4
           _f1.bind(_f1)//输出4


           function _f3(a,b){
               console.log("a:"+a+"b:"+b);
           }

           _f3.apply(Object.create(null),[1,2]) //这里使用create来创建个空对象来占位

           //方法三:使用一个变量存储当前this 这样做的目的是让它成为局部全局变量可以让闭包直接调用
           function _f2(){
               var _this = this;
               setTimeout(function(){
                   console.log(_this.a);
               },1000)
           }

//           //也可以这样写
           function _f2(){
               setTimeout(function(){
                   console.log(this.a);
               }.bind(this),1000)
           }

           //当然我们还可以借助对象的方式
           function _f1(){
               console.log(this.a)
           }
           var a = 1;
           var obj = {
               a:2,
               fun:_f1
           }
           obj.fun()//输出2 这里其实完整是这样表示 window.obj.fun(); 但是这里的this指向了obj 谁调用就指向谁



           //方式四：使用箭头函数在箭头函数中this的指向是在谁的作用域创建的就指向谁
           var _f1 = () =>{
               this.a = 2;
               console.log(this.a)
           }



           总结:this的指向并不是简单的指向函数本身或者是对象本身,它的指向是根据执行的上下文关系来决定的在es5之前的规律是
           谁调用就指向谁(就近原则)

           箭头函数则是在谁的作用域创建的就指向谁
           由new调用的绑定到新创建的对象中
           由call或者apply或者是bind()调用的绑定到指定的对象
           默认情况如果是严格模式下报错,否则绑定到window全局
       </script>

   </body>
</html>