优秀的程序员分享一些JavaScript中最常见的错误。前言:最近查看了一些项目,发现了几个最常见的JavaScript错误。我们将告诉您导致这些错误的原因以及如何防止它们发生。如果你能避免陷入这些“陷阱”,你就会成为更好的开发人员。JavaScript常见错误:为了便于阅读,我们尽可能简化了每个错误的描述。接下来,让我们深入了解每个错误,了解导致错误的原因以及如何避免错误。1.UncaughtTypeError:Cannotreadproperty如果你是一名JavaScript开发者,你可能会比你想象的更多地看到这个错误。当您读取属性或调用未定义对象的方法时,Chrome中会出现此错误。您可以在Chrome开发者控制台中轻松测试它。发生这种情况的原因有很多,但一个常见的原因是渲染UI组件时状态初始化不当。让我们看一个实际应用程序中发生的示例:我们选择React,但同样适用于Angular、Vue或任何其他框架。两个重要的流程:组件的状态(例如this.state)开始时是未定义的。异步取数据时,无论是在构造函数componentWillMount还是componentDidMount中取数据,组件都会在数据加载前至少渲染一次,而当Quiz第一次渲染时,this.state.items是undefined。这很容易修复。最简单的方法:在构造函数中初始化状态。您的应用程序中的确切代码可能不同,但我们希望我们已经为您提供了足够的线索来修复或避免您的应用程序中出现此问题。如果还没有,请继续阅读,因为我们将在下面介绍更多相关错误示例。2.TypeError:'undefined'isnotanobject这是在Safari中读取未定义对象的属性或调用方法时出现的错误。您可以在SafariDeveloperConsole中轻松测试它。这与第一点中提到的Chrome的错误基本相同,但Safari使用不同的错误消息。3.TypeError:nullisnotanobject这是在Safari中读取一个空对象的属性或调用一个方法时发生的错误。您可以在SafariDeveloperConsole中轻松测试它。有趣的是,在JavaScript中,null和undefined是不一样的,这就是为什么我们会看到两条不同的错误消息。undefined通常是尚未赋值的变量,null表示该值为空。要验证它们不相等,请尝试使用严格相等运算符===在我们的工作中,可能会发生此错误的一种情况是,如果您在加载元素之前尝试在JavaScript中使用该元素。因为DOMAPI为空对象引用返回null。任何执行和处理DOM元素的JS代码都应该在DOM元素创建之后执行。JS代码按照HTML中的规定从上到下进行解释。所以,如果DOM元素之前有标签,浏览器解析HTML页面的时候就会执行script标签里面的JS代码。如果在加载脚本之前尚未创建DOM元素,则会发生此错误。在此示例中,我们可以通过添加一个监听器来解决此问题,该监听器会在页面准备就绪时通知我们。一旦触发了addEventListener,init()方法就可以使用DOM元素。4.(unknown):Scripterror当未捕获的JavaScript错误(由window.onerrorhandlers引发的错误,而不是try-catch中捕获的错误)被浏览器的跨域策略限制时,此类脚本将产生错误。例如,如果您将JavaScript代码托管在CDN上,任何未捕获的错误将被报告为“脚本错误”,而不是包含有用的堆栈信息。这是一种浏览器安全措施,旨在防止数据跨域传递,否则将不允许通信。要获得真正的错误消息:设置“Access-Control-Allow-Origin”标头将Access-Control-Allow-Origin标头设置为*意味着可以从任何域正确访问该资源。在Nginx中设置如下:将add_header指令添加到提供JavaScript文件的位置块:在
