JavaScript 是前端开发中不可或缺的一部分。在实际开发中，我们经常会遇到各种奇怪的 JavaScript 错误，这些错误可能导致应用程序崩溃、停止工作或者表现异常。本文基于对1000+项目数据分析，总结出10大常见 JavaScript 错误，并给出详细说明和示例代码，希望能够帮助读者更好地理解和解决相关问题。
1. TypeError: Cannot read property 'xxx' of undefined/null
当我们访问一个未定义或者 null 值的属性时，就会引发 TypeError。这个错误很常见，原因可能是由于变量未被正确初始化或者不存在。
const person = {
name: 'John',
age: 30,
};
console.log(person.address.city); // TypeError: Cannot read property 'city' of undefined解决方法：确保变量存在并且已被正确初始化。
-- -------------------- ---- -------
----- ------ - -
----- -------
---- ---
-------- -
----- ---- ------
------ -----
--
--
---------------------------------- -- --- ---- ----------2. SyntaxError: Unexpected token xxx
这个错误通常表示代码存在语法错误，例如漏掉了括号、分号、引号等。
const person = {
name: 'John',
age: 30,
}
console.log(person.name) // SyntaxError: Unexpected token )解决方法：检查代码中是否存在语法错误，并进行修正。
const person = {
name: 'John',
age: 30,
};
console.log(person.name);3. ReferenceError: xxx is not defined
当我们尝试访问未定义的变量时，就会出现 ReferenceError 错误。
console.log(a); // ReferenceError: a is not defined
解决方法：确保变量被正确声明并且在当前作用域内存在。
const a = 10; console.log(a);
4. TypeError: xxx is not a function
当我们尝试将一个非函数类型的值作为函数来调用时，就会引发 TypeError。
const person = {
name: 'John',
age: 30,
};
person.sayHi(); // TypeError: person.sayHi is not a function解决方法：确保方法或者函数被正确声明并且存在于对象或者类中。
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
------- -
---------------- -- ---- -- ------------- - -- ----------- ----- -------
-
-
----- ---- - --- -------------- ----
-------------5. RangeError: Maximum call stack size exceeded
这个错误通常表示代码存在递归调用溢出，即代码过多地调用了自身，导致栈内存溢出。
function factorial(n) {
if (n === 0) return 1;
return n * factorial(n - 1);
}
console.log(factorial(10000)); // RangeError: Maximum call stack size exceeded解决方法：避免无限递归调用，或者通过尾递归优化等方式减少函数调用深度。
function factorial(n, acc = 1) {
if (n === 0) return acc;
return factorial(n - 1, acc * n);
}
console.log(factorial(10000)); // 不会导致栈溢出6. TypeError: Cannot set property 'xxx' of null/undefined
当我们尝试给一个未定义或者 null 值的属性赋值时，就会引发 TypeError。
let person = null; person.name = 'John'; // TypeError: Cannot set property 'name' of null `` > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/10725) ，转载请注明来源 [https://www.javascriptcn.com/post/10725](https://www.javascriptcn.com/post/10725)
