JavaScript中的this

JavaScript中的this 

javascript中的this是一个很有意思的东西，它指的是执行环境，而非申明环境；

具体的我们来看代码：

   var name="global";
   var obj={
       name:"obj",
       fun:function (){
         alert(name);   
       }
   };
   
   obj.fun(); //global

 

 //var name="global";
   var obj={
       name:"obj",
       fun:function (){
         alert(name);   
       }
   };
   
    obj.fun(); //null

再看一下：

 

   var name="global";
   var obj={
       name:"obj",
       fun:function (){
         alert(name);   
       }
   };
   var person={
        name:"person",
        showInfo:function (){
           obj.fun();     
        }
       };
   
   // 还是我们的global
   //所以，函数，在哪里申明的没多大关系，在哪里调用才是关键
   person.showInfo(); //尼玛嵌套这么咄咄函数结果还是global

那么，如果我们加上this会是怎样的结果呢？

   var name="global";
   var obj={
       name:"obj",
       fun:function (){
         alert(this.name); 
         //代表的是当前的执行环境，而非我们的申明环境;  
       }
   };
   
   obj.fun(); //obj 开森啦，看到了我们的额obj了

那么我们再进一步的改造呢?

  var name="global";
   var obj={
       name:"obj",
       fun:function (){
         alert(this.name);   
       }
   };
   
   var Info=obj.fun;
   Info(); //结果:global;

感叹，this好牛逼滴呀

我们再来改造一下地呀

   var name="global";
   var obj={
       name:"obj",
       fun:function (){
         alert(this.name);   
       }
   };
   var person={
        name:"person",
        showInfo:function (){
           obj.fun();     
        }
       };

  person.showInfo(); //结果obj

那么，如果我们再改造一下呢？

   var name="global";
   var obj={
       name:"obj",
       fun:function (){
         alert(this.name);   
       }
   };
   var person={
        name:"person",
        showInfo:obj.fun
       };

  person.showInfo(); //结果person

哈哈哈，是不是搞晕了，再仔细看！

记住：当函数体内有了this之后，函数在哪里申明并不重要，在哪里执行很重要，也就是函数执行的上下文（上下环境）

你以为就完了？ 没有我们再来看一个列子：

 

 

 

那么，函数之间的this又如何交换（改变呢？）？

到哪call，apply ，他们两个之间的唯一区别就是参数形式不同；

   var name="window";
   var someone={
       name:"bob",
       showName:function (){
         alert(this.name);   
       }
   }
   
   var obj={
      name:"tom"   
   }
  // someone.showName();
   someone.showName.apply(this); //强制的将this交给了我们的window滴呀
   someone.showName.apply(obj);  //强制的交给我们的obj这个对象滴呀

上面我们是以var xx={};方式俩实现的，下面我们以函数的方式来尝试一下地呀

 

   function Person(name){
       this.name=name;
       this.fun=function (){
          alert(this.name);   
       }
   }
    
   function tree(name){
         this.name=name;   
   }
   
   var p=new Person("yuanzhangliu");
   var t=new tree("tree");
   p.fun(); //结果：yuanzhangliu
   p.fun.apply(t); //把person fun中的this交给了我们的
   //聪明的的你，会发现，这个不是很像继承嘛，
   //t就相当于有了 fun这个方法滴呀;cool
   

我们再来看例子：