JavaScript language design is not rigorous, many places will be careless error.
For example, consider the following scenario.
Now, we want to determine whether a global object MyObj exists, and if not, declare it. The algorithms described in natural language are as follows:
If (MyObj does not exist) {
Declaration of MyObj;
}
You might think it would be easy to write this piece of code. But in fact, it involves grammatical problems that are far more complicated than we think. Juriy Zaytsev points out that there are more than 50 ways to determine whether a JavaScript object exists or not. Only the details of the implementation of the JavaScript language are clear, and it is possible to distinguish between them.
The first form of writing
According to intuition, you might think you could write this:
if (!myobj) {
myobj = {};
}
However, by running this code, the browser throws a referenceerror error directly, causing the run to break. Excuse me, where is the mistake?
Yes, if the IF statement to determine whether myobj is empty, this variable does not exist, it will be an error. Change to the following so that you can run it correctly.
if (!myobj) {
var myobj = {};
}
Why did you add a var and then no more errors? Is this the case where the myobj already exists when the IF statement is judged?
To answer this question, you must know how the JavaScript interpreter works. The JavaScript language is "parse first, then run", when parsing has completed the variable declaration, so the above code is actually equivalent to:
var myobj;
if (!myobj) {
var myobj = {};
}
Therefore, if the statement is made to judge, MyObj does exist, so there is no error. This is the "Code elevation" (hoisting) role of the Var command. The JavaScript interpreter, which only "promotes" the variables defined by the var command, does not work on variables that do not use the var command, directly assigned, and that is why VAR does not cause an error.
The second way
In addition to the Var command, you can have another rewrite and get the correct result:
if (!window.myobj) {
myobj = {};
}
Window is the top-level object of JavaScript, and all global variables are its properties. Therefore, to determine whether the myobj is null equals to determine whether the Window object has a myobj attribute, so as to avoid referenceerror error because myobj is undefined. However, from the normative considerations of code, it is best to add Var to the second line:
if (!window.myobj) {
var myobj = {};
}
or write this:
if (!window.myobj) {
Window.myobj = {};
}
The third way of writing
The disadvantage of this type of writing is that in some running environments (such as V8, Rhino), Windows may not be the top-level object. So, consider changing it to:
if (!this.myobj) {
This.myobj = {};
}
At the level of global variables, the This keyword always points to the top-level variable, so it can be independent of the different running environments.
The fourth way of writing
However, the above writing is less readable, and this point is variable and error prone, so it is further rewritten:
var global = this;
if (!global.myobj) {
Global.myobj = {};
}
Using a custom variable global to represent the top-level object is much clearer.
See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/