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 对象.

时间: 2024-10-16 13:07:28

JavaScript 中this与Dom中的注意的相关文章

javascript判断元素存在和判断元素存在于实时的dom中的方法

今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动页面,然后问题就出来了:页面无法向下滚动,调试工具的console里报了好多undefined的错误. 我马上意识到是我写的js代码错误的在首页被执行导致的问题,我的代码大致是这样: 1 if ($('#a')) { 2 // some code ... 3 $('#b').doSomething;

javascript中12种DOM节点类型概述

× 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model).它的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DO

javascript之解决dom中存在的空白节点问题

下面有一段html文档 <body> <h1>Introduction to the DOM</h1> <p class="test">There are a number of reasons why the DOM is awesome, here are some:</p> <ul> <li id="everywhere">It can be found everywhere.

javascript DOM中的节点层次和节点类型概述

针对JS高级程序设计这本书,主要是理解概念,大部分内容源自书内.写这个主要是当个书中的笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的代码. 另外这篇不包括DOM2,DOM3的内容 DOM 文档对象模型,针对HTML和XML文档的一个API.描绘了一个层次化的结点树,循序开发人员添加,移除修改页面上的一部分. 1节点层次 DOM把文档描绘成一个由多层节点构成的结构.节点有不同的类型.节点之间的关系构成了层次. 文档节点是每个

JavaScript - 简介、在HTMl中使用JavaScript、基本概念

1. JavaScript简介 JavaScript历史回顾 JavaScript是什么 JavaScript与ECMAScript的关系 JavaScript的不同版本 一言概之,略. 2. 在HTML中使用JavaScript 要把JavaScript放到网页中,就得涉及Web的核心语言 -- HTML.当初开发JavaScript的时候,要解决的一个重要问题就是让JavaScript与HTML页面共存,并且不影响页面在浏览器中的呈现效果.最终决定为Web增加统一的脚本支持. 2.1 <sc

DOM中的动态NodeList与静态NodeList

GitHub版本: https://github.com/cncounter/translation/blob/master/tiemao_2014/NodeList/NodeList.md 副标题: 为何getElementsByTagName()比querySelectorAll()快100倍 昨天,我在雅虎的同事 Scott Schiller (斯科特·席勒, 同时也是SoundManager创造者) 发Twitter询问为何getElementsByTagName("a") 在

HTML中常见的各种位置距离(clientTop clientLeft clientWidth ClientHeight offsetleft offsettop offsetwidth offsetheight等等)以及dom中的坐标讨论

最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的不好或者写错了,欢迎各位指正.好了废话不多说,开始进入主题. 这篇文章主要讨论两点: 一.DOM中各种宽度.高度 二.DOM中的坐标系 下面我们看看DOM中都有一些什么宽度.高度. 常见的 offsetWidth clientWidth scrollWidth offsetHeight client

深入理解react中的虚拟DOM、diff算法

文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   虽然React中的虚拟DOM很好用,但是这是一个无心插柳的结果.   React的核心思想:一个Component拯救世界,忘掉烦恼,从此不再操心界面. 1. Virtual Dom快,有两个前提 1.1 Javascript很快  Chrome刚出来的时候,在Chrome里跑Javascript非

DOM中的NodeList与HTMLCollection

最近在看<Javascript高级程序设计>的时候,看到了这样一句话:“理解NodeList和HTMLCollection,是从整体上透彻理解DOM的关键所在.”,所以觉得应该写一篇关于NodeList和HTMLCollection的博客来好好了解和总结下这方面的知识点. NodeList NodeList是一个节点的集合(既可以包含元素和其他节点),在DOM中,节点的类型总共有12种,通过判断节点的nodeType来判断节点的类型. 我们可以通过Node.childNodes和documen