【JS】this.reset is not a function.

ZAYNMALlK

已于 2024-05-11 16:26:43 修改

阅读量336

点赞数 5

文章标签： javascript 前端开发语言

于 2024-05-11 16:25:13 首次发布

本文链接：https://blog.csdn.net/ZAYNMALlK/article/details/138720557

版权

今天在学习JS的时候遇到了这样一个问题，做个笔记记录一下。

问题 1：下面代码报错：this.reset is not a function.

const info = document.querySelector('.info')
info.addEventListener('submit', e => {
  e.preventDefault()
  // ...
  // 存储到数组后，清空表单
  this.reset()
})

答：this.reset() 在箭头函数中可能不会按预期工作，因为箭头函数不绑定自己的 this，所以需要改用普通函数function(){}或者直接使用 info.reset()。

问题 2：为什么箭头函数不绑定自己的 this ？箭头函数的实质是什么？

**答：**箭头函数不绑定自己的 this 是因为它们被设计为没有自己的 this，arguments，super 或 new.target。这些函数表达式更适用于那些不需要自己的 this 的函数。在箭头函数中，this 是词法绑定的，它使用的是定义箭头函数时的环境的 this。

箭头函数的实质是它是一个更简洁的函数语法，不绑定自己的 this。这使得它们特别适合非方法函数，并且它们不能用作构造函数。

问题 3：如果在箭头函数中使用 console.log(this) 打印 this ，控制台会显示什么？

答：在箭头函数中，this 是词法绑定的，也就是说，它使用的是定义箭头函数时的环境的 this。在你的代码中，箭头函数是在全局作用域中定义的，所以 this 应该指向全局对象。

如果代码在浏览器环境中运行，this 通常指向 window 对象。

如果在严格模式下运行，this 会是 undefined。

如果在 Node.js 环境中运行，this 会指向 global 对象。
this指向了window对象

问题 4：如何快速对表单进行验证是否有空数据？

答：用 querySelectorAll。

<body>
    <h1>新增学员</h1>
    <form class="info" autocomplete="off">
    姓名：<input type="text" class="uname" name="uname" />
    年龄：<input type="text" class="age" name="age" />
    性别:
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" name="salary" />
    就业城市：<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
    </select>
    <button class="add">录入</button>
    </form>
</body>

<script>
  const items = document.querySelectorAll('[name]')
  // 提交数据前检查表单是否有空数据
  for(let i = 0; i < items.length; i++){
    if (items[i].value === '') {
      return alert('数据不能为空！')
    }
  }
</script>