The Javascript language design is not rigorous enough, and many places will make mistakes if you are not careful.
For example, consider the following situations.
Now, we need to determine whether a global object myObj exists, and if it does not exist, declare it. The algorithm described in natural language is as follows:
if (myObj does not exist){ declare myObj; }You may find it easy to write this code. But in fact, the grammatical issues it involves are far more complicated than we think. Juriy Zaytsev pointed out that there are more than 50 ways to determine whether a Javascript object exists. Only when the implementation details of the Javascript language are very clear can they be distinguished.
The first way to write
Based on your intuition, you may think you can write this:
if (!myObj) { myObj = { }; }However, if you run this code, the browser will directly throw a ReferenceError error, causing the operation to be interrupted. What's wrong?
By the way, when the if statement determines whether myObj is empty, this variable does not exist yet, so an error will be reported. Change it to the following and it will run correctly.
if (!myObj) { var myObj = { }; }Why doesn’t the error be reported after adding a var? Does myObj already exist in this case when the if statement makes judgments?
To answer this question, you must know how the Javascript interpreter works. The Javascript language is "parse first, run later". The variable declaration is completed during parsing, so the above code is actually equivalent to:
var myObj; if (!myObj) { var myObj = { }; }Therefore, when the if statement makes judgments, myObj does exist, so there is no error. This is the "code enhancement" effect of the var command. The Javascript interpreter only "elevates" variables defined by the var command, and does not work for variables that do not use the var command and directly assign. This is why it will cause an error if you do not add var.
The second way to write
In addition to the var command, there can be another rewrite and you can also get the correct result:
if (!window.myObj) { myObj = { }; }window is the top-level object of javascript, and all global variables are its properties. Therefore, judging whether myobj is empty is equivalent to judging whether the window object has myobj attribute, so as to avoid the ReferenceError error because myObj is not defined. However, from the standardization of the code, it is best to add var to the second line:
if (!window.myObj) { var myObj = { }; }Or write it like this:
if (!window.myObj) { window.myObj = { }; }The third way to write
The disadvantage of the above writing method is that in some operating environments (such as V8 and Rhino), window may not be a top-level object. So, consider rewriting it as:
if (!this.myObj) { this.myObj = { }; }At the global variable level, this keyword always points to the top-level variable, so it can be independent of different operating environments.
The fourth way to write
However, the above writing is poorly readable, and the pointing of this is variable and error-prone, so it is further rewritten:
var global = this; if (!global.myObj) { global.myObj = { }; }It is much clearer to use the custom variable global to represent the top-level object.
The fifth way to write
You can also use the typeof operator to determine whether myObj is defined.
if (typeof myObj == "undefined") { var myObj = { }; }This is the most widely used method to determine whether a javascript object exists.
The sixth way to write
Since the value of myObj is directly equal to undefined in the case of defined but not assigned, the above writing method can be simplified:
if (myObj == undefined) { var myObj = { }; }There are two places to note here. First, the var keywords on the second line must not be missing, otherwise a ReferenceError error will occur. Secondly, undefined cannot be added with single or double quotes, because the data type of undefined is compared here, rather than the "undefined" string.
The seventh way to write
The above writing method is still valid under the condition of "accurate comparison" (===):
if (myObj === undefined) { var myObj = { }; }The eighth way to write
According to the language design of javascript, undefined == null, so you can also get the correct result by comparing whether myObj is equal to null:
if (myObj == null) { var myObj = { }; }However, although the operation result is correct, semantically, this judgment method is wrong and should be avoided. Because null refers to an empty object that has been assigned to null, that is, this object is actually valued, while undefined refers to an object that does not exist or has no assignment. Therefore, you can only use the "compare operator" (==) here, and if you use the "exact comparison operator" (===) here, you will get an error.
The ninth way to write
You can also use the in operator to determine whether myObj is an attribute of the top-level object:
if (!('myObj' in window)) { window.myObj = { }; }The tenth way to write
Finally, use the hasOwnProperty method to determine whether myObj is a property of the top-level object:
if (!this.hasOwnProperty('myObj')) { this.myObj = { }; }Summarize
1. If you only determine whether the object exists, it is recommended to use the fifth writing method.
2. If in addition to whether the object exists, it is also necessary to determine whether the object has a null value, it is recommended to use the first writing method.
3. Unless otherwise specified, all variables should be declared using the var command.
4. For cross-platform, it is recommended to avoid using window to represent top-level objects.
5. In the Javascript language, null and undefined are prone to confusion. In cases where both may be involved, it is recommended to use the "exact comparison" operator (===).
(over)
The above simple example of how to judge whether a Javascript object exists is all the content I have shared with you. I hope you can give you a reference and I hope you can support Wulin.com more.