关于this的指向问题

JS this指向详解

最新推荐文章于 2025-04-09 21:50:06 发布

weixin_30535913

最新推荐文章于 2025-04-09 21:50:06 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bestsamcn/p/5498048.html

本文通过一个实际案例探讨了JavaScript中this关键字的指向问题。作者在测试过程中意外发现即使错误地引用了DOM元素，代码仍能运行，从而引发了对this指向机制的深入分析。文章详细解释了不同浏览器环境下this的行为差异，并提供了多种调用方法的对比。

一个关于this指向而引发的血案。。。

在测试this指向的程序中，我写错了id对象，结果呢，居然也有效果，这真是超于我意料之外太多了，我以为自己写错了，结果一样可以用。。。。。。。

<div id="bbb">show</div>

<script>
	// window.onload = function(){
	// 	//
 //        var s = document.getElementById('bbb');
 //        s.onclick = showThis;//this == div#show	
 //        bbb.onclick = function(){
 //        	console.log(showThis);//返回的是定义showThis的内容
 //        	showThis();//this = window
 //        }	
 //        // showThis();//this = window
	// }
	// function showThis(){
	// 	console.log(this);
	// }
	window.onload = function(){
		//直接使用id的方式调用方法，ie7，8，9，10，11，都支持，只不过ie7都返回object，其他都是[object Window]，[object HTMLDivElement]bbb
        var s = document.getElementById('bbb');
        s.onclick = showThis;//this == div#show	
        bbb.onclick = function(){
        	showThis();//this = window
        	alert(this+'bbb')
        }	
        // showThis();//this = window
	}
	function showThis(){
		alert(this);
	}
</script>

做一点总结： window.onload = function(){

        //直接使用id的方式调用方法，ie7，8，9，10，11，都支持，只不过ie7都返回object，其他都是[object Window]，[object HTMLDivElement]bbb
        var s = document.getElementById('bbb');
        console.log(s[onclick])
        // s.onclick = showThis;//this == div#show
        s.onclick = showThis;//实际上是把showThis的内容赋值给s.onclick，在未赋值前，s[onclick]为undifined

        s.onclick = showThis();//实际上和showThis()一样，也没有返回值，这样的方式其实在onclick为赋值前，showThis已经执行了；
        s.onclick = function(){//也是赋值，但是因为showThis是在外面定义的，所以showThis的this还是window
        	showThis()
        }
        s.onclick = function(){//相当于s.onclick = showThis;也是赋值
        	alert(this)
        }
        // s.onclick = showThis();
        // bbb.onclick = function(){
        //     showThis();//this = window
        //     alert(this+'bbb')
        // }  
        // showThis();//this = window
    }
    function showThis(e){
        alert(this);
    }

转载于:https://www.cnblogs.com/bestsamcn/p/5498048.html