理解 JavaScript 的 this 关键字(代码)
2011-10-25 16:22
906 查看
里面的代码展示了各种情况下,this应该是什么值
<html> <head> <script type="text/javascript"> function callAsProperty(){ var a = { b: function(){ alert(this); utilityDisplay(this); return this; } } a.b();//b's this-->a a['b']();//b's this-->a var c = {}; c.d = a.b; c.d();//b's this-->c var foo = a.b; foo(); //b's this-->window. Call as variable } function callAsVariable1(){ var a = { b: function() { alert(this); utilityDisplay(this); return this; } }; var foo = a.b; a.b();//b's this-->a foo(); //b's this-->window var x = { y: function() { alert("Outer this: " + this); alert(this); utilityDisplay(this); var outerThis = this; var z = function() { alert(outerThis == this); alert(outerThis === this); alert("Inner this: " + this); alert(this); utilityDisplay(this); return this; }; return z(); } }; var marvinVar = x.y; x.y(); //y's this-->x; z's this-->window marvinVar();//y's this-->window; z's this-->window } function callAsVariable2(){ var a = { b: function() { alert("Outer this: " + this); alert(this); utilityDisplay(this); var outerThis = this; return ( function() { alert(outerThis == this); alert(outerThis === this); alert("Inner this: " + this); alert(this); utilityDisplay(this); return this; } )(); } }; var marvinVar = a.b; a.b(); //b's this-->a; anonymous's this-->window marvinVar();//b's this-->window; anonymous's this-->window } function callByCallAndApply(){ var a = { b: function() { alert(this); utilityDisplay(this); return this; } }; var d = {}; a.b.call(d); //d a.b.apply(d); //d } function callConstructorWithNew(){ var A = function() { alert("Before"); alert(this); utilityDisplay(this); this.marvinNewFunc = function(){return "I'm an A";}; alert("After"); alert(this); utilityDisplay(this); }; var aInstance = new A();//A's this-->a newly created object var callMarvinResult = aInstance.marvinNewFunc(); alert(callMarvinResult); } function utilityDisplay(myVar){ var cnt = 0; for(var tmp in myVar){ cnt++; } alert("Its properties count: " + cnt); if(cnt <= 5){ for(var tmp in myVar){ try { alert(tmp + "-->:" + myVar[tmp]); }catch ( ieError ) { alert(tmp + "-->: Get an error, hoho..."); } } } } </script> </head> <body> <form> <input type="button" id="invokeAProperty" value="Invoke a property" onclick="callAsProperty();"/><br/> <input type="button" id="invoke***ariable1" value="Invoke a variable 1" onclick="callAsVariable1();"><br/> <input type="button" id="invoke***ariable2" value="Invoke a variable 2" onclick="callAsVariable2();"><br/> <input type="button" id="invokeByCallAndApply" value="Invoke by call and apply" onclick="callByCallAndApply();"><br/> <input type="button" id="invokeConstructorWithNew" value="Invoke by constructor new" onclick="callConstructorWithNew();"> </form> </body> </html>
相关文章推荐
- 再也不用担心javascript的this---从代码去理解(第一篇)---深析this原理
- JavaScript中嵌套函数的this关键字的理解
- 关于javascript 中的this 关键字的用法demo小代码
- 深入理解Javascript之this关键字
- [置顶] [译文]深入理解JavaScript的this关键字(一)
- 深入理解Javascript之this关键字
- 再也不用担心javascript的this---从代码去理解(第三篇)--关于this的典型例子
- 深入理解Javascript之this关键字
- 理解 JavaScript 的 this 关键字
- JavaScript this 关键字 理解要领
- 再也不用担心javascript的this---从代码去理解(第二篇)---引用类型
- 深入理解Javascript之this关键字
- 深入理解Javascript之this关键字
- javascript--理解Javascript之this关键字
- javascript中的关键字this理解
- Javascript之this关键字的深入理解
- 理解 JavaScript 的 this 关键字
- 深入理解Javascript之this关键字
- 测试的一段小代码,关于javascript this 的一些理解
- Laruence谈:深入理解Javascript之this关键字