iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >JavaScript中几个最常见的错误
  • 824
分享到

JavaScript中几个最常见的错误

2024-04-02 19:04:59 824人浏览 安东尼
摘要

这篇文章主要介绍“javascript中几个最常见的错误”,在日常操作中,相信很多人在JavaScript中几个最常见的错误问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ja

这篇文章主要介绍“javascript中几个最常见的错误”,在日常操作中,相信很多人在JavaScript中几个最常见的错误问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript中几个最常见的错误”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

1、Uncaught TypeError: Cannot read property

如果你是一个 JavaScript 开发人员,可能你看到这个错误的次数比你想的要多。当你读取一个未定义的对象的属性或调用其方法时,这个错误会在 Chrome 中出现。 您可以很容易的在 Chrome 开发者控制台中进行测试

发生这种情况的原因很多,但常见的一种是在渲染 UI 组件时对于状态的初始化操作不当。

我们来看一个在真实应用程序中发生的例子:我们选择 React,但该情况也同样适用于 angularVue 或任何其他框架

两个重要的流程:

组件的状态(例如 this.state)开始于 undefined。

当异步获取数据时,不管它是在构造函数 componentWillMount 还是 componentDidMount 中获取的,组件在数据加载之前至少会呈现一次,当 Quiz 第一次呈现时, this.state.items 是 undefined。

这很容易解决。最简单的方法:在构造函数中初始化 state。

在你的应用程序中的具体代码可能是不同的,但我们希望我们已经给你足够的线索,以解决或避免在你的应用程序中出现的这个问题。如果还没有,请继续阅读,因为我们将在下面覆盖更多相关错误的示例。

2、 TypeError: ‘undefined' is not an object

这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。您可以在 Safari Developer Console 中轻松测试。这与第一点中提到的 Chrome 的错误基本相同,但 Safari 使用了不同的错误消息提示语。

3、 TypeError: null is not an object

这是在 Safari 中读取属性或调用空对象上的方法时发生的错误。 您可以在 Safari Developer Console 中轻松测试。

有趣的是,在 JavaScript 中, null 和 undefined 是并不同,这就是为什么我们看到的是两个不同的错误信息。

undefined 通常是一个尚未分配的变量,而 null 表示该值为空。 要验证它们不相等,请尝试使用严格的相等运算符 ===

在我们工作中,这种错误可能发生的一种场景是:如果在加载元素之前尝试在 JavaScript 中使用元素。 因为 DOM api 对于空白的对象引用返回值为 null。

任何执行和处理 DOM 元素的 js 代码都应该在创建 DOM 元素之后执行。

JS 代码按照 html 中的规定从上到下进行解释。 所以,如果 DOM 元素之前有一个标签,脚本标签内的 JS 代码将在浏览器解析 HTML 页面时执行。 如果在加载脚本之前尚未创建 DOM 元素,则会出现此错误。

在这个例子中,我们可以通过添加一个 Listener 来解决这个问题,这个事件侦查会在页面准备好的时候通知我们。 一旦 addEventListener 被触发, init() 方法就可以使用 DOM 元素。

4、 (unknown): Script error

当未捕获的 JavaScript 错误(通过 window.onerror 处理程序引发的错误,而不是捕获在 try-catch 中)被浏览器的跨域策略限制时,会产生这类的脚本错误。 例如,如果您将您的 JavaScript 代码托管在 CDN 上,则任何未被捕获的错误将被报告为“脚本错误” 而不是包含有用的堆栈信息。这是一种浏览器安全措施,旨在防止跨域传递数据,否则将不允许进行通信。

要获得真正的错误消息,请执行以下操作:

1. 设置 ‘Access-Control-Allow-Origin' 头部

将 Access-Control-Allow-Origin 标头设置为 * 表示可以从任何域正确访问资源。

Nginx 中设置如下:

将 add_header 指令添加到提供 JavaScript 文件的位置块中:

2. 在 <script> 中设置 crossorigin="anonymous"

在您的 HTML 代码中,对于您设置了 Access-Control-Allow-Origin 的每个脚本,在 script 标签上设置 crossorigin=“anonymous”。在脚本标记中添加 crossorigin 属性之前,请确保验证上述 header 正确发送。

在 Firefox 中,如果存在crossorigin属性,但Access-Control-Allow-Origin头不存在,则脚本将不会执行。

5、 TypeError: Object doesn't support property

这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。

这相当于 Chrome 中的 “TypeError:”undefined“isnotafunction” 错误。

是的,对于相同的逻辑错误,不同的浏览器可能具有不同的错误消息。

对于使用 JavaScript 命名空间的 WEB 应用程序,这是一个 IE 浏览器的常见的问题。 在这种情况下,99.9% 的原因是 IE 无法将当前名称空间内的方法绑定到 this 关键字。

  例如:如果你 JS 中有一个命名空间 Rollbar 以及方法 isAwesome。 通常,如果您在 Rollbar 命名空间内,则可以使用以下语法调用 isAwesome 方法:

1

this.isAwesome();

Chrome,Firefox 和 Opera 会欣然接受这个语法。 但是 IE 却不会。 因此,使用 JS 命名空间时最安全的选择是始终以实际名称空间作为前缀。

1

Rollbar.isAwesome();

到此,关于“JavaScript中几个最常见的错误”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: JavaScript中几个最常见的错误

本文链接: https://www.lsjlt.com/news/80633.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript中几个最常见的错误
    这篇文章主要介绍“JavaScript中几个最常见的错误”,在日常操作中,相信很多人在JavaScript中几个最常见的错误问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ja...
    99+
    2024-04-02
  • 探讨Golang中最常见的错误
    Golang是一门人气十分旺盛的编程语言,在网站开发、网络服务、云架构等领域中应用广泛。然而,就像其他任何编程语言一样,使用Golang进行开发时经常会遇到许多问题和错误。在本文中,我们将探讨Golang中最常见的错误,以及如何识别和解决它...
    99+
    2023-05-14
  • JavaScript中常见的错误有哪些
    这篇文章主要讲解了“JavaScript中常见的错误有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中常见的错误有哪些”吧!Java...
    99+
    2024-04-02
  • Golang中最常见的错误是什么
    这篇文章主要介绍“Golang中最常见的错误是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Golang中最常见的错误是什么”文章能帮助大家解决问题。一、类型错误类型错误是Golang中最常见的...
    99+
    2023-07-05
  • PHP常见的10个错误
    PHP作为一种流行的脚本编程语言,已经被广泛应用于Web开发领域。但是在使用PHP开发项目时,如果不注意一些常见的错误,就会导致代码出现各种问题,甚至影响运行效率和稳定性。本文将提及PHP常见的10个错误,希望对广大开发者有所帮助。1.未定...
    99+
    2023-05-23
    PHP语法错误 变量未定义 数组越界异常
  • JavaScript常见的五个内存错误是什么
    这篇文章主要介绍“JavaScript常见的五个内存错误是什么”,在日常操作中,相信很多人在JavaScript常见的五个内存错误是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript常见的...
    99+
    2023-06-26
  • JavaScript错误处理的常见错误和陷阱
    在JavaScript开发中,错误处理是很重要的一个环节,错误处理一般通过try…catch语句来实现。try语句块中放置要执行的代码,catch语句块中放置要处理的异常。当try语句块中出现异常时,JavaScript引擎会自动执行ca...
    99+
    2024-02-27
    JavaScript 错误处理 try catch 异常
  • 租用服务器常见的几个误区
    租用服务器常见的误区有:1、自己构建比租用服务器划算;2、租用的服务器所拥有的数据管理权不在用户自己手上;3、云服务器要比租用服务器更加靠谱。具体内容如下:服务器租用不如自建机房划算租用服务器是一种投资,收益取决于您选择的供应商提供的服务优...
    99+
    2024-04-02
  • golang函数最佳实践中的常见错误
    go 函数最佳实践中的常见错误:过度使用全局变量使用裸 return忽略错误处理函数过长缺乏文档注释 Go 函数最佳实践中的常见错误 在 Go 中编写函数时,遵循最佳实践至关重要,以确...
    99+
    2024-05-01
    golang 最佳实践
  • JavaScript常见的错误处理方法
    这篇文章主要介绍“JavaScript常见的错误处理方法”,在日常操作中,相信很多人在JavaScript常见的错误处理方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Ja...
    99+
    2024-04-02
  • 讲解一些常见的JavaScript错误
    JavaScript是前端开发中不可或缺的一部分,它为网页提供了动态效果和交互性。但是,在开发的过程中难免会出现JavaScript错误,这些错误会引发各种问题,影响网站的正常运行。本文将从以下几个方面来讲解一些常见的JavaScript错...
    99+
    2023-05-14
  • 怎么避免erp实现中的几大常见错误
    怎么避免erp实现中的几大常见错误,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一、不仔细收集需求 咨询公司云技术合作伙伴(Cloud Technology Part...
    99+
    2023-06-03
  • JavaScript 对象的陷阱:避免常见错误和最佳实践
    1. 引用原始值 对象属性可以引用原始值,如字符串、数字和布尔值。 对原始值进行修改不会修改对象本身,因为它们是不可变的。 解决方案:使用 getter 和 setter 函数来封装原始值,以便对其进行修改。 2. 重复的属性 对象...
    99+
    2024-03-13
    常见的陷阱
  • 常见的JavaScript内存错误有哪些
    本文小编为大家详细介绍“常见的JavaScript内存错误有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“常见的JavaScript内存错误有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,...
    99+
    2024-04-02
  • PHP 函数常见错误的最佳实践
    编写 php 函数时常见的错误包括:未定义参数、返回不存在的变量、意外修改全局变量、使用不可变参数以及缺少类型转换。最佳实践解决方案包括为参数指定默认值,确保变量在返回前已初始化,明确传...
    99+
    2024-04-12
    php 错误处理
  • JavaScript开发中常见错误解决是怎样的
    JavaScript开发中常见错误解决是怎样的,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。身为一名前端打工人,当然是经验越多,在排查错误...
    99+
    2024-04-02
  • 避免的常见JavaScript错误的9个编码都有哪些
    这篇文章给大家介绍避免的常见JavaScript错误的9个编码都有哪些,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。有一些非常常见的编程错误是我们要避免的,以保持代码的干净和可读性。一...
    99+
    2024-04-02
  • JavaScript中常见的几种继承方式
    目录原型继承内存图分析盗用构造函数继承分析组合继承原型链继承寄生式继承寄生组合式继承原型继承 function Parent(name) { this.name = name }...
    99+
    2024-04-02
  • PHP最常遇到几个错误以及它们的解决方法
    这篇文章主要讲解了“PHP最常遇到几个错误以及它们的解决方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“PHP最常遇到几个错误以及它们的解决方法”吧!错误一:Parse error: sy...
    99+
    2023-06-02
  • 常见的JavaScript内存错误怎么解决
    这篇文章主要介绍“常见的JavaScript内存错误怎么解决”,在日常操作中,相信很多人在常见的JavaScript内存错误怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”常见的JavaScript内存...
    99+
    2023-06-22
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作