js中this的用法及应用

最新推荐文章于 2022-01-29 17:29:26 发布

miyacnn

最新推荐文章于 2022-01-29 17:29:26 发布

阅读量131

点赞数

分类专栏： JavaScript web前端技术文章标签： js this window ViewUI

web前端技术同时被 2 个专栏收录

58 篇文章 0 订阅

订阅专栏

JavaScript

53 篇文章 0 订阅

订阅专栏

1,我们先看看this是个什么东西

那么，我们就直接：alert(this);看看这个this指的是什么东西

<script type="text/javascript">
	alert(this);//object window,window 是js老大
	//window.alert(this);	
</script>

这个时候就知道this是object window 。alert(1);是window.alert(1);的简写。所以alert(1);这里前面有个默认的window所以这里的this指向的是object window.

在举个例子

<script type="text/javascript">
	function fn1(){
		alert(this);
	}
	window.fn1();
	//fn1();
</script>

在函数里面的this也指的是window。

这个时候我们就可以理解this：指的是调用当前方法（函数）的那个对象

函数的执行有 fn1();还有点击等事件的时候让函数执行

如：

<input type="button" id="btn1" value="button" />
<script>
	var oBtn = document.getElementById("btn1");
	oBtn.onclick = fn1;//这个函数静静的躺在那里，谁让函数动了，弹出来的就是谁。
</script>

this对当前看的特别重要。

<input type="button" id="btn1" value="button" />
	<!--alert(this)指的是button，fn1()；指的是window-->
<script>

function fn1(){
    alert(this);
}
	var oBtn = document.getElementById("btn1");
		
	oBtn.onclick = function(){
		//alert(this);//这里的this指的就是button按钮本身
		fn1();//这样的话，前面有个老大哥window这种调用方式就是window。
}
</script>

还有一种情况是在元素上直接加事件或者函数，这种情况现在已经是不推荐使用的，但是我们介绍下主要了解this的指向：

如：

<input type="button" id="btn2" οnclick="alert(this);" value="button2" />

所以这个里面this是指button

<input type="button" id="btn2" οnclick="fn1();" value="button2" />
//fn1()就是上面的一个函数

所以这个里面的this指的是window

这个时候我们总结一下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>

// this	: 这个
// this： 指的是调用 当前 方法（函数）的那个对象

function fn1(){
	// this
}
// fn1();			this => window
// oDiv.onclick = fn1;			this => oDiv
/*
oDiv.onclick = function (){
	fn1();					fn1() 里的this => window
};

<div οnclick="    this     fn1();      "></div>     fn1(); 里的 this 指的是 window
*/


// alert( this );		// object window

// window 是 JS “老大”
// window.alert( this );

function fn1(){
	alert( this );				// window
}
// fn1();
// window.fn1();
</script>

</head>

<body>

<input id="btn1" type="button" value="按钮" />

<input id="btn2" type="button" οnclick=" fn1(); " value="按钮2" />

<script>
var oBtn = document.getElementById('btn1');
// oBtn.onclick = fn1;
oBtn.onclick = function (){
	// this
	fn1();
};
</script>

</body>
</html>

很清楚吧。

下面就举一个简单的js中this应用的小例子

就是鼠标放上去显示小提示

简陋的代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<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>
<script>
window.onload = function (){
	var aLi  = document.getElementsByTagName('li');
	var that = null;
	
	for( var i=0; i<aLi.length; i++ ){
		aLi[i].onmouseover = function (){
			that = this;
			fn1();
		};
		aLi[i].onmouseout = function (){
			this.getElementsByTagName('div')[0].style.display = 'none';
		};
	}
	
	function fn1(){
		that.getElementsByTagName('div')[0].style.display = 'block';
	}
};
</script>
</head>

<body>

<ul>
	<li>
  	<div></div>
  </li>
	<li>
  	<div></div>
  </li>
	<li>
  	<div></div>
  </li>
</ul>

</body>
</html>

miyacnn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中this的用法及应用

1,我们先看看this是个什么东西那么，我们就直接：alert(this);看看这个this指的是什么东西 &lt;script type="text/javascript"&gt; alert(this);//object window,window 是js老大 //window.alert(this); &lt;/script&gt; 这个时候就知道thi...
复制链接

扫一扫