Javascript中的this
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.将对象赋值给变量后,再调用方法,执行的对象仍然是Tom
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将成为你的一把有力的刀,挥舞在你代码中
当然如果不能理解,那么像闭包一样 尽量的少用!