Analyzing questions about JavaScript scope

Everyone who has written a program will be familiar with the concept of scope. In this article, let’s talk about the scope of Javascript.

In Javascript, the global environment itself is an object. In the browser host, this object is window, but when Javascript is used in other non-browser hosts, such as embedded environments, it may be other objects.

I would also like to correct a concept here. Many people think that Javascript is only used in browsers. In fact, Javascript can also be used in many non-Web situations. According to reports, Javascript performs well in some embedded-based application fields. It's also very good. Of course, I've only heard these legends.

Closer to home, when we write: var i=1, we are actually declaring a variable in the window scope.

When we write i=1, we declare a window attribute.

 看这样一段代码：
  [code=javascript">
<script type="text/javascript">
var a = "hello";
b = "world";
Test();
function Test() 
{
alert(a + " " + b);
var a = "welcome";
b = "china";
alert(a + " " + b);
}
alert(a + " " + b);
</script>  
function runCode(id) {
obj = document.getElementById(id); 
var TestWin=open(&#39;&#39;); //打开一个窗口并赋给变量TestWin。 
TestWin.opener = null // 防止代码对论谈页面修改 
TestWin.document.write(obj.value); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。 
TestWin.document.close(); 
} 
var a = "hello";
b = "world";
Test();
function Test() 
{
alert(a + " " + b);
var a = "welcome";
b = "china";
alert(a + " " + b);
}
alert(a + " " + b);

The output results of this code are: undefined world, welcome china, hello china.

Let’s explain them separately:

Above In the article, we said that when Javascript is pre-compiled, all var variables will be created, and the default value is undefined. We can give an example here:

We can write a piece of code like this:

<script type="text/javascript">
alert(a);
alert(b);
var a = "111";
        b = "111";
</script>  [/code]
    alert(a);  
    alert(b);  
    var a = "111";  
        b = "111";

When we execute this script, we can find that undefined pops up first, and then a script error is prompted, indicating that b does not exist. It can be shown that a has been created and initialized to undefined during the precompilation process, but b can only be interpreted sequentially during actual runtime. In fact, the precompiled Javascript code can be almost understood as follows:

<script type="text/javascript">
var a = undefined;
alert(a);
alert(b);
a = "111";
b = "111";
</script>

Next we can talk about the scope of the function. Whenever the code runs into a function, the Javascript engine A new scope will be automatically created, then this new scope will be used as a child scope of the current scope, and then the current code scope will be switched to this new scope. When the code exits the function, this scope is destroyed, returning the code scope to its parent scope.

Okay, the preparations are almost done. Next we will explain the first question: asking why undefined world will be output.

First, the code is precompiled. When entering the Test method, a new scope is opened, and then the global scope is used as its parent scope. Then precompile the method in Test. Like the above code, the method body after the Test method is precompiled is roughly as follows:

function Test() {
    var a = undefined;
    alert(a + " " + b);
    var a = "welcome";
    b = "china";
    alert(a + " " + b);
}

Of course, b cannot be found in the current scope , so he will go to his parent scope, that is, the global scope and find b="world". So this result was produced.

Welcome china pops up for the second time, there is nothing to say.

The third time, hello china pops up. We can understand that var a is just a local variable of method Test, and since b is not declared in advance, it will go to the parent scope to find the corresponding definition.

Okay, next, let’s look at several variations of this method.

<script type="text/javascript">
var a = "hello";
        b = "world";
Test();
function Test() 
{
alert(a + " " + b);
a = "welcome";
b = "china";
alert(a + " " + b);
}
alert(a + " " + b);
</script>

First, we change the var a in the method body to a. Let’s analyze it directly without looking at the answer. First of all, in the pre-compilation stage, there is almost no change in the method body. Therefore, at this time, a and b have to go to their parent scope to find it, so the first time the result should be hello world, the second time there is nothing to say: welcome china, and the third time because a and b are in There is no pre-definition in this scope, so the value in the parent scope is changed, so welcome china.

Let’s continue:

<script type="text/javascript">
var a = "hello";
        b = "world";
Test();
function Test() 
{
alert(a + " " + b);
var a = "welcome";
var b = "china";
alert(a + " " + b);
}
alert(a + " " + b);
</script>

Same as the above analysis, It should output undefined undefined, welcome china, hello world.

<script type="text/javascript">
a = "hello";
b = "world";
Test();
function Test() 
{
alert(a + " " + b);
var a = "welcome";
b = "china";
alert(a + " " + b);
}
alert(a + " " + b);
</script>

It should output undefined china, welcome china, hello china.

After testing, there is no problem.

Therefore, we can conclude that when each variable cannot find its own definition, it will search upward along the chain of action, which is likely to cause unexpected errors, adding a lot of difficulties to troubleshooting. . What's more troublesome is that the variable value on the parent scope may also be modified, so we should try to add var when declaring the variable, although Javascript does not force us to do so.

The above is the detailed content of Analyzing questions about JavaScript scope. For more information, please follow other related articles on the PHP Chinese website!