Home >Web Front-end >JS Tutorial >10 ways to determine if a JavaScript object exists
There are many ways to determine whether a JavaScript object exists. However, only if you are very clear about the implementation details of the Javascript language can you tell the difference between them. Let's take a look at 10 methods to determine whether a JavaScript object exists.
Javascript The design of the language is not rigorous enough, and many things will go wrong if you are not careful.
For example, please consider the following situation.
Now, we have to determine whether a global object myObj exists. If it does not exist, declare it. Use natural The algorithm described in the language is as follows:
if (myObj does not exist) { declare myObj; }
You may think that it is easy to write this code. But in fact, the grammatical issues involved are far more complicated than we imagined. Juriy Zaytsev pointed out that there are more than 50 ways of writing to determine whether a Javascript object exists. Only if you are very clear about the implementation details of the Javascript language can you tell the difference between them.
The first way of writing
Based on your intuition, you may feel that you can write like this :
if (!myObj)
{ myObj = { }; }
However, when running this code, the browser will directly throw a ReferenceError error, causing the operation to be interrupted. What is the error?
By the way, when the if statement determines whether myObj is empty, an error will be reported if the variable does not exist yet. Change it to the following and it will run correctly.
if (!myObj)
{ var myObj = { }; }
Why is there no error after adding a var? Could it be that in this case, when the if statement makes a judgment, does myObj already exist?
To answer this question, you need to know how the Javascript interpreter works. The Javascript language is "parse first, then run". The variable declaration has been completed during parsing. The above code is actually equivalent to:
var myObj; if (!myObj )
{ var myObj = { }; }
Therefore, when the if statement makes a judgment, myObj does already exist, and no error will be reported. This is the "code hoisting" effect of the var command. The Javascript interpreter only " Promoting variables defined by the "var command does not work for variables that are directly assigned without using the var command. This is why an error will be reported if you do not add var.
The second way of writing
In addition to the var command, there is another way to rewrite it , 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 attributes. Determining whether myobj is empty is equivalent to It is used to determine whether the window object has the myobj attribute, so as to avoid the ReferenceError error when myObj is not defined. However, from the standardization of the code, it is best to add var:
if (!window.myObj)
to the second line. { var myObj = { }; }
Or write it like this:
if (!window.myObj)
{ window.myObj = { }; }
The third way of writing
The disadvantage of the above way of writing is that in some operating environments (such as V8, Rhino), window may not be the top-level object. Consider rewriting it as:
if (!this.myObj)
{ this.myObj = { }; }
At the level of global variables, the this keyword is always It points to the top-level variable, which can be independent of different operating environments
The fourth way of writing
However, the above way of writing is less readable. The pointer of this is variable and prone to errors. Further rewriting:
var global = this; if (!global.myObj)
{ global.myObj = { }; }
It will be much clearer if you use the custom variable global to represent the top-level object.
The fifth way of writing
You can also use the typeof operator to determine whether myObj is defined.
if (typeof myObj == "undefined")
{ var myObj = { }; }
This is currently the most widely used method to determine whether a JavaScript object exists.
The sixth way to write
When it is defined but not assigned, the value of myObj is directly equal to undefined, as above The writing method can be simplified:
if (myObj == undefined)
{ var myObj = { }; }
There are two places to pay attention to here. The var keyword in the second line cannot be missing, otherwise a ReferenceError error will occur. Secondly, undefined cannot Add single quotes or double quotes. What is compared here is the data type undefined, not the string "undefined".
The seventh way of writing
The above way of writing still works in the case of "exact comparison" (===) Established:
if (myObj === undefined)
{ var myObj = { }; }
The eighth way of writing
According to the language design of javascript, undefined == null, compare whether myObj is equal to null, and you can also get the correct result:
if (myObj == null)
{ var myObj = { }; }
However, although the running result is correct, semantically speaking, this judgment method is wrong and should be avoided. Null refers to something that has been assigned a value of null An empty object means that this object actually has a value, while undefined refers to an object that does not exist or has no value assigned. Therefore, only the "comparison operator" (==) can be used here. If the "exact comparison operator" is used here "(===), an error will occur.
The ninth way of writing
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, use the hasOwnProperty method to determine whether myObj is a property of the top-level object:
if (! this.hasOwnProperty ('myObj'))
{ this.myObj = { }; }
Summary 1. If you only determine whether the object exists, it is recommended to use the fifth way of writing.
2. If in addition to whether the object exists, you also need to determine whether the object has a null value, it is recommended to use the first way of writing.
3. Unless there are special circumstances, all Variables should be declared using the var command.
4. In order to be cross-platform, it is recommended to avoid using window to represent the top-level object.
5. In the Javascript language, null and undefined are easy to cause confusion. In situations where both may be involved at the same time, it is recommended to use "Exact comparison" operator (===).