| [备忘]javascript的this真让人头疼~ | ||
上一篇:[备忘]tomcat的server.xml中，URIEncoding和useBodyEncodingForURI的区别 |
||
| 添加日期：2014/7/15 16:41:22 | 快速返回 返回列表 | 阅读2726次 |
java里this就是指当前这个对象，js里可TM不是哈~~ 先来个简单的： <body> <div id="xx">parent</div><br> <script> function hello(){ alert(document.getElementById("xx").innerHTML); alert(this==window); alert(this==top); alert(this==top.frames[0]); } </script> <input type="button" value="call self" onclick="hello()"> <iframe src="child.html" name="childFrame" width="400" height="400"> </body> <body> <div id="xx">child</div><br> <script> function hello(){ alert(document.getElementById("xx").innerHTML); alert(this==window); alert(this==top); alert(this==top.frames[0]); } </script> <input type="button" value="call parent" onclick="parent.hello();"> <input type="button" value="call self" onclick="hello()"> </body> 父窗口的按钮，输出：parent,true,true,false 子窗口的call parent，同上。 子窗口的call self，输出child,true,false,true 说明，在子窗口，调用parent.hello()时，是通知parent这个家伙去执行一下hello() 所以，hello中的this是parent这个家伙。 而不是我之前想的，是把parent中的hello方法拿过来，假装是子窗口的方法来执行， 那么this应该是子窗口的window了。 现实证明不是。 ============================================== 再复杂一点 <body> <div id="xx">parent</div><br> <script> window.name="a"; function hello(){ alert(window.name); alert(document.getElementById("xx").innerHTML); alert(this==window); alert(this==top); alert(this==top.frames[0]); } var hello2 = { x: 20, xx: function () { alert(window.name); alert(document.getElementById("xx").innerHTML); alert(this==window); alert(this==top); alert(this==top.frames[0]); alert(this==hello2); } }; </script> <input type="button" value="hello" onclick="hello()"> <input type="button" value="hello2" onclick="hello2.xx()"> <iframe src="child.html" name="childFrame" width="400" height="400"> </body> <body> <div id="xx">child</div><br> <script> window.name="b"; function hello(win){ alert(window.name); alert(document.getElementById("xx").innerHTML); alert(this==window); alert(this==top); alert(this==top.frames[0]); } </script> <input type="button" value="call parent hello" onclick="parent.hello();"> <input type="button" value="call parent hello2" onclick="parent.hello2.xx();"> <input type="button" value="call self" onclick="hello()"> </body> 父窗口的hello2，输出：a parent false false false true 子窗口的hello2，输出同上。 这时，那个function里的this是指function所属的hello2， Java程序员会想当然的，认为this是指function,TM的不是~~ 该死的JS~~ 结合上面的例子，是不是可以这样理解： xx.yy()，yy里面的this就是指向xx的，对吧？ 因为yy这个funciton是属于xx的。 先这么理解吧，受不了啦。 ======================================================== 再改改，把child的调用hello2的改下： <input type="button" value="call parent hello2" onclick="parent.hello2.xx.call(window);"> 那么： 父窗口的hello2，输出：a parent false false false true 子窗口的hello2，输出：a parent false false true false 我靠，发生了什么！！！！ call方法，第一个参数传递的就是this是谁， 这里把子窗口的window对象传过去了，所以在hello2里xx这个function里， this不是指向hello2了，而是指向子窗口的window对象了。 我靠，我靠，我靠！！！！ 注意，window.name仍然返回的a， document.getElementById("xx").innerHTML仍然返回的parent， 说明this变了，仍然不影响元素的取值， 以前一直认为，this就类似于上下文， this变成child，就应该在child的页面中查找， 可事实证明，不是这样的！！！！！ hello2定义在父窗口中，执行时，就TM在父窗口的页面中查找， 而不管是tm谁调用的，我靠，我靠，我靠！！！！ 完全颠覆了我以前的理解。 ============================================================ 下面是更变态的this，完全看不懂哈~~ 搞javascript的人纯粹是自找苦吃~~ http://www.cnblogs.com/TomXu/archive/2012/01/17/2310479.html |
||
| 评论 COMMENTS | |
| 没有评论 No Comments. |
