【js学习之路】事件绑定函数中，将this换成调用对象导致的问题

最新推荐文章于 2021-11-19 18:18:26 发布

Samuel__W

最新推荐文章于 2021-11-19 18:18:26 发布

阅读量1k

点赞数

分类专栏： javaScript 文章标签： javascript 事件绑定

本文链接：https://blog.csdn.net/Killpower/article/details/60869195

版权

javaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本人js初学，也想写一些博客记录我的js学习之路。
今天在写一个简单的事件绑定的时候发现将this换成调用对象的时候发生错误。
代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>AAA</title>
    <meta charset="UTF-8">
</head>
<body>
    <p>AAAA</p>
    <p>BBBB</p>
    <script type="application/javascript">
        var ps = document.getElementsByTagName("p");
        for (var i = 0; i < ps.length; i++) {
            ps[i].onclick = function () {
                ps[i].style.color = "red";
            }
        }
    </script>
</body>
</html>

这段代码中，将onclick事件绑定的函数中this换成了调用者ps[i]。执行代码，报错Uncaught TypeError: Cannot read property ‘style’ of undefined.
原因是：执行这段代码时，js首先会执行完整个循环，将函数绑定到相应的对象中，用户点击触发事件时，实际上变量i已经变为了2，ps[2]不存在，所以报错。for循环内用var定义的变量i是全局变量。

解决方法，可以使用ES6的新特性 let去定义变量i , 这样就不会报错了。

Samuel__W

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【js学习之路】事件绑定函数中，将this换成调用对象导致的问题

本人js初学，也想写一些博客记录我的js学习之路。今天在写一个简单的事件绑定的时候发现将this换成调用对象的时候发生错误。代码如下：<!DOCTYPE html><html><head> <title>AAA</title> <meta charset="UTF-8"></head><body> <p>AAAA</p> <p>BBBB</p>
复制链接

扫一扫