JS 中排行前十的报错怎样幸免

前言：

写代码的历程中，不免会发生各种错误，而发出去的代码也大概收到会员阅读器报回来的各种错误需要查问题。理解这些报错发生的缘由乃至显现的阅读器可以帮忙我们更快的寻到bug，下面就一起来看看排行前十的JS错误乃至幸免的办法吧。

一、 Uncaught TypeError: Cannot read property

这个错误是Chrome阅读器报的。在尝试去读取一个undefined变量的属性或者调取undefined变量的办法就会报错。你可以在Chrome阅读器中轻易复现。

幸免办法：在取变量的属性值，要包管这个变量是定义过的。比方可以这样写：

foo && foo.bar

二、 TypeError: ‘undefined’ is not an object (evaluating

这个报错的缘由跟第一条一样，只是这个是safari阅读器的报错。可以在safari阅读器中复现。

三、TypeError: null is not an object (evaluating

这条报错也是来自safari缘由也差不多，只是变量从undefine变成了null。所以就是调取了null的属性或者办法就会报这个错。

四、(unknown): Script error

这条就凶猛了，一样我们的监控系统也会收到这种错误，这类型错误只报上来一条Script error没有给你详细的信息，所以会很难查。

那为什么会报Script error呢？基于平安思考，阅读器成心潜藏其他域JS文件抛出的详细错误信息，这样可以幸免敏锐信息无意中被歹意足本捕捉。也就是说，阅读器只同意同域名的足本捕捉详细的错误信息。这本质其是阅读器跨域错误。

比方，当网站施行了托管在第三方CDN的js文件，而这个js足本假如有错误，就会报Script error，而不是那些有用的信息。

解决办法：

第一步：加跨域HTTP响应头

Access-Control-Allow-Origin: * // 或者是指定网站www.example.com

第二步: 增加 crossorigin=”anonymous”属性

<script src="http://another-domain.com/app.js " crossorigin="anonymous"></script>

这相当于告诉阅读器去恳求这个scipt文件的时候使用匿名的方式猎取，意味着恳求足本时没有潜在的会员身份信息(如cookies、HTTP 证书等)发送到效劳端。

这里需要留意：在设定 crossorigin=”anonymous”属性此前必然要包管http的响应头已经设定了Access-Control-Allow-Origin:* 即同意跨域。不然，在火狐阅读器下，这个script 标签就不会被施行。

五、 TypeError: Object doesn’t support property

这个错误解在IE报的，当去调取一个没有被定义的办法时候就会报这个错。

这个错误跟chrome的"TypeError: ‘undefined’ is not a function"一样。只是不一样的阅读器会报不一样的错误语罢了。

这种错误一样频发在使用命名空间的IE上。99.9%是由于IE没法解析this所指向的准确的命名空间。比方：

var Person = {
    name : "daisy",
    getName : function() {
        console.log(this.name)
    },
    print: function() {
      this.getName()
    }
};

比方在Person的命名空间里，print里可以去调取this.getName()这个办法。但是在IE不可，所以得明白的写明命名空间。

var Person = {
    name : "daisy",
    getName : function() {
        console.log(Person.name)
    },
    print: function() {
      Person.getName()
    }
};

（注：由于我手头没有window电脑，也懒得去寻 = =，所以没有验证过，依照原文的翻译我懂得是这个意思，大家有乐趣可以验证一下，评论区告诉我结论~）

六、TypeError: ‘undefined’ is not a function

这个就是上面说的缘由，Chrome/火狐 调取了没有定义的办法致使。不在赘述。

当然除了忽视，没有人会去直接调取一个没有定义的办法，大多是由于在回调函数或者是必包中，对this的懂得不足造成的。比方：

function clearBoard(){
  alert("Cleared");
}
document.addEventListener("click", function(){
  this.clearBoard(); // what is “this” ?
});

在这个case中，回调函数里的this其实指向的是document，而外层定义的clearBoard命名空间作用域在window中，所以就会报"Uncaught TypeError: this.clearBoard is not a function".的错误。

有许多种办法可以解决上面的问题：

1、可以将外层的this存下来，这样self指向的还是windows。

var self=this;  // save reference to 'this', while it's still this!
document.addEventListener("click", function(){
  self.clearBoard();
});

2、也可以用bind改动this的指向。

document.addEventListener("click",this.clearBoard.bind(this));

七、 Uncaught RangeError

这个错误解在Chrome的许多场景下显现。其中有一种就是使用了递归却没有使用休止的前提。

八、TypeError: Cannot read property ‘length’

这个错误是调取了undefined的length属性，发生在Chrome中。

所以我们在取一个变量的length时候，一样都是string或者array，要留意他们是有值的。

九、Uncaught TypeError: Cannot set property

给undefined设定属性的时候会报错。

十、ReferenceError: event is not defined

拜访一个没有定义或者不在当前作用域的变量会报这个错。

什么时候容易出这个错呢？在事件的回调中，假如要使用event要留意传入event。

document.addEventListener("mousemove", function (event) {
  console.log(event);
})

由于有些阅读器不会主动帮你传，比方火狐，就会报错。所以最好还是本人传。

引荐教程：《JS教程》

以上就是JS 中排行前十的报错怎样幸免的具体内容，更多请关注百分百源码网其它相关文章！