热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:JavaScript中this与Dom中的注意

篇首语:本文由编程笔记#小编为大家整理,主要介绍了JavaScript中this与Dom中的注意相关的知识,希望对你有一定的参考价值。对于下面这段代码:

篇首语:本文由编程笔记#小编为大家整理,主要介绍了Javascript 中this与Dom中的注意相关的知识,希望对你有一定的参考价值。


对于下面这段代码:


<script type=‘text/Javascript>
function testThis()
{
console.log(
this);
}
script>
<input type=‘button‘ id="testBtn" />

第一种绑定事件的方式:


document.getElementById(‘testBtn‘).addEventListener(‘click‘,testThis,false)

 这种绑定方式中的this 是:  这个对象。

第二种绑定事件的方式:


document.getElementById(‘testBtn‘).addEventListener(‘click‘,function(){testThis();},false)

这种绑定事件的方式中的 this是: window.

 

究其原因是 this 只与调用者的上下文有关.

在第一个例子中:是 testBtn来调用触发了 testThis 这个方法,此时this所处的上下文就是 testBtn这个对象.

在第二个离职中:是 testBtn来触发了一个匿名函数,匿名函数的调用者是window,此时this所处的上下文就是 window对象,相当匿名函数里面执行了 window.testThis()这个方法.

 

我们再改改,如下代码:


<script type=‘text/Javascript‘>
var test={
testThis:
function () {
console.log(
this);
}
}
script>

第一种绑定方式:


document.getElementById(‘testBtn‘).addEventListener(‘click‘,test.testThis, false)

第二种绑定方式:


document.getElementById(‘testBtn‘).addEventListener(‘click‘, function () { test.testThis() }, false)

此时的第一种绑定方式中 是 testBtn来调用触发了 test.testThis ( 就是调用了 test这个对象中的 testThis这个方法 ,而不是由 test这个对象来调用的) ,此时this所处的上下文就是 testBtn这个对象.

此时的第二种绑定方式中 是 testBtn来触发了一个匿名函数,匿名函数的调用者是window,然而函数里面调用 testThis这个方法是的 test 这个对象,而不是 window ,此时this所处的上下文就是 test 对象.

 


推荐阅读
author-avatar
郭怡如珮尧琼江
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有