首页 > 代码库 > 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 是: <input type=‘button‘ id="testBtn" /> 这个对象。
第二种绑定事件的方式:
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 对象.
JavaScript 中this与Dom中的注意
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。