JavaScript intermediate notes (3)

Next we will explain the scope.

3. Scope
All object-oriented languages have some form of scope, and JavaScript is no exception. In JavaScript, scopes are divided by functions, rather than blocks (while, if, and so on. Let's take a look at a simple example of scope.

<Script type = "text/javascript">
Var foo = "a"; // set the global variable foo
If (true ){
Var foo = "B"; // In the if block, change the value of foo to B. Note: it is still in the global scope.
}
Alert (foo );
</Script>

In the if block, although the foo value is changed to "B", it is still in the global scope, so the output result is "B". One interesting feature of the browser-based JavaScript language is that all variables in the global scope are properties of the window object. See the following code:

<Script type = "text/javascript">
Var foo = "a"; // set the global variable foo
If (true ){
Var foo = "B"; // In the if block, change the value of foo to B. Note: it is still in the global scope.
}
Alert (foo );
Alert ("window attributes:" + window. foo );
Alert (window. foo = foo); // true, which proves that the global variables are consistent with the window attributes.
</Script>

Based on the above example, add a function to modify the value of foo. The Code is as follows:

<Script type = "text/javascript">
Var foo = "a"; // set the global variable foo
If (true ){
Var foo = "B"; // In the if block, change the value of foo to B. Note: it is still in the global scope.
}
Alert (foo );

// Create a function that will modify the foo variable
Function change (){
Var foo = "c"; // modify the value of foo
Alert ("internal function value:" + foo); // code ①
}
Change (); // when calling, foo only works in the function scope, so the foo output below is still "B"
Alert ("external function value:" + foo); // code ②
</Script>

The result may be a bit unexpected, but it must be correct. Code ② outputs "B" instead of "c ". The reason is that the scope is related. Although change () is called to change the value of foo
It works within the function scope and does not change the value of foo in the global scope.
To modify the global foo value in the change () function, we can remove the declaration of the variable, for example:

<Script type = "text/javascript">
Var foo = "a"; // set the global variable foo
If (true ){
Var foo = "B"; // In the if block, change the value of foo to B. Note: it is still in the global scope.
}
Alert (foo );

// Create a function that will modify the foo variable
Function change (){
// Var foo = "c ";
Foo = "c"; // modify the value of foo and remove the var declaration,
Alert ("internal function value:" + foo );
}
Change ();
Alert ("external function value:" + foo );
</Script>

In JavaScript, if a variable is not explicitly defined, it is globally defined. Therefore, after you call change (), the global foo value is modified. The final output is "c ".

4. Context object
In JavaScript, the Code always has a context object, and the code is within this object. Context objects are represented by this variable. This variable always points to the object in which the current code is located. Global objects are actually properties of window objects. Next, let's look at an example of a context object.

<Script type = "text/javascript">
// Define an object
Var obj = {
Show: function (){
This. display = "show ";
},
Hide: function (){
This. display = "hide ";
}
} Alert (obj. display); // This is undefined
Obj. show (); // after the show function is executed, the display attribute is associated with the obj object.
Alert (obj. display); // "show"
</Script>

On this basis, let's look at another example:

<Script type = "text/javascript">
// Define an object
Var obj = {
Show: function (){
This. display = "show ";
},
Hide: function (){
This. display = "hide ";
}
} Alert (obj. display); // This is undefined
Obj. show (); // after the show function is executed, the display attribute is associated with the obj object.
Alert (obj. display); // "show" Window. hide = obj. hide; // Point window. hide to obj. hide.
Window. hide (); // execute. The context object of hide is a window object, so this will point to the window object
Alert (obj. display); // "show ". The value of the display attribute of the obj object remains unchanged because the context of the hide has changed to the window object.
Alert (window. display); // "hide ". The display attribute of the window object is updated.
</Script>

In this example, when we change the context object of the obj. hide variable to a window object, the Code is not easy to understand. Fortunately, JavaScript provides a better solution.

Now we have two gentlemen, call and apply, who can use the same functions. First look at call:

<Script type = "text/javascript">
// Define an object
Var obj = {
Show: function (){
This. display = "show ";
},
Hide: function (){
This. display = "hide ";
}
} Alert (obj. display); // This is undefined
Obj. show (); // after the show function is executed, the display attribute is associated with the obj object.
Alert (obj. display); // "show" // Window. hide = obj. hide; // Point window. hide to obj. hide.
// Window. hide (); // execute. The context object of hide is a window object, so this will point to the window object
Obj. hide. call (window );
Alert (obj. display); // "show ". The value of the display attribute of the obj object remains unchanged because the context of the hide has changed to the window object.
Alert (window. display); // "hide ". The display attribute of the window object is updated.
</Script>

Through obj. hide. call (window), we change the context object to the window object. The first parameter of the call method is the context object. The call method can also pass more parameters, as shown below:

<Script type = "text/javascript">
// Define an object
Var obj = {
Show: function (){
This. display = "show ";
},
Hide: function (msg1, msg2 ){
This. display = msg1 + "," + msg2;
}
} Alert (obj. display); // This is undefined
Obj. show (); // after the show function is executed, the display attribute is associated with the obj object.
Alert (obj. display); // "show" // window. hide = obj. hide; // Point window. hide to obj. hide.
// Window. hide (); // execute. The context object of hide is a window object, so this will point to the window object
Obj. hide. call (window, "a", "B"); // pass three parameters. The first parameter is the context object, followed by the function parameter.
Alert (obj. display); // "show ". The value of the display attribute of the obj object remains unchanged because the context of the hide has changed to the window object.
Alert (window. display); // "hide ". The display attribute of the window object is updated.
</Script>

In addition, for the apply method and call type, the first parameter is the context object, but the following parameter is an array. As follows:

<Script type = "text/javascript">
// Define an object
Var obj = {
Show: function (){
This. display = "show ";
},
Hide: function (msg1, msg2 ){
This. display = msg1 + "," + msg2;
}
} Alert (obj. display); // This is undefined
Obj. show (); // after the show function is executed, the display attribute is associated with the obj object.
Alert (obj. display); // "show" // window. hide = obj. hide; // Point window. hide to obj. hide.
// Window. hide (); // execute. The context object of hide is a window object, so this will point to the window object
Obj. hide. apply (window, ["a", "B"]); // The following parameters are arrays.
Alert (obj. display); // "show ". The value of the display attribute of the obj object remains unchanged because the context of the hide has changed to the window object.
Alert (window. display); // "hide ". The display attribute of the window object is updated.
</Script>

Finally, let's look at an example that combines context, call, and apply.

<Html>
<Head>
<Title> demo </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript">
Function changeColor (color ){
This. style. color = color;
}
Function setBodyColor (){
ChangeColor. apply (document. body, ["blue"]);
}Window. onload = function (){
// ChangeColor ("red"); // call this function in the window object will fail because the window object does not have the style attribute.
Var div = document. getElementById ("abc ");
ChangeColor. call (div, "red"); // change the context to div. This points to the element with the id abc.
// ChangeColor. apply (div, ["red"]); // change the context to div. This points to the element with the id abc.
SetBodyColor ();
}
</Script>
</Head>
<Body>
<Div id = "abc"> CssRain </div>
TestTest
</Body>
</Html>

In the setBodyColor function, the second parameter of apply is an array. As we have mentioned earlier, arguments is also a pseudo array. Can they be associated?Change changeColor. apply (document. body, ["blue"]); To changeColor. apply (document. body, arguments);, and then pass the parameter to setBodyColor. The following code is used:

<Html> <Title> demo </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript">
Function changeColor (color ){
This. style. color = color;
}
Function setBodyColor (){
ChangeColor. apply (document. body, arguments );
} Window. onload = function (){
// ChangeColor ("red"); // call this function in the window object will fail because the window object does not have the style attribute.
Var div = document. getElementById ("abc ");
ChangeColor. call (div, "red"); // change the context to div. This points to the element with the id abc.
// ChangeColor. apply (div, ["red"]); // change the context to div. This points to the element with the id abc.
SetBodyColor ("blue ");
}
</Script>
</Head>
<Body>
<Div id = "abc"> CssRain </div>
TestTest
</Body>
</Html>

Through these examples, you may be familiar with the context concept. Context is very important in object-oriented programming.