Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the common mistakes in JavaScript". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what are the common mistakes in JavaScript.

Common errors in JavaScript Top 10:

In order to make it easy to read, we try to simplify each error description. Next, let's delve into each error to understand what causes it and how to avoid it.

1 、 Uncaught TypeError: Cannot read property

If you are a JavaScript developer, you may see this error more often than you think. This error occurs in Chrome when you read the properties of an undefined object or call its methods. You can easily test in the Chrome developer console.

There are many reasons for this, but one common one is improper initialization of state when rendering UI components.

Let's look at an example that happens in a real application: we choose React, but the same applies to Angular, Vue, or any other framework.

Two important processes:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

The state of the component (for example, this.state) begins with undefined.

When data is fetched asynchronously, whether it is obtained in the constructor componentWillMount or componentDidMount, the component is rendered at least once before the data is loaded, and when the Quiz is rendered * times, the this.state.items is undefined.

It's easy to solve. The easiest way: initialize state in the constructor.

The specific code in your application may be different, but we hope we have given you enough clues to solve or avoid this problem in your application. If not, please read on, as we will cover more examples of related errors below.

2. TypeError: 'undefined' is not an object

This is an error that occurs when reading properties or calling methods on undefined objects in Safari. You can easily test it in Safari Developer Console. This is basically the same as the Chrome error mentioned in the * * point, but Safari uses a different error message prompt.

3 、 TypeError: null is not an object

This is an error that occurs when reading properties or calling methods on empty objects in Safari. You can easily test it in Safari Developer Console.

Interestingly, in JavaScript, null and undefined are different, which is why we see two different error messages.

Undefined is usually an unassigned variable, while null indicates that the value is empty. To verify that they are not equal, try using the strict equality operator =

In our work, one scenario where this error can occur is if you try to use an element in JavaScript before loading it. Because DOM API returns a value of null for a blank object reference.

Any JS code that executes and processes the DOM element should be executed after the DOM element is created.

The JS code is interpreted from top to bottom according to the rules in HTML. So, if the DOM element is preceded by a tag, the JS code inside the script tag will be executed when the browser parses the HTML page. This error occurs if the DOM element has not been created before the script is loaded.

In this example, we can solve this problem by adding a Listener, which will notify us when the page is ready. Once the addEventListener is triggered, the init () method can use the DOM element.

4. (unknown): Script error

This type of scripting error occurs when uncaught JavaScript errors (errors raised by the _ window.onerror handler rather than captured in try-catch) are limited by the browser's cross-domain policy. For example, if you host your JavaScript code on CDN, any uncaught errors will be reported as "script errors" rather than containing useful stack information. This is a browser security measure designed to prevent data from being transferred across domains, otherwise communication will not be allowed.

To get a real error message:

(1) set the 'Access-Control-Allow-Origin' header

Setting the Access-Control-Allow-Origin header to * means that resources can be accessed correctly from any domain.

The settings in Nginx are as follows:

Add the add_header directive to the location block where the JavaScript file is provided:

(2) set crossorigin= "anonymous" in

In your HTML code, for each script for which you set up Access-Control-Allow-Origin, set crossorigin= "anonymous" on the script tag. Before adding the crossorigin attribute to the script tag, be sure to verify that the above header is sent correctly.

In Firefox, if the crossorigin attribute exists but the Access-Control-Allow-Origin header does not exist, the script will not execute.

5 、 TypeError: Object doesn't support property

This is the error that occurs in IE when you call an undefined method. You can test it in the IE developer console.

This is equivalent to the "TypeError:" undefined "isnotafunction" error in Chrome.

Yes, different browsers may have different error messages for the same logic error.

This is a common problem for IE browsers for Web applications that use JavaScript namespaces. In this case, 99.9% of the reason is that IE cannot bind a method in the current namespace to the this keyword.

For example: if you have a namespace Rollbar and method isAwesome in JS. In general, if you are within the Rollbar namespace, you can call the isAwesome method using the following syntax:

This.isAwesome ()

Chrome,Firefox and Opera will embrace this syntax. But IE won't. Therefore, the safest choice when using JS namespaces is to always prefix the actual namespace.

Rollbar.isAwesome ()

6. TypeError: 'undefined' is not a function

This is an error in Chrome when you call an undefined function. You can test in the Chrome developer console and the Mozilla Firefox developer console.

Executing the above code results in the following error:

"Uncaught TypeError:this.clearBoard is not a function".

The reason should be clear, that is, the pointing error caused by the incomprehension of the execution context.

7 、 Uncaught RangeError

This error occurs when you call a recursive function that does not terminate. You can test it in the Chrome developer console.

In addition, this can happen if you pass a value to a function that is out of range.

Many functions accept only a specific range of numbers for their input values. For example:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

ToExponential (digits) and toFixed (digits) accept 0 to 100

ToPrecision (digits) accepts 1 to 100

8. TypeError: Cannot read property 'length'

This is due to an error in reading the length property of an undefined variable. You can test it in the Chrome developer console.

You will usually find the defined length in the array, but you may encounter this error if the array is not initialized or if the variable is in another context. Let's use the following example to understand this error.

If you execute the above code, an error will be reported:

Cannot read property 'length' of undefined

There are two ways to solve this problem:

Or

9 、 Uncaught TypeError: Cannot set property

When we try to access an undefined variable, it always returns undefined, and we cannot get or set any undefined properties. In this case, "Uncaught TypeError: Cannot set property" will be thrown.

10 、 ReferenceError: event is not defined

This error is raised when you try to access an undefined variable or a variable that is outside the current scope. You can test it in a Chrome browser.

If you encounter this error when using event, be sure to use the event object passed in as a parameter. Older browsers like IE provide a global variable event, but not all browsers support it.

Thank you for your reading, the above is the content of "what are the common mistakes in JavaScript". After the study of this article, I believe you have a deeper understanding of the common mistakes in JavaScript, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.