The most common JavaScript mistakes and how to fix them

Error reporting may be one of the most troublesome problems in the software development process. What makes them feel bad is that when you first read these error messages, some of the errors are unfamiliar. But they do provide the information you need to know when you take the time and read them properly. Below is a list of some common JavaScript errors and their associated fixes. These fixes may not be exactly the same for you as they vary in different frameworks, but they will give you an initial idea of ​​what's wrong.

1. Not getting TypeError: Cannot read property

This is one of the most common JS mistakes on the list. This happens when you try to access a property or method in an undefined object. Let's reproduce this error, the screenshot is as follows:

correct

Assign a reasonable value to the object during construction or initialization, do not use the JS reserved word null or undefined

 

2. TypeError: 'undefined' is not an object

This is the same error as above. But the above error is happening on Chrome and this error is happening on Safari. This error occurs when you call a property or method on an undefined object.

Corrects assigning an object a reasonable value during construction or initialization, not leaving it undefined.

3. TypeError: 'null' is not an object

An error occurs when you call a property or method on an empty object. Similar to the 2nd undefined error, this is an error that only occurs on Safari.

correct

Assign a reasonable value to the object during construction or initialization, don't leave it empty. The above error also occurs when you try to access DOM elements before they are loaded. Read these JavaScript tips to better understand the problem. Notice

One thing you should be aware of is that it's not the same thing as being undefinedin nullJavaScript. This is why we see variations of the error message in both cases. undefinedUsually an uninitialized variable, which null means the value is empty.

4. TypeError: object does not support properties

This is an error that occurs on IE when you call a method of undefined. This is very similar to the error "TypeError: 'undefined' is a function" in Chrome. By now you have learned that different browsers will have different errors for the same logic problem.

correct

This error is a common problem with IE. He further states that this is a common problem on IE, where JS applications use namespace bindings.

In this case, 99.9% of the time the problem is that IE can't bind a method in the current namespace to a thiskeyword. For example, if your JS namespace Rollbarhas methods, in isAwesome.general, if you are in the Rollbarnamespace, you can call methods isAwesomewith the following syntax:

this.isAwesome();

Chrome, Firefox and Opera will happily accept this syntax. IE, it won't. So the safest bet when using JS namespaces is to always prefix with the actual namespace.

Rollbar.isAwesome();

5. TypeError: 'this.show' is not a function

This error occurs when you call an undefined function. You can get this error message in Chrome and Firefox.

Correction The cause of this error is simply because you forgot to define the function or made a typo. This is the simplest case.

However, you can also use more complex cases. This is due to self-referential scopes in callbacks and closures. Let's reproduce this error by using the example given by Jason.

When we execute the above code snippet and click on the page, you will get the error message. This is because functions clearBoardare defined in the window, and anonymous functions are executed in the context of the document.

There are three ways to correct this error.

Legacy Method - This is the old browser compliant solution. We just save thisa reference to the variable and then reference it inside the closure.

Modern way using bind - This is a more modern way of passing the respective references using the bind method.

The modern way of using arrow functions - this is also the modern way. It uses ES6 arrow functions.

6. Not getting RangeError

This error occurs on Chrome mainly because of two things.

1), your recursive function does not terminate.

2), you pass an out-of-range value to the function

Let's use the example given by Jason. Many functions only accept values ​​within a certain range as their input values. For example, Number.toExponential(digits)and Number.toFixed(digits)accepts numbers from 0 to 100, and and Number.toPrecision(digits)accepts numbers from 1 to 100.

in conclusion

Most of these errors are due to null/undefined and scope/closure issues. Now that you know the most common JS errors and their solutions, I highly recommend that you use an error logger such as Sentry to help log some errors while your program is running. This will enable you to find some unknown bugs. Hope you understand the root cause of most JS errors. Finally, happy coding!

Article from the most common JavaScript mistakes and how to fix them

{{o.name}}
{{m.name}}

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324178812&siteId=291194637