Javascript中的this

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript中的this相关的知识,希望对你有一定的参考价值。

下面列举一些简单的实例 总结一下this的一些用法:

 
1.方法中的this会指向当前执行该方法的对象 如:

var name = "window"

var Tom = {

  name:"Tom";

  show:function(){alert(this.name)}

}

Tom.show();   //Tom



2.方法中的this不会指向声明它的对象 如下

var Bob={
  name:"Bob",
  show:function(){alert(this.name);}
  };
 
var Tom={
  name:"Tom",
  show:Bob.show
  };

Tom.show() ;   //Tom

因为尽管alert(this.name)是在Bob对象环境中声明的


但该方法是由Tom对象调用执行所以this总是会指向当前执行的对象,而不是声明的对象

 

 

3.将方法复制给变量时,执行时仍然会以Tom对象区调用该方法

var name="window";
var Tom={
  name:"Tom".
  show:function(){alert(this.name)}
  };

var fun=Tom.show();
fun();              //Tom

可以看出赋值后再调用,并不影响调用其方法的对象

 



4.下面则是指明了调用函数的对象

var name="window";
var Tom={
  name:"Tom",
  show:function(){alert(this.name)},
  wait:function(){
             var that=this;
             that.show();
         }
  };

Tom.wait();  //Tom

这里that赋值了当前执行的对象,并让它继续调用show,

所以show方法中alert(this.name)自然而然的指向了Tom

可以把上面的 "that赋值对象 然后调用方法" 这个过程看做成执行对象

的延迟,就是让Tom加班的意思
 

 

 5.另一种 指明调用方法的对象 的办法 如下:

var name = "window";
var Bob= {
    name:"Bob",
    show:function(){alert(this.name);}
    };

 var Tom= {name: "Tom"};
 Bob.show();                   //Bob
 Bob.show.apply();             //window
 Bob.show.apply(Tom);          //Tom

 当然call()也差不多类似

 
 


6.下面来个特殊的例子

var name="window";
var Tom={
  name:"Tom",
  show:function(){alert(this.name)},
  wait:function(){
             var fun=this.show;
             fun();
         }
  };

Tom.wait();  //window

上面也是赋值方法后,再调用,可是执行的对象却改成了window对象


解释:

在函数体内把方法赋值给变量再调用会导致对象更改为Window对象

执行fun时,可以看做是一种方法调用的延迟行为,延迟调用方法会使得执行的对象

变为全局对象也就是window对象


下面我们来看看其他几种延迟方式,导致对象被更改为window的例子



7.匿名函数的延迟

var name="window";
var Tom={
  name:"Tom",
  show:function(){alert(this.name)},
  wait:function(){!function(call){call();}(this.show)}
  }

Tom.wait();    //Window




8.setTimeout、setInterval函数延迟
这里只以setTimeout为例子

var name="window";
var Tom={
  name:"Tom",
  show:function(){alert(this.name)},
  wait:function(){setTimeout(this.show,1000)}
  }
 
Tom.wait();    //window

 


9. 在延迟的环境下 尝试让Tom加班(对象也跟着延迟)

var name="window";
var Tom={  name:"Tom",
show:function(){alert(this.name)},
wait:function(){setTimeout(Tom.show,1000)}  }

Tom.wait();    //window  

 

上面中this对象改成了Tom,尝试让Tom加班,但是结果仍然为Window对象

因为Tom.show放在第一个参数里,延迟的执行使得执行的对象变为window对象

而不再是Tom对象,如何让执行对象Tom在延迟当不被变更呢?下面给你答案

 


 10.虽然延迟会导致方法的执行对象被更改为Window 但也有办法防止执行对象更改 如下

var name="window"
var  Tom ={  
    name : "Tom",  
    show : function(){alert(this.name);},  
    wait:  function(){
    var that=this;
    setTimeout(function(){that.show()},1000)}  
          }

Tom.wait();    //Tom 

如果不能理解上面的代码,你就当做Tom对象也跟着函数一起延迟就好了

而第9个例子没有成功延迟,是因为没有变量保存对象使得执行对象没有跟着延迟

 



11.eval函数的延迟

对于eval比较特殊

在eval环境下,执行的对象就是当前作用域的对象 如下

var name="window";
var Bob={
  name:"Bob",
  showName: function(){ eval("alert(this.name)"); }
  };

Bob.showName(); //Bob

 

 


 


12.eval函数的环境下,不会受到延迟而影响函数执行的对象

之所以eval特殊是因为eval不受延迟的影响

var name="window";
var that;
var Tom={
  name:"Tom",
  show:function(){alert(this.name)},
  wait:function(){that=this;setTimeout("that.show()",1000)}
  }
 
Tom.wait();    //Tom

 

也许你会觉得上面的代码没有eval函数的身影

其实setTimeout函数的第一个参数就是eval环境

他会指向当前执行作用域的执行对象,忽略延迟方法延迟调用

 



如果能把上面12个例子都理解了,那么this将成为你的一把有力的刀,挥舞在你爹代码中

当然如果不能理解,那么像闭包一样 尽量的少用!








































































以上是关于Javascript中的this的主要内容,如果未能解决你的问题,请参考以下文章

48个值得掌握的JavaScript代码片段(上)

JavaScript 代码片段

求教下面的javascript代码意思

无法解析片段中的 ViewModelProvider 构造?

在片段java类中使用“this”和getLastSignedInAccount时出现错误[重复]

你可能不知道的JavaScript代码片段和技巧(下)