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

This article mainly introduces "some of the most common mistakes in JavaScript". In daily operation, I believe many people have doubts about the most common mistakes in JavaScript. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "some of the most common mistakes in JavaScript"! Next, please follow the editor to study!

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:

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

When data is fetched asynchronously, regardless of whether it is obtained in the constructor componentWillMount or componentDidMount, the component is rendered at least once before the data is loaded, and when Quiz is first rendered, 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 first 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:

two。 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:

one

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.

one

Rollbar.isAwesome ()

At this point, the study of "some of the most common mistakes in JavaScript" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.