js常见错误及避免

1.Chorme： Uncaught TypeError: Cannot Read Property

Safari ：‘undefined’ Is Not an Object (evaluating...)

读取一个属性或调用一个未定义对象的方法时报的错
在构造函数中使用合理的默认值进行状态初始化。

2.TypeError: Null Is Not an Object (evaluating...)

Safari 中读取属性或调用空对象上的方法时发生的错误
在 JavaScript 中，null 和 undefined 是两种不同的类型，这就是为什么会出现两个不同的错误消息。未定义通常是一个尚未分配的变量，而 null 则表示该值为空。使用严格的相等运算符验证它们不相等。

错误原因：在元素加载之前，就尝试在 JavaScript 中使用 DOM 元素。这是因为 DOM API 对于空白的对象引用返回 null。

任何执行和处理 DOM 元素的 JS 代码，都应该在创建 DOM 元素之后执行。JS 代码按照 HTML 中的规定自上而下进行解释。因此，如果在 DOM 元素之前存在标签，则脚本标签内的 JS 代码就会在浏览器分析 HTML 页面时执行。如果在加载脚本之前尚未创建 DOM 元素，就会出现这样的错误。

我们可以通过添加一个事件侦听器来解决这个问题，事件侦听器会在页面准备就绪时通知我们。一旦 addEventListener 被触发，该 init( ) 方法就可以使用 DOM 元素。

3.(unknown): Script Error

当未捕获的 JavaScript 错误违背跨边界原则时，就会发生脚本错误。例如，如果将 JavaScript 代码托管在 CDN 上，则任何未被捕获的错误（通过 window.onerror 处理程序发出的错误，而不是 try-catch 中捕获到的错误）将仅报告为“脚本错误”。这是浏览器的一种安全措施，主要用于防止跨域传递数据的情况出现。

要获取真实的错误消息，需要执行以下操作：
将 Access-Control-Allow-Origin 设置为 ，表示可以从任何域正确访问资源。 如有必要，也可以用自己的域名进行替换

4.TypeError: Object Doesn’t Support Property

当调用未定义的方法时，IE 中会发生这样的错误。
出现这种情况的绝大部分原因是IE无法将当前名称空间内的方法绑定到this关键字。例如，如果你有 JS Rollbar 方法的命名空间 isAwesome。通常，如果位于 Rollbar 命名空间内，则可以使用以下语法调用该 isAwesome 方法：

this.isAwesome();

Chrome、Firefox 和 Opera 接受这种语法，IE则不接受。因此，使用 JS 命名空间时最安全的做法是：始终以实际名称空间作为前缀。

Rollbar.isAwesome();

5.TypeError: ‘undefined’ Is Not a Function

当调用未定义的函数时，Chrome 中就会发生这样的错误。
回调和闭包中的自引用范围也相应增加，这是造成这种混乱现象的主要来源。

function test(){
  this.clearFun();
  this.tim = setTimeout(function(){
    this.claerBoard());
  },0);
}

解决方法

function test(){
  this.clearFun();
  var self = this;
  this.tim = setTimeout(function(){
    self .claer());
  },0);
}

或者

function test(){
  this.clearFun();
  this.tim = setTimeout(this.bind(this),0);
}
function test(){
  this.clear();
}

发生以上错误的原因是，当你调用 setTimeout( ) 时，实际上是在调用 window.setTimeout( )，传递给 setTimeout( ) 的匿名函数是在窗口对象的上下文中定义的，而该窗口对象没有 clearBoard( ) 方法。

6.Uncaught RangeError: Maximum Call Stack

Chrome 中发生的错误，一种情况是调用一个不会终止的递归函数。

如果将值传递给超出范围的函数，也可能会发生这种情况。许多函数只接受特定范围内的数字输入值。例如，Number.toExponential( digits ) 与 Number.toFixed( digits) 接受的参数范围为从0到20，而 Number.toPrecision( digits ) 接受的数字范围为从1至21。

7. TypeError: Cannot Read Property ‘length’

Chrome 中因为读取了未定义长度属性的变量。

通常在数组中能够找到定义的长度，但是如果数组未初始化或变量名在另一个上下文中隐藏，则可能会出现这种错误。

var a = ["Hello"];
function test(a){
  for(var i=0;i

 
 解决方法： 
 var a = ["Hello"];
function test(){
  for(var i=0;i
 
 或者 
 var a = ["Hello"];
function test(a){
  for(var i=0;i
 
 8.Uncaught TypeError: Cannot Set Property 
 当尝试访问未定义的变量时，总会返回 undefined。我们也无法获取或设置 undefined 的任何属性。在这种情况下，应用程序将抛出“Uncaught TypeError cannot set property of undefined”。
 在 Chrome 浏览器中，如果 test 对象不存在，就会出现这种错误： 
 
 
  
   
    
     
    
   
   
  
 
 
 所以就需要在访问变量之前，对变量进行定义。 
 9.ReferenceError: Event Is Not Defined 
 尝试访问未定义的变量或当前范围之外的变量时会引发此错误。 
 
 
  
   
    
     
    
   
   
  
 
 
 如果在使用事件处理系统时遇到此错误，请确保使用传入的事件对象作为参数。IE 这样的浏览器提供了全局变量事件，Chrome 会自动将事件变量附加到处理程序中，Firefox 则不会自动添加事件变量。