一、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>
时间： 2024-07-28 21:31:49