标签：
一、this详解：
1、函数内部另一个特殊对象是 this，其行为与 Java 和 C#中的 this 大致相似。
2、换句话说，this 引用的是函数据以执行操作的对象，或者说函数调用语句所处的那个作用域。
3、当在全局作用域中调用函数时，this 对象引用的就是 window（是一个对象，而且是js里面最大的对象，是最外围的对象）。
alert(window);//结果[object Window] 是object类型 alert(this);//结果[object Window] 是object类型 因为在window范围下 所以this就是window
window.color = ‘红色的‘; //全局的，或者 var color = ‘红色的‘;也行 alert(this.color); //打印全局的 color var box = { color : ‘蓝色的‘, //局部的 color sayColor : function () { alert(this.color); //此时的 this 只能 box 里的 color } }; box.sayColor(); alert(this.color); //还是全局的
window.color = ‘红色的‘; //全局的，或者 var color = ‘红色的‘;也行 function sayColor(){ alert(this.color); } sayColor(); //这里调用sayColor，其实还是在window范围下的 var box={ color:‘蓝色‘ } box.sayColor = sayColor; box.sayColor();//蓝色
二、this应用：
<script type="text/javascript"> window.onload = function(){ var aBtn = document.getElementsByTagName(‘input‘); var that = null; // 空 for(var i=0; i<aBtn.length; i++){ aBtn[i].onclick = function (){ this.style.background = ‘yellow‘; //这里this表示的是aBtn[i],而不是window } } } </script> <body> <input type="button" value="按钮1" /> <input type="button" value="按钮2" /> <input type="button" value="按钮3" /> </body>
<script type="text/javascript"> window.onload = function(){ var aBtn = document.getElementsByTagName(‘input‘); var that = null; // 空 for(var i=0; i<aBtn.length; i++){ aBtn[i].onclick = fn1; } function fn1(){ this.style.background = ‘yellow‘; //这里this同样表示的是aBtn[i] } } </script> <body> <input type="button" value="按钮1" /> <input type="button" value="按钮2" /> <input type="button" value="按钮3" /> </body>
<script type="text/javascript"> window.onload = function(){ var aBtn = document.getElementsByTagName(‘input‘); var that = null; // 空 for(var i=0; i<aBtn.length; i++){ aBtn[i].onclick = function (){ fn1(); //如果这样调用的话，fn1函数里面的this代表的是window } } function fn1(){ this.style.background = ‘yellow‘; //这里this同样表示的是aBtn[i] } } </script> <body> <input type="button" value="按钮1" /> <input type="button" value="按钮2" /> <input type="button" value="按钮3" /> </body>
<script type="text/javascript"> window.onload = function(){ var aBtn = document.getElementsByTagName(‘input‘); var that = null; // 空 for(var i=0; i<aBtn.length; i++){ aBtn[i].onclick = function (){ that = this; fn1(); //这里this就表示aBtn[i] } } function fn1(){ that.style.background = ‘yellow‘; //这里this同样表示的是aBtn[i] } } </script> <body> <input type="button" value="按钮1" /> <input type="button" value="按钮2" /> <input type="button" value="按钮3" /> </body>
</head> <script type="text/javascript"> window.onload = function (){ var aLi = document.getElementsByTagName(‘li‘); var that = null; for( var i=0; i<aLi.length; i++ ){ aLi[i].onmouseover = function (){ //this.getElementsByTagName(‘div‘)[0].style.display = ‘block‘; //这里this代表的是aLi[i] //如果这里要调用外部的方法，将this这个属性赋值给一个变量，然后调用这个函数，那么函数里的this就表示的是aLi[i]它了 that = this; fn1(); }; aLi[i].onmouseout = function (){ this.getElementsByTagName(‘div‘)[0].style.display = ‘none‘; }; } function fn1(){ that.getElementsByTagName(‘div‘)[0].style.display = ‘block‘; } }; </script> <style> li { width:100px; height:150px; float:left; margin-right:30px; background:#f1f1f1; position:relative; z-index:1; } div { width:80px; height:200px; background:red; position:absolute; top:75px; left:10px; display:none; } </style> <body> <ul> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> </ul> </body>
标签：
原文地址：http://www.cnblogs.com/LO-ME/p/4399072.html
