关于javascript中的this 一段小实例深有体会啊

  先声明鄙人正在努力的把脚抬进门来,说的都是比较粗浅的知识,但都是我实践中得出的体会,很深刻。  正在自学中挣扎的DOG。

   先看段代码:

function highlightRows() {
    if(!document.getElementsByTagName) return false;
    var tables = document.getElementsByTagName("table");
    for(var i=0;i<tables.length;i++){
        var rows = tables[i].getElementsByTagName("tr");
        for(var j =0;j<rows.length;j++){
            rows[j].onmouseover=function(){
                //rows[j].style.fontWeight="bold"; //这样无效
                this.style.fontWeight="bold";
            }
            rows[j].onmouseout=function() {
                //rows[j].style.fontWeight="normal"; //这样无效
                this.style.fontWeight="normal";
            }
        }
     }
}   //效果是为了鼠标放上去的时候 字体变粗。

    说说我最开始的思维是怎么样的:就下面这段代码而言我以为上面的rows[j]和下面的row[j]  完全一样   j=0的时候就是指第一个tr  那么下面就是第一个tr实现

font-weight:bold;的效果了咯。打开网页什么都没有,还是和之前一模一样,查bug查半天也没有所以然,算了,照着书上把row[j]替换成this吧,再打开网页,

一放上去在就变粗了,但还是不明白为什么。so    书上做个标记:什么时候用this?this到底是什么? 说明我还是想知道为什么是this就可以(ps:之前了解了点点

this 指调用包含this这个函数的对象,白话就是:那个对象调用包含this的这个函数,那么this就指谁  或者说this是值调用他的对象)。

.................................................................................................................................................................................................

for(var j =0;j<rows.length;j++){
            rows[j].onmouseover=function(){
                //rows[j].style.fontWeight="bold"; //这样无效
                this.style.fontWeight="bold";
            }

    之后网上查了一通,但都没有解决我这个问题,虽然我从中get了很多新的知识,终有一天貌似看到了一样的疑问,看了下别人的评论,貌似也不是很懂错在哪里了,

也不知道为什么突然就觉得自己之前的理解是错误的,按着新的理解去走一遍,end 大呼自己好蠢,真的是蠢,不过也没办法,走进了那个坑里就不会那么轻易的爬出来。

  以下是新的理解:在代码执行到for循环的时候,for循环依次把这个循环体解析出来了。与此同时我们并没有去触发onmouseover事件,那么后面的rows[j]并没有变,j还是一个变量,相应的后面的rows[j] 并没有像我们所想的那么与前面相同。只有等我们触发onmouseover的时候这个函数才会触发,这个变量j才会去找他的值是多少。

如下;

rows[0].onmouseover=function(){
                rows[j].style.fontWeight="bold";
                
            }
            rows[0].onmouseout=function() {
               rows[j].style.fontWeight="normal";
               
            }
rows[1].onmouseover=function(){
                rows[j].style.fontWeight="bold";
                
            }
            rows[1].onmouseout=function() {
               rows[j].style.fontWeight="normal";
               
            }
.............//依次下去  假设tr有9个  那么执行到j=9的时候就不会执行了  此时在函数体中  j=9!

   看到现在应该知道j的值是9,由此可见不是与前面的rows[j]想对应。而且我们并没有rows[9]这个tr。而this很好的解决了我们的问题  他是指调用他的对象(简单的理解,虽不严谨),那么就是指tr。

       都是很基础的东西,但对像我这样当时迷惑了的同学肯定有所帮助。 当彻底搞明白了这个为什么之后,收获的却是很多很多。共勉!(如有错处,还望指正批评)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python小屋

计算机相关专业“Python程序设计”教学大纲(参考)

适用专业:计算机科学与技术、软件工程、网络工程、通信工程、数字媒体技术大数据应用技术及其他工科专业

904
来自专栏机器之心

Julia 1.0 正式发布,这是新出炉的一份简单中文教程

文章地址:https://zhuanlan.zhihu.com/p/41802723

1262
来自专栏進无尽的文章

面向对象设计中类的关系

所谓的设计正是采用恰当的方式组织类关。因此谈设计我认为首先要从类之间的关系开始说起.

1205

为什么你应该学习Julia

Julia是于2012年发布的一种函数式编程语言。它的创建者希望将Python的可读性和简单性与以C语言为代表的静态编译语言的速度相结合。

796
来自专栏美团技术团队

Android热更新方案Robust开源,新增自动化补丁工具

我们在之前的博客文章中介绍了高兼容性、高稳定性的实时热更新解决方案Robust之后,业内反响强烈,不断有读者咨询我们什么时候开源。今天我们非常高兴地宣布,Rob...

3665
来自专栏蓝天

代码规范:换行对齐问题

对一于单行代码过长时,采取换行,这个没有什么可争议的,主要焦点在新的一行从哪开始,通常有两派,一派就是如上述两段代码所示,另一派则采用如下规范:

602
来自专栏编程

Java 最困扰你的那些事

啊哈Reddit(某知名国外在线问答社区),没了你我们还能在哪里从鱼目混珠的网络中提炼真正的精华?就在这杂乱无章的论坛中,的的确确存在着这样一些精辟的讨论。 比...

1828
来自专栏小小挖掘机

数据城堡参赛代码实战篇(二)---使用pandas进行数据去重

小编们最近参加了数据城堡举办的“大学生助学金精准资助预测”比赛,分组第19名的成绩进入了复赛,很激动有木有!在上一篇文章中,小编带你使用pandas并结合官方给...

3328
来自专栏数说工作室

3. call PRXSUBSTR () | 庖丁解牛切割数据!

【SAS Says·扩展篇】庖丁解牛割数据! | 3. call PRXSUBSTR () 0. 前集回顾 1. 新的问题 2. 初识 PRXSUBSTR() ...

3385
来自专栏有趣的Python

算法与数据结构(六)并查集

并查集 Union Find 图相关算法的实现。 一种不一样的树形结构 连接问题 Connectivity Problem 可视化的来看连接问题: ? 连接问题...

2824

扫码关注云+社区