js 作用域问题

最新推荐文章于 2023-07-31 09:31:55 发布

xingyemeng1202

最新推荐文章于 2023-07-31 09:31:55 发布

阅读量347

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u013182438/article/details/70920626

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.js中的作用域问题

window.onload = function(){
	var box = document.getElementById('aa');
	box.onclick = function(){
		alert(this);     //返回[object HTMLDivElement],此时的this代表着box（因为是被box的事件绑定的）
		toBlue();        //当执行这一行时，this就代表着window了
		toBlue.call(this);  //所以在此处应该用call来使用box对象执行toBlue函数，
                                    //PS：这里面的this是指当前的匿名函数（就是被box.onclick绑定的），
                                    //   匿名函数的当前对象是box，这点可以从上面alert(this)中看出
	}
}
function toBlue(){
	this.className = 'pox';
	this.onclick = toRed;
}
function toRed(){
	this.className = 'box';
	this.onclick = toBlue;
}

顺便写上html代码（乱写的）：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>北京精时恒达</title>
	<link rel="stylesheet" href="./style.css">
        <style>
            .box{
    width:200px;
    height:200px;
    background:red;
    overflow:scroll;
    padding:10px;
    border:10px solid black;
    margin:10px;
}
.pox{
    width:200px;
    height:200px;
    background:blue;
    overflow:scroll;
    padding:10px;
    border:10px solid black;
    margin:10px;
}
        </style>
</head>
<body>
	<div class="box" id="aa">123aaaaaasdasdsadsadsadsadsadassssssssssssssssdasdasdasdasdasdddddddddddddd
	<div id="ee">444<div id="tt">555</div></div></div>
	<script src="js/common.js"></script>
</body>
</html>

xingyemeng1202

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 作用域问题

1.js中的作用域问题window.onload = function(){ var box = document.getElementById('aa'); box.onclick = function(){ alert(this); //返回[object HTMLDivElement],此时的this代表着box（因为是被box的事件绑定的） toBlue();
复制链接

扫一扫