10大常见JavaScript代码错误浅析,看你遇到几个?

jk 1年前 ⋅ 6118 阅读

源于:今日头条(查看原文)

前言

如今,javascript是一门非常火的语言,尤其是作为前端开发,你必须对它了如指掌。我们在开发调试的时候,它也经常会报错,下面我们就来具体看看常见的10个错误。

10大常见JavaScript代码错误浅析,看你遇到几个?

Uncaught TypeError: Cannot read property

如果你是一名 JavaScript 开发者,对这个错误可能已经熟视无睹。在 Chrome 里读取未定义对象的属性或调用未定义对象的方法时就会发生这个错误,在 Chrome 开发者控制台可以很容易地重现这个错误。

10大常见JavaScript代码错误浅析,看你遇到几个?

发生这个错误的原因有很多,其中最为常见的是,在渲染 UI 组件时没有正确初始化状态。

TypeError: ’undefined’ is not an object

在 Safari 里读取未定义对象的属性或调用未定义对象的方法时就会发生这个错误,在 Safari 开发者控制台可以很容易地重现这个错误。这个错误与发生在 Chrome 里的是差不多的,只是 Safari 为它提供了不同的错误信息。

10大常见JavaScript代码错误浅析,看你遇到几个?

TypeError: null is not an object

在 Safari 里读取空(null)对象的属性或调用空对象的方法时就会发生这个错误,在 Safari 开发者控制台可以很容易地重现这个错误。

10大常见JavaScript代码错误浅析,看你遇到几个?

在实际应用当中,在 JavaScript 里调用一个未加载的 DOM 元素就会出现这个错误。如果对象为空,DOM API 就会返回 null。

DOM 元素需要在创建之后才能被访问。JavaScript 代码是按照从上到下的顺序进行解析的,所以,如果在 DOM 元素之前有一个标签包含了 JavaScript 代码,浏览器在解析 HTML 时就会执行这些代码。在加载 JavaScript 之前,如果 DOM 元素没有被创建,就会出现这个错误。

(unknown): Script error

跨域的未捕捉 JavaScript 异常会变成 Script error。例如,假设 JavaScript 托管在 CDN 上,那么未捕捉的错误(错误没有在 try-catch 里被捕获,一路直上到了 window.onerror 里)就会显示成“Script error”,而不是显示具体的错误消息。这是浏览器出于安全方面的考虑,防止跨域传递数据。

TypeError: Object doesn’t support property

在 IE 里读取未定义对象的属性或调用未定义对象的方法时就会发生这个错误,在 IE 开发者控制台可以很容易地重现这个错误。

10大常见JavaScript代码错误浅析,看你遇到几个?

这个错误与 Chrome 里的“TypeError: ‘undefined’ is not a function”是同一个东西。不同的浏览器为相同的错误提供的错误消息可能是不一样的。

在 IE 里使用 JavaScript 的命名空间时,就很容易碰到这个错误。发生这个错误十有八九是因为 IE 无法将当前命名空间里的方法绑定到 this 关键字上。例如,假设有个命名空间 Rollbar,它有一个方法叫 isAwesome()。在 Rollbar 命名空间中,可以直接使用 this 关键字来调用这个方法:

10大常见JavaScript代码错误浅析,看你遇到几个?

在 Chrome、Firefox 和 Opera 中这样做都是没有问题的,但在 IE 中就不行。所以,最安全的做法是指定全命名空间:

10大常见JavaScript代码错误浅析,看你遇到几个?

TypeError: ‘undefined’ is not a function

在 Chrome 里调用一个未定义的函数时就会发生这个错误,可以在 Chrome 开发者控制台和 Mozilla 开发者控制台重现这个错误。

10大常见JavaScript代码错误浅析,看你遇到几个?

Uncaught RangeError: Maximum call stack

在 Chrome 里,有几种情况会发生这个错误,其中一个就是无限递归调用一个函数。这个错误可以在 Chrome 开发者控制台重现。

10大常见JavaScript代码错误浅析,看你遇到几个?

当传给函数的值超出可接受的范围时也会出现这个错误。很多函数只接受指定范围的数值,例如,Number.toExponential(digits) 和 Number.toFixed(digits) 只接受 0 到 20 的数值,而 Number.toPrecision(digits) 只接受 1 到 21 的数值。

TypeError: Cannot read property ‘length’

在 Chrome 里读取 undefined 变量的 length 属性时会发生这个错误,这个错误可以在 Chrome 开发者控制台重现。

10大常见JavaScript代码错误浅析,看你遇到几个?

length 是数组的属性,但如果数组没有初始化或者数组的变量名被另一个上下文隐藏起来的话,访问 length 属性就会发生这个错误。

Uncaught TypeError: Cannot set property

我们无法对 undefined 变量进行赋值或读取操作,否则的话会抛出“Uncaught TypeError: cannot set property of undefined”异常。例如,在 Chrome 中:

10大常见JavaScript代码错误浅析,看你遇到几个?

如果 test 对象不存在,就会抛出“Uncaught TypeError: cannot set property of undefined”异常。

ReferenceError: event is not defined

在访问一个未定义的对象或超出当前作用域的对象时就会发生这个错误,这个错误可以在 Chrome 开发者控制台重现。

10大常见JavaScript代码错误浅析,看你遇到几个?

如果在进行事件处理时遇到这个错误,请确保事件对象被作为参数传入到函数当中。旧浏览器(IE)提供了全局的 event 变量,但并不是所有的浏览器都会这样。尽管 jQuery 尝试对这种行为进行规范化,但最好还是使用传给函数的 event 对象。


全部评论: 0

    我有话说: