您的位置：首页 > Web前端 > JavaScript

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

2017-03-08 11:26 766 查看

本人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 , 这样就不会报错了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航