精华内容
下载资源
问答
  • 修复一个php-js-site-Iceland
  • JavaScript 错误以及如何修复

    千次阅读 2015-02-09 23:44:12
    有个查找错误含义,及修复措施的列表,是不是很有用? 以下是奇怪的 JavaScript 错误列表。同样的错误,不同的浏览器会给出不同的消息,因此有一些不同的例子。 如何读懂错误? 首先,让我们快速看下错误信息的...

    JavaScript 调试是一场噩梦:首先给出的错误非常难以理解,其次给出的行号不总有帮助。有个查找错误含义,及修复措施的列表,是不是很有用?

    以下是奇怪的 JavaScript 错误列表。同样的错误,不同的浏览器会给出不同的消息,因此有一些不同的例子。

    如何读懂错误?

    首先,让我们快速看下错误信息的结构。理解结构有助于理解错误,如果遇到列表之外的错误会减少麻烦。

    Chrome 中典型的错误像这样:

     

     

    1
    
    Uncaught TypeError: undefined is not a function
    

     

     

    错误的结构如下:

    1. Uncaught TypeError:这部分信息通常不是很有用。Uncaught表示错误没有被catch语句捕获,TypeError是错误的名字。

    2. undefined is not a function:这部分信息,你必须逐字阅读。比如这里表示代码尝试使用undefined,把它当做一个函数。

    其它基于 webkit 的浏览器,比如 Safari ,给出的错误格式跟 Chrome 很类似。Firefox 也类似,但是不总包含第一部分,最新版本的 IE 也给出比 Chrome 简单的错误 - 但是在这里,简单并不总代表好。

    以下是真正的错误。

    Uncaught TypeError: undefined is not a function

    相关错误:number is not a function, object is not a function, string is not a function, Unhandled Error: ‘foo’ is not a function, Function Expected

    当尝试调用一个像方法的值时,这个值并不是一个方法。比如:

     

     

    1
    2
    
    var foo = undefined;
    foo();
    

     

     

    如果你尝试调用一个对象的方法时,你输错了名字,这个典型的错误很容易发生。

     

     

    1
    
    var x = document.getElementByID('foo');
    

     

     

    由于对象的属性不存在,默认是undefined,以上代码将导致这个错误。

    尝试调用一个像方法的数字,“number is not a function” 错误出现。

    如何修复错误:确保方法名正确。这个错误的行号将指出正确的位置。

    Uncaught ReferenceError: Invalid left-hand side in assignment

    相关错误:Uncaught exception: ReferenceError: Cannot assign to ‘functionCall()’, Uncaught exception: ReferenceError: Cannot assign to ‘this’

    尝试给不能赋值的东西赋值,引起这个错误。

    这个错误最常见的例子出现在 if 语句使用:

     

     

    1
    
    if(doSomething() = 'somevalue')
    

     

     

    此例中,程序员意外地使用了单个等号,而不是双等号。“left-hand side in assignment” 提及了等号左手边的部分,因此你可以看到以上例子,左手边包含不能赋值的东西,导致这个错误。

    如何修复错误:确保没有给函数结果赋值,或者给this关键字赋值。

    Uncaught TypeError: Converting circular structure to JSON

    相关错误:Uncaught exception: TypeError: JSON.stringify: Not an acyclic Object, TypeError: cyclic object value, Circular reference in value argument not supported

    把循环引用的对象,传给JSON.stringify总会引起错误。

     

     

    1
    2
    3
    4
    
    var a = { };
    var b = { a: a };
    a.b = b;
    JSON.stringify(a);
    

     

     

    由于以上的ab循环引用彼此,结果对象无法转换成 JSON。

    如何修复错误:移除任何想转换成 JSON 的对象中的循环引用。

    Unexpected token ;

    相关错误:Expected ), missing ) after argument list

    JavaScript 解释器预期的东西没有被包含。不匹配的圆括号或方括号通常引起这个错误。

    错误信息可能有所不同 - “Unexpected token ]” 或者 “Expected {” 等。

    如何修复错误:有时错误出现的行号并不准确,因此很难修复。

    • [ ] { } ( ) 这几个符号不配对常常导致出错。检查所有的圆括号和方括号是否配对。行号指出的不仅是问题字符。
    • Unexpected / 跟正则表达式有关。此时行号通常是正确的。
    • Unexpected ; 对象或者数组字面量里面有个 ; 通常引起这个错误,或者函数调用的参数列表里有个分号。此时的行号通常也是正确的。

    Uncaught SyntaxError: Unexpected token ILLEGAL

    相关错误:Unterminated String Literal, Invalid Line Terminator

    一个字符串字面量少了结尾的引号。

    如何修复错误:确保所有的字符串都有结束的引号。

    Uncaught TypeError: Cannot read property ‘foo’ of null, Uncaught TypeError: Cannot read property ‘foo’ of undefined

    相关错误:TypeError: someVal is null, Unable to get property ‘foo’ of undefined or null reference

    尝试读取null或者undefined,把它当成了对象。例如:

     

     

    1
    2
    
    var someVal = null;
    console.log(someVal.foo);
    

     

     

    如何修复错误:通常由于拼写错误导致。检查错误指出的行号附近使用的变量名是否正确。

    Uncaught TypeError: Cannot set property ‘foo’ of null, Uncaught TypeError: Cannot set property ‘foo’ of undefined

    相关错误:TypeError: someVal is undefined, Unable to set property ‘foo’ of undefined or null reference

    尝试写入null或者undefined,把它当成了一个对象。例如:

     

     

    1
    2
    
    var someVal = null;
    someVal.foo = 1;
    

     

     

    如何修复错误:也是由于拼写错误所致。检查错误指出的行号附近的变量名。

    Uncaught RangeError: Maximum call stack size exceeded

    相关错误:Related errors: Uncaught exception: RangeError: Maximum recursion depth exceeded, too much recursion, Stack overflow

    通常由程序逻辑 bug 引起,导致函数的无限递归调用。

    如何修复错误:检查递归函数中可能导致无限循环 的 bug 。

    Uncaught URIError: URI malformed

    相关错误:URIError: malformed URI sequence

    无效的 decodeURIComponent 调用所致。

    如何修复错误:按照错误指出的行号,检查decodeURIComponent调用,它是正确的。

    XMLHttpRequest cannot loadhttp://some/url/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource

    相关错误:Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
    http://some/url/

    错误肯定是使用 XMLHttpRequest 引起的。

    如何修复:确保请求的 URL 是正确的,它遵循同源策略。最好的方法是从代码中找到错误信息指出的 URL 。

    InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

    相关错误:InvalidStateError, DOMException code 11

    代码调用的方法在当前状态无法调用。通常由XMLHttpRequest引起,在方法准备完毕之前调用它会引起错误。

    展开全文
  • ErrorBoard, 跟踪和修复浏览器触发的JavaScript错误 访客 ErrorBoard跟踪并修复访问者浏览器触发的JavaScript错误。屏幕截图 先决条件Node.js 和 NPM免费端口安装$ git clone git://github.com/Lapp
  • javascript错误JavaScript can be a nightmare to debug: Some errors it gives can be very difficult to understand at first, and the line numbers given aren’t always helpful either. Wouldn’t it be ...

    javascript错误

    JavaScript can be a nightmare to debug: Some errors it gives can be very difficult to understand at first, and the line numbers given aren’t always helpful either. Wouldn’t it be useful to have a list where you could look to find out what they mean and how to fix them? Here you go!

    JavaScript可能是调试的噩梦:一开始它会产生一些错误,很难理解,而且给出的行号也不总是有用。 有一个清单可以帮助您了解它们的含义以及如何修复它们,这对您有用吗? 干得好!

    Below is a list of the strange errors in JavaScript. Different browsers can give you different messages for the same error, so there are several different examples where applicable.

    以下列出了JavaScript中的奇怪错误。 不同的浏览器可以为您提供相同错误的不同消息,因此有几个不同的示例适用。

    如何读取错误? (How to read errors?)

    Before the list, let’s quickly look at the structure of an error message. Understanding the structure helps understand the errors, and you’ll have less trouble if you run into any errors not listed here.

    在列表之前,让我们快速查看错误消息的结构。 了解结构有助于理解错误,如果遇到此处未列出的任何错误,您的麻烦也将减少。

    A typical error from Chrome looks like this:

    Chrome的一个典型错误如下所示:

    Uncaught TypeError: undefined is not a function
    

    The structure of the error is as follows:

    错误的结构如下:

    1. Uncaught TypeError: This part of the message is usually not very useful. Uncaught means the error was not caught in a catch statement, and TypeError is the error’s name.

      未被捕获的TypeError :消息的这一部分通常不是很有用。 未捕获表示错误未在catch语句中catchTypeError是错误的名称。

    2. undefined is not a function: This is the message part. With error messages, you have to read them very literally. For example in this case it literally means that the code attempted to use undefined like it was a function.

      undefined不是函数 :这是消息部分。 对于错误消息,您必须按字面意义阅读它们。 例如,在这种情况下,它的字面意思是代码试图像函数一样使用undefined

    Other webkit-based browsers, like Safari, give errors in a similar format to Chrome. Errors from Firefox are similar, but do not always include the first part, and recent versions of Internet Explorer also give simpler errors than Chrome – but in this case, simpler does not always mean better.

    其他基于Webkit的浏览器(例如Safari)以类似于Chrome的格式给出错误。 Firefox的错误类似,但并不总是包含第一部分,而且Internet Explorer的最新版本也比Chrome提供的错误更简单-但是在这种情况下,更简单的错误并不总是意味着更好。

    Now onto the actual errors.

    现在转到实际错误。

    未捕获的TypeError:undefined不是函数 (Uncaught TypeError: undefined is not a function)

    Related errors: number is not a function, object is not a function, string is not a function, Unhandled Error: ‘foo’ is not a function, Function Expected

    相关错误:数字不是函数,对象不是函数,字符串不是函数,未处理的错误:'foo'不是函数,预期的函数

    Occurs when attempting to call a value like a function, where the value is not a function. For example:

    尝试调用诸如函数之类的值(该值不是函数)时发生。 例如:

    var foo = undefined;
    foo();
    
    

    This error typically occurs if you are trying to call a function in an object, but you typed the name wrong.

    如果尝试在对象中调用函数,但是键入的名称错误,通常会发生此错误。

    var x = document.getElementByID('foo');
    
    

    Since object properties that don’t exist are undefined by default, the above would result in this error.

    由于默认情况下undefined不存在的对象属性,因此上述情况会导致此错误。

    The other variations such as “number is not a function” occur when attempting to call a number like it was a function.

    尝试像调用数字一样调用数字时,会发生其他变化,例如“数字不是函数”。

    How to fix this error: Ensure the function name is correct. With this error, the line number will usually point at the correct location.

    如何解决此错误:确保函数名称正确。 遇到此错误,行号通常将指向正确的位置。

    未捕获的ReferenceError:分配中的左侧无效 (Uncaught ReferenceError: Invalid left-hand side in assignment)

    Related errors: Uncaught exception: ReferenceError: Cannot assign to ‘functionCall()’, Uncaught exception: ReferenceError: Cannot assign to ‘this’

    相关错误:未捕获的异常:ReferenceError:无法分配给“ functionCall()”,未捕获的异常:ReferenceError:无法分配给“ this”

    Caused by attempting to assign a value to something that cannot be assigned to.

    尝试将值分配给无法分配的内容。

    The most common example of this error is with if-clauses:

    此错误的最常见示例是if子句:

    if(doSomething() = 'somevalue')
    
    

    In this example, the programmer accidentally used a single equals instead of two. The message “left-hand side in assignment” is referring to the part on the left side of the equals sign, so like you can see in the above example, the left-hand side contains something you can’t assign to, leading to the error.

    在这个例子中,程序员不小心使用了一个单一的等于而不是两个。 消息“分配中的左侧”是指等号左侧的部分,因此,如您在上面的示例中所见,左侧包含无法分配的内容,导致错误。

    How to fix this error: Make sure you’re not attempting to assign values to function results or to the this keyword.

    如何解决此错误:确保您没有尝试为函数结果或this关键字分配值。

    未捕获的TypeError:将圆形结构转换为JSON (Uncaught TypeError: Converting circular structure to JSON)

    Related errors: Uncaught exception: TypeError: JSON.stringify: Not an acyclic Object, TypeError: cyclic object value, Circular reference in value argument not supported

    相关错误:未捕获的异常:TypeError:JSON.stringify:不是非循环对象,TypeError:循环对象值,value参数中的循环引用不受支持

    Always caused by a circular reference in an object, which is then passed into JSON.stringify.

    始终由对象中的循环引用引起,然后将其传递到JSON.stringify

    var a = { };
    var b = { a: a };
    a.b = b;
    JSON.stringify(a);
    
    

    Because both a and b in the above example have a reference to each other, the resulting object cannot be converted into JSON.

    由于上例中的ab相互引用,因此无法将结果对象转换为JSON。

    How to fix this error: Remove circular references like in the example from any objects you want to convert into JSON.

    如何解决此错误:从示例中将要转换为JSON的对象删除循环引用,如示例中所示。

    意外的标记 ; (Unexpected token ;)

    Related errors: Expected ), missing ) after argument list

    相关错误:参数列表后,预期),缺少)

    The JavaScript interpreter expected something, but it wasn’t there. Typically caused by mismatched parentheses or brackets.

    JavaScript解释器期望了一些东西,但是还没有。 通常由括号或括号不匹配引起。

    The token in this error can vary – it might say “Unexpected token ]” or “Expected {” etc.

    此错误中的令牌可能会有所不同–可能会显示“意外令牌]”或“预期{”等。

    How to fix this error: Sometimes the line number with this error doesn’t point to the correct place, making it difficult to fix.

    如何解决此错误:有时出现此错误的行号没有指向正确的位置,因此很难解决。

    • An error with [ ] { } ( ) is usually caused by a mismatching pair. Check that all your parentheses and brackets have a matching pair. In this case, line number will often point to something else than the problem character

      [] {}()错误通常是由于配对不正确引起的。 检查所有括号和方括号是否都具有匹配的对。 在这种情况下,行号通常会指向问题字符以外的其他地方
    • Unexpected / is related to regular expressions. The line number for this will usually be correct.

      意外的/与正则表达式有关。 该行号通常是正确的。
    • Unexpected ; is usually caused by having a ; inside an object or array literal, or within the argument list of a function call. The line number will usually be correct for this case as well

      出乎意料; 通常是由于有; 在对象或数组文字中,或在函数调用的参数列表中。 在这种情况下,行号通常也是正确的

    Uncaught SyntaxError:意外的令牌非法 (Uncaught SyntaxError: Unexpected token ILLEGAL)

    Related errors: Unterminated String Literal, Invalid Line Terminator

    相关错误:未终止的字符串文字,无效的行终止符

    A string literal is missing the closing quote.

    字符串文字缺少右引号。

    How to fix this error: Ensure all strings have the correct closing quote.

    如何解决此错误:确保所有字符串都具有正确的结束引号。

    未捕获的TypeError:无法读取null的属性'foo',未捕获的TypeError:无法读取未定义的属性'foo' (Uncaught TypeError: Cannot read property ‘foo’ of null, Uncaught TypeError: Cannot read property ‘foo’ of undefined)

    Related errors: TypeError: someVal is null, Unable to get property ‘foo’ of undefined or null reference

    相关错误: TypeError:someVal为空,无法获取未定义或空引用的属性“ foo”

    Attempting to read null or undefined as if it was an object. For example:

    尝试读取nullundefined ,就像它是一个对象一样。 例如:

    var someVal = null;
    console.log(someVal.foo);
    
    

    How to fix this error: Usually caused by typos. Check that the variables used near the line number pointed by the error are correctly named.

    如何解决此错误:通常是由错别字引起的。 检查错误指向的行号附近使用的变量是否正确命名。

    未捕获的TypeError:无法将属性'foo'设置为null,未捕获的TypeError:无法将属性'foo'设置为undefined (Uncaught TypeError: Cannot set property ‘foo’ of null, Uncaught TypeError: Cannot set property ‘foo’ of undefined)

    Related errors: TypeError: someVal is undefined, Unable to set property ‘foo’ of undefined or null reference

    相关错误: TypeError:someVal未定义,无法设置未定义或空引用的属性“ foo”

    Attempting to write null or undefined as if it was an object. For example:

    尝试将nullundefined当作对象写入。 例如:

    var someVal = null;
    someVal.foo = 1;
    
    

    How to fix this error: This too is usually caused by typos. Check the variable names near the line the error points to.

    如何解决此错误:这通常也是由错别字引起的。 检查错误指向的行附近的变量名称。

    未捕获的RangeError:超出最大调用堆栈大小 (Uncaught RangeError: Maximum call stack size exceeded)

    Related errors: Uncaught exception: RangeError: Maximum recursion depth exceeded, too much recursion, Stack overflow

    相关错误:未捕获的异常:RangeError:超过最大递归深度,递归过多,堆栈溢出

    Usually caused by a bug in program logic, causing infinite recursive function calls.

    通常由程序逻辑中的错误引起,从而导致无限递归函数调用。

    How to fix this error: Check recursive functions for bugs that could cause them to keep recursing forever.

    如何解决此错误:检查递归函数中是否有可能导致其永远保持递归的错误。

    未捕获的URIError:URI格式错误 (Uncaught URIError: URI malformed)

    Related errors: URIError: malformed URI sequence

    相关错误: URI 错误: URI序列格式错误

    Caused by an invalid decodeURIComponent call.

    由无效的encodeURIComponent调用引起。

    How to fix this error: Check that the decodeURIComponent call at the error’s line number gets correct input.

    如何解决此错误:检查错误行号处的decodeURIComponent调用是否获取正确的输入。

    XMLHttpRequest无法加载http:// some / url /。 所请求的资源上没有“ Access-Control-Allow-Origin”标头 (XMLHttpRequest cannot load http://some/url/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource)

    Related errors: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://some/url/

    相关错误:跨域请求被阻止:同源策略禁止读取位于http:// some / url /的远程资源

    This error is always caused by the usage of XMLHttpRequest.

    此错误始终是由XMLHttpRequest的使用引起的。

    How to fix this error: Ensure the request URL is correct and it respects the same-origin policy. A good way to find the offending code is to look at the URL in the error message and find it from your code.

    如何解决此错误:确保请求URL正确并且遵守同源策略 。 查找有问题的代码的一个好方法是查看错误消息中的URL,然后从您的代码中找到它。

    InvalidStateError:尝试使用一个不可用或不再可用的对象 (InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable)

    Related errors: InvalidStateError, DOMException code 11

    相关错误: InvalidStateError,DOMException代码11

    Means the code called a function that you should not call at the current state. Occurs usually with XMLHttpRequest, when attempting to call functions on it before it’s ready.

    表示称为函数的代码,您不应在当前状态下调用该函数。 尝试在准备就绪之前调用XMLHttpRequest ,通常会发生在XMLHttpRequest上。

    var xhr = new XMLHttpRequest();
    xhr.setRequestHeader('Some-Header', 'val');
    
    

    In this case, you would get the error because the setRequestHeader function can only be called after calling xhr.open.

    在这种情况下,将出现错误,因为只有在调用xhr.open之后才能setRequestHeader函数。

    How to fix this error: Look at the code on the line pointed by the error and make sure it runs at the correct time, or add any necessary calls before it (such as xhr.open)

    如何解决此错误:错误所指向的行上查看代码,并确保它在正确的时间运行,或者在它之前添加任何必要的调用(例如xhr.open )。

    结论 (Conclusion)

    JavaScript has some of the most unhelpful errors I’ve seen, with the exception of the notorious Expected T_PAAMAYIM_NEKUDOTAYIM in PHP. With more familiarity the errors start to make more sense. Modern browsers also help, as they no longer give the completely useless errors they used to.

    JavaScript有一些我所见过的最无用的错误,除了PHP中臭名昭著的Expected T_PAAMAYIM_NEKUDOTAYIM 。 随着更多的熟悉,错误开始变得更有意义。 现代浏览器也有所帮助,因为它们不再提供以前完全没有用的错误。

    What’s the most confusing error you’ve seen? Share the frustration in the comments!

    您看到的最令人困惑的错误是什么? 在评论中分享挫败感!

    Want to learn more about these errors and how to prevent them? Detect Problems in JavaScript Automatically with ESLint.

    想更多地了解这些错误以及如何防止它们? 使用ESLint自动检测JavaScript中的问题

    翻译自: https://davidwalsh.name/fix-javascript-errors

    javascript错误

    展开全文
  • 我的解决方案包括已修复错误和一些额外的新增功能。 这是一组针对挑战课程的项目挑战。 挑战性 使每个“键”也具有单击触发器。 第2天-JS和CSS时钟 修复新周期开始时的跳过动画 第三天-CSS变量 以以前的控件为例...
  • 该项目使用了jquery和vanilla javascript的组合。 如果禁用了js,则该页面仍然有效。 显示除注册按钮“ Please fix errors”以外的所有错误。 栏目 每个部分都经过验证,并且将引发至少一个错误。 文本输入模糊时会...
  • 英文 |https://medium.com/better-programming/the-most-common-javascript-errors-and-how-to-fix-t...

    英文 | https://medium.com/better-programming/the-most-common-javascript-errors-and-how-to-fix-them-29d7c1b2f690

    翻译 | web前端开发 (web_qdkf)

    报错,可能是软件开发过程中最头疼的问题之一。令他们感到不好的是,当你初次阅读这些报错信息时,有些错误是陌生的。但是,当你抽出时间并正确阅读时,它们确实会提供你需要了解的信息。

    以下是一些常见的JavaScript错误及其相关修复程序的列表。这些修复程序可能对你而言并不完全相同,因为它们在不同的框架中有所不同,但是它们将使你初步了解错误的原因。

    1、未获取TypeError:无法读取属性

    这是列表中最常见的JS错误之一。当你尝试访问未定义对象中的属性或方法时,就会发生这种情况。让我们重现此错误,截图如下:

    更正

    在构造或初始化期间为对象分配一个合理的值,请勿使用JS的保留字null或者undefined。

    2、TypeError:“undefined”不是对象

    这是与上面相同的错误。但是以上错误是在Chrome上发生的,而这个错误是在Safari上发生的。当你在undefined的对象上调用属性或方法时,就会发生此错误。

    更正

    在构造或初始化期间为对象分配一个合理的值,不要保持未定义状态。

    3、 TypeError:“ null”不是对象

    当你在空对象上调用属性或方法时,会发生错误。与第2个undefined错误类似,这是一个仅发生在Safari上的错误。

    更正

    在构造或初始化期间为对象分配一个合理的值,请勿将其保持为空。

    当你尝试在加载DOM元素之前访问它们时,也会发生上述错误。阅读这些JavaScript技巧,以便更好地了解这个问题。

    注意

    你应该注意的一件事是undefinednull在JavaScript是两回事。这就是为什么我们在两种情况下都看到错误消息的变体的原因。undefined通常是未初始化的变量,而null 表示该值为空。

    4. TypeError:对象不支持属性

    当你调用undefined的方法时,这是在IE上发生的错误。

    这与Chrome中的错误“ TypeError:'undefined'is a function”非常相似。

    到现在为止你已经了解到,对于相同的逻辑问题,不同的浏览器会有不同的错误。

    更正

    此错误是IE的常见问题。他进一步指出,这是IE上的一个常见问题,其中JS应用程序使用名称空间绑定。

    在这种情况下,99.9%的时间问题是IE无法将当前名称空间中的方法绑定到this关键字。例如,如果你的JS名称空间Rollbar带有方法,isAwesome.通常,如果你在Rollbar名称空间中,则可以调用isAwesome具有以下语法的方法:

    this.isAwesome();
    

    Chrome,Firefox和Opera将很乐意接受此语法。IE,则不会。因此,使用JS名称空间时最安全的选择是始终以实际名称空间作为前缀。

    Rollbar.isAwesome();
    

    5、TypeError:“ this.show”不是函数

    当你调用未定义的函数时,会发生此错误。你可以在Chrome和Firefox中获得此错误消息。

    更正

    导致此错误的原因很简单,因为你忘记定义函数或输入错误。这是最简单的情况。

    但是,你也可以使用更复杂的情况。这是由于回调和闭包中的自引用作用域引起的。让我们通过使用Jason给出的示例来重现此错误。

    当我们执行以上代码片段并单击页面时,你会收到错误消息。这是因为函数clearBoard是在窗口中定义的,而匿名函数是在文档的上下文中执行的。

    有三种方法可以纠正此错误。

    传统方法-这是旧的符合浏览器的解决方案。我们只保存对this变量的引用,然后在闭包内部引用它。

    使用bind的现代方法—这是一种更现代的方法,使用bind方法传递各自的引用。

    使用箭头功能的现代方法-这也是现代方法。它使用ES6箭头功能。

    6、未获取RangeError

    Chrome上会发生此错误,主要是因为两种情况。

    1)、你的递归函数没有终止。

    2)、你将超出范围的值传递给函数

    让我们使用Jason给出的示例。许多功能仅接受特定范围内的值作为其输入值。例如,Number.toExponential(digits)Number.toFixed(digits)接受从0到100的数字,和Number.toPrecision(digits)接受从1到100的数字。

    结论

    这些错误大多数是由于null / undefined和范围/关闭问题引起的。现在你已经了解了最常见的JS错误以及解决方案,我强烈建议你使用诸如Sentry之类的错误记录器来帮助记录程序运行中的一些错误。这将使你能够发现一些未知的错误。

    希望你了解了大多数JS错误的根本原因。最后,祝编码愉快!

    展开全文
  • 最初的动机:我构建 aIV.debug 的最初原因是因为我想避免浪费时间为每个前端 JavaScript 错误插入和删除控制台日志。 问题是将日志留在代码库中可能会创建混乱的代码,并且组织包含多个方法和类的任何项目产生的...
  • 查找错误。... 与开发 :heart_suit: 由团队的朋友们提供。 介绍 :collision: D-Bug为学生开发人员提供了一个难得的机会,可以在现有...在Google / Stack Overflow上查找错误修复 自行修复错误 了解代码逻辑 “问题”分为
  • 如今网站几乎100%使用JavaScript。...1. 错误的对this进行引用 在闭包或则回调中,this关键字的作用域很容易弄错。举个例子: Game.prototype.restart = function () { this.clearLocalStorag...

     

     

    如今网站几乎100%使用JavaScript。JavaScript看上去是一门十分简单的语言,然而事实并不如此。它有很多容易被弄错的细节,一不注意就导致BUG。

    1. 错误的对this进行引用

    在闭包或则回调中,this关键字的作用域很容易弄错。举个例子:

    Game.prototype.restart = function () {
     this.clearLocalStorage();
     this.timer = setTimeout(function() {
       this.clearBoard();    // 此处this指的是?
     }, 0);
    };

     

    如果执行上面的代码,我们会看到报错:

    Uncaught TypeError: undefined is not a function

     

    出错的原因在于:当你调用setTimeout函数,你实际上调用的是window.setTimeout()。在setTimeout中传入的匿名函数是在window这个对象环境下,所以this是指向window,但是window并没有clearBoard方法。

    如何解决呢?定义新的变量引用指向Game对象的this,然后就可以使用啦。

    Game.prototype.restart = function () {
     this.clearLocalStorage();
     var self = this;   // 将this指向的对象绑定到self
     this.timer = setTimeout(function(){
       self.clearBoard();
     }, 0);
    };

     

    或则使用bind()函数:

    Game.prototype.restart = function () {
     this.clearLocalStorage();
     this.timer = setTimeout(this.reset.bind(this), 0);  // bind to 'this'
    };
    
    Game.prototype.reset = function(){
       this.clearBoard();    // 此处this的引用正确
    };

     

    2. 和块作用域(block scope)有关的BUG

    在大多数程序语言中,每一个函数块都有一个独立的新的作用域,但是在JavaScript中并不是。例如:

    for (var i = 0; i < 10; i++) {
     /* ... */
    }
    console.log(i);  // 会输出什么呢?

    通常在这种情况下,调用console.log()会输出undefined或则报错。不过呢,这里会输出10。在JavaScript中,即使for循环已经结束,变量i依然存在,并且记录最后的值。有些开发者会忘记这一点,然后导致许多bug。我们可以使用let而不是for来杜绝这一问题。

    3. 内存泄漏

    你需要监控内存使用量,因为泄露很难避免。内存泄露可能由于引用不存在的对象或则循环引用导致。

    • 如何避免:关注对象的可访问性(reachability)。
    • 可访问的对象:
      • 现有的call stack任何位置可以访问的对象
      • 全局对象

     

    当一个对象可以通过引用访问到,那么会在内存中保存。浏览器的垃圾回收器仅仅会把那些不可访问的对象回收。

    4. 混淆的相等判断

    JavaScript自动将所有在布尔环境下的变量类型转换为布尔类型,但是可能导致bug。举例:

    // 所有都是true
    console.log(false == '0');
    console.log(null == undefined);
    console.log(" \t\r\n" == 0);
    console.log('' == 0);
    
    // 注意:下面两个也是
    if ({}) // …
    if ([]) // …

    {}[]都是对象,他们都会被转换为true。为了防止bug出现,推荐使用===!==来做比较,因为不会隐式做类型转换。

    5. 低效的DOM操作

    在JavaScript中,你可以轻松操作DOM(添加、修改和删除),但是开发者往往很低效地去操作。这会导致bug出现,因为这些操作非常耗费计算资源。为了解决这个问题,推荐使用文档碎片(Document Fragment),如果你需要操作多个DOM元素。

    广告: 你的线上代码真的没有BUG吗?欢迎免费使用Fundebug!我们可以帮助您第一时间发现BUG!

    6. 在for循环中错误的定义函数

    举例:

    var elements = document.getElementsByTagName('input');
    var n = elements.length;    // 假设我们有10个元素
    for (var i = 0; i < n; i++) {
       elements[i].onclick = function() {
           console.log("元素编号#" + i);
       };
    }

    如果我们有10个元素,那么点击任何一个元素都会显示“元素编号#10”!因为在onclick被调用的时候,for循环已经结束,因此所有的i都是10。

    解法:

    var elements = document.getElementsByTagName('input');
    var n = elements.length;    // 假设有10个元素
    var makeHandler = function(num) {  // outer function
        return function() {   // inner function
            console.log("元素编号##" + num);
        };
    };
    for (var i = 0; i < n; i++) {
       elements[i].onclick = makeHandler(i+1);
    }

    makeHandler在for循环执行的时候立即被调用,获取到当前的值i+1,并且存储在变量num中。makeHandler返回一个函数使用num变量,该函数被绑定到元素的点击事件。

    7. 通过原型错误地继承

    开发者如果没能正确理解继承的原理,那么就可能写出有bug的代码:

    BaseObject = function(name) {
       if(typeof name !== "undefined") {
           this.name = name;
       } else {
           this.name = 'default'
       }
    };
    var firstObj = new BaseObject();
    var secondObj = new BaseObject('unique');
    
    console.log(firstObj.name);  // -> 输出'default'
    console.log(secondObj.name); // -> 输出'unique'

    但是,如果我们做如下操作:

    delete secondObj.name;

    那么:

    console.log(secondObj.name); // -> 输出'undefined'

     

    而我们实际上想要的结果是打印默认的name。

    BaseObject = function (name) {
       if(typeof name !== "undefined") {
           this.name = name;
       }
    };
    
    BaseObject.prototype.name = 'default';

     

    每一个BaseObject都继承name属性,并且默认值为default。此时如果secondObjname属性被删除掉,通过原型链查找会返回正确的默认值。

    var thirdObj = new BaseObject('unique');
    console.log(thirdObj.name);  // -> 输出'unique'
    
    delete thirdObj.name;
    console.log(thirdObj.name);  // -> 输出'default'

    8. 实例方法中的无效引用

    我们来实现一个简单的构造函数用来创建对象:

    var MyObject = function() {}
    MyObject.prototype.whoAmI = function() {
       console.log(this === window ? "window" : "MyObj");
    };
    
    var obj = new MyObject();

    为了使用方便,我们定义变量whoAmI来引用obj.whoAmI

    var whoAmI = obj.whoAmI;

     

    打印出来看看:

    console.log(whoAmI);

     

    控制台会输出:

    function () {
       console.log(this === window ? "window" : "MyObj");
    }

     

    现在我们来对比一下两者调用的区别:

    obj.whoAmI();  // 输出"MyObj" (和期望一致)
    whoAmI();      // 输出"window" (竟然输出了window)

     

    当我们把obj.whoAmI赋值给whoAmI的时候,这个新的变量whoAmI是定义在全局下,因此this指向全局的window,而不是MyObj。如果我们真的要获取对MyObj的函数的引用,需要在其作用域下。

    var MyObject = function() {}
    
    MyObject.prototype.whoAmI = function() {
       console.log(this === window ? "window" : "MyObj");
    };
    
    var obj = new MyObject();
    obj.w = obj.whoAmI;   // 任然在obj的作用域
    
    obj.whoAmI();  // 输出"MyObj"
    obj.w();       // 输出"MyObj"

    9. setTimeout/setInterval函数第一个参数误用字符串

    如果你将一个字符串作为setTimeout/setTimeInterval,它会被传给函数构造函数并构建一个新的函数。该操作流程很慢而且低效,并导致bug出现。

    var hello = function(){
     console.log("hello, fundebug !");
    }
    setTimeout("hello", 1000);

    一个好的替代方法就是传入函数作为参数:

    setInterval(logTime, 1000);   // 将logTime函数传入
    
    setTimeout(function() {       // 传入一个匿名函数
       logMessage(msgValue);     
     }, 1000);

    10. 未能成功使用strict mode

    使用strict model会增加很多限制条件来加强安全和防止某些错误的出现,如果不使用strict mode,你就相当于少了一个得力的助手帮你避免错误:

    • 更加容易debug
    • 避免不小心定义了不该定义的全局变量
    • 避免this隐式转换
    • 避免属性名字或则参数值的重复使用
    • eval()更加安全
    • 无效地使用delete会自动抛出错误
    展开全文
  • 修复utf8 根据,尽最大努力恢复丢失的拉丁Unicode字符的功能 还利用机会对传递的字符串进行,将任何替换为其对应的字形。 安装 $ npm install fix-utf8 如何 const fixUtf8 = require ( 'fix-utf8' ) fixUtf8 ( "L'...
  • 在GitHub提交和PR上显示掉毛错误 允许自动修复问题 支持 注意:此类行为的行为目前在fork上下文中受到限制。 请参阅。 屏幕截图 检查请求请求: 提交注释: 支持工具 CSS: 去: JavaScript: PHP: Python: ...
  • textlint自动修复程序包 通过修复文件。 安装 apm install textlint-auto-fixer 默认情况下, textlint-auto-fixer .textlintrc将在项目本地查找textlint二进制文件和.textlintrc 。
  • Java基础知识面试题(2020最新版)

    万次阅读 多人点赞 2020-02-19 12:11:27
    OpenJDK和Oracle JDK的代码几乎相同,但Oracle JDK有更多的类和一些错误修复。因此,如果您想开发企业/商业软件,我建议您选择Oracle JDK,因为它经过了彻底的测试和稳定。某些情况下,有些人提到在使用OpenJDK 可能...
  • <p style="text-align:center"><img alt="" height="354" src="https://img-ask.csdnimg.cn/upload/1611835168758.png" width="562" /></p> 新到的电脑,自己装了个最新版的win10。在装罗技驱动(...
  • 前者通常比后者更难诊断和修复。 语言 计算机能够自动地向我们指出许多错误,如果它足够了解我们正在尝试做什么。 但是这里 JavaScript 的宽松是一个障碍。 它的绑定和属性概念很模糊,在实际运行程序之前很少会...
  • 修复所有错误 基本上让这件事先工作 总共有5个错误。 添加每个学生的图片 添加每个学生的性别 添加每个学生的笔记 应显示每个学生的姓名,然后单击时应显示他们的图像和笔记。 风格! 祝你好运!
  • 番茄酱 作为输入 { filename: 'HTML filename', contents: 'HTML file contents' } 退货 { html: { filename: 'HTML filename', contents: '... contents: 'Extracted script file contents' ...
  • 使模板错误易于理解和修复。 安装 用安装 $ npm i template-error --save 用法 var rethrow = require ( 'template-error' ) ; rethrow ( '\n<%= a %>\n<%= b %>' , { data : { a : 'aaa' } } ) ; ...
  • 尽早发现样式问题和程序员错误。 通过消除审阅者和贡献者之间的来回关系,节省宝贵的代码审阅时间。 立即运行npx standard --fix尝试一下! 目录 快速开始 常问问题 安装 使用JavaScript标准样式的最简单方法...
  • Gulp 插件通过从 HTML 中提取内联脚本来修复 CSP 错误。 安装 $ npm install --save-dev gulp-catsup 用法 var gulp = require ( 'gulp' ) ; var catsup = require ( 'gulp-catsup' ) ; gulp . task ( 'default' ,...
  • 开始项目 javascript npm运行
  • Pangor是一个静态分析框架,用于发现和分析JavaScript的普遍错误模式。 有关Pangor的详细信息,请参见我们的方法描述和实证研究,以普遍存在。 Pangor包含两种分析类型:关键字更改分析(数据挖掘框架)和静态更改...
  • issu-tracker:这是基于API的基于JavaScript的简单项目,并修复了该项目的一些错误
  • 花式滑块主
  • 编辑源代码,并在编辑的部分对更正的内容(错误的原因以及如何修复)进行评论。提交更正的源代码。 问题示例: console . l0g ( "OK" ) ; 示例答案: // console.l0g と typo していたのを修正 console . log ( ...
  • javascript中promise错误捕获答疑

    千次阅读 2020-03-07 18:53:19
    修复: 补上return就可以捕获错误了 Promise.resolve("new").then((value)=>{ return Promise.resolve("other").then(()=>{ throw new Error("error"); }) }).catch((reason)=>{ console.log(reason); }) 换个形式...
  • 自动修复Markdown中的ESLint错误(或以后的错误)。 安装 npm install --save eslint-tinker 用法 编辑package.json : { " scripts " : { " eslint-tinker " : " eslint-tinker path/to/file.md " } } 然后:...
  • 主要为大家详细介绍了VUEJS实战之修复错误并且美化时间 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,408
精华内容 12,563
关键字:

修复javascript错误

java 订阅