3, scope
All object-oriented languages have some form of scope, and JavaScript is no exception. In JavaScript, scopes are divided by functions, not by blocks (while,if).
Let's take a look at a simple scope example.
<script type= "Text/javascript" > var foo = "a"; Set global variable Foo if (true) {var foo = "B";//In the If block, change the value of Foo to B, note: This is also in the global scope} alert (foo); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In the If block, although the value of Foo is changed to "B", it is still in the global scope, so the output is "B".
One interesting feature of the browser-based JavaScript language is that all variables that belong to the global scope are properties of the Window object.
Look at the following code:
<script type= "Text/javascript" > var foo = "a"; Set global variable Foo if (true) {var foo = "B";//In the If block, change the value of Foo to B, note: This is also in the global scope} alert (foo); Alert ("Window's properties:" +window.foo); Alert (Window.foo = = foo);//true, proof that global variables and window properties are consistent </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
On the basis of the example above, we add a function to modify the value of Foo, the code is as follows:
<script type= "Text/javascript" > var foo = "a"; Set global variable Foo if (true) {var foo = "B";//In the If block, change the value of Foo to B, note: This is also in the global scope} alert (foo); Create a function change () {var foo = ' C ' that modifies the Foo variable ()//modify Foo's value alert (the value inside the function is: +foo);//Code ①} change ();//Then call, Foo is only in function Works in a domain, so the foo or "B" alert ("outside of the function") is output below: "+foo"; Code ②</script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The result may be a little unexpected, but the result is certainly correct. The result of the code ② is the output "B", not "C". The reason is the scope, although calling change () changes the value of Foo, but the change at this time is only
Works within a function scope and does not change the value of Foo in the global scope.
If you want to modify the value of the global Foo within the change () function, we can remove the declaration of the variable, for example:
<script type= "Text/javascript" > var foo = "a"; Set global variable Foo if (true) {var foo = "B";//In the If block, change the value of Foo to B, note: This is also in the global scope} alert (foo); Create a function change () {//var foo = ' C ' that modifies the Foo variable; foo = "C";//change the value of Foo, remove the Var declaration, alert ("The value inside the function is:" +foo); Change (); Alert ("The value outside of the function is:" +foo); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In JavaScript, if a variable is not explicitly defined, it is defined globally. So when change () is invoked, the value of global Foo is modified. The final output "C".
4, Context Object
In JavaScript, code always has a context object, and the code is within that object. The context object is represented by the this variable. This variable always points to the object where the current code is.
The global object is actually a property of the Window object.
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);//At this point undefined obj.show ();//After performing the show function, the display property is associated with the Obj Object alert (obj.display);/"Show" < /script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
On this basis, we look at one more 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 property is associated with the Obj Object alert (obj.display);//"window.hide" = obj.hide;//to point window.hide to Obj.hide Window.hide ()//execute. The context object for Hide is the Window object, so this will point to Window object Alert (obj.display);//"show". The Display property value of the Obj object is unchanged because the context of the hide has been changed to alert (window.display) for the Window object,//"Hide". The Display property of the Window object was updated </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In this case, the code is not well understood when we turn the context object of the Obj.hide variable into a Window object. Fortunately, JavaScript offers a better way to solve it.
Now we have the call and apply two gentlemen, and they can do the same thing. 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 performing the show function, associate the display property with the Obj Object alert (obj.display);//"//window.hide" = obj.hide;//to point window.hide to Obj.hide// Window.hide ()//execute. The context object for Hide is the Window object, so this will point to Window Object Obj.hide.call (window); alert (obj.display);//"show". The Display property value of the Obj object is unchanged because the context of the hide has been changed to alert (window.display) for the Window object,//"Hide". The Display property of the Window object was updated </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
With Obj.hide.call (window), we change the context object at this time to a Window object. The first parameter of the call method is the context object.
The call method can also pass more arguments, 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 performing the show function, associate the display property with the Obj Object alert (obj.display);//"//window.hide" = obj.hide;//to point window.hide to Obj.hide// Window.hide ()//execute. The context object for Hide is the Window object, so this will point to Window object Obj.hide.call (window, "a", "B"); Pass 3 arguments, the first is the context object, followed by the function's parameter alert (obj.display);/"Show". The Display property value of the Obj object is unchanged because the context of the hide has been changed to alert (window.display) for the Window object,//"Hide". The Display property of the Window object was updated </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The Apply method is also the call type, and the first argument is the context object, but the following argument is an array. 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 performing the show function, associate the display property with the Obj Object alert (obj.display);//"//window.hide" = obj.hide;//to point window.hide to Obj.hide// Window.hide ()//execute. The context object for Hide is the Window object, so this will point to the Window object obj.hide.apply (window, ["A", "B"]); The following argument is an array of alert (obj.display);//"show". The Display property value of the Obj object is unchanged because the context of the hide has been changed to alert (window.display) for the Window object,//"Hide". The Display property of the Window object was updated </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Finally, let's look at an example of a combination of context, call, and apply.
<textarea id="runcode98212"><ptml> <pead> <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");//Calling this function in the Window object will fail because the window object does not have the style attribute var div = Document.getelem Entbyid ("abc"); Changecolor.call (Div, "red");//change context to Div. Thus this points to the element//changecolor.apply (Div, ["Red"]) with the ID ABC;//to the Div. Thus this points to the element Setbodycolor () with the ID ABC; } </script> </pead> <body> <div id= "abc" >CssRain</div> testtest </body> </pt Ml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In the Setbodycolor function, the second argument to apply is an array, and as we've said before, arguments is also a pseudo array, so are 2 of them connected?
Put Changecolor.apply (document.body, ["Blue"]); Changed to Changecolor.apply (document.body, arguments);
Then give Setbodycolor () the function pass parameter. As shown in the following code:
<textarea id="runcode73645"><ptml> <pead> <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");//Calling this function in the Window object will fail because the window object does not have the style attribute var div = Document.getelem Entbyid ("abc"); Changecolor.call (Div, "red");//change context to Div. Thus this points to the element//changecolor.apply (Div, ["Red"]) with the ID ABC;//to the Div. Thus this points to the element Setbodycolor ("blue") with the ID ABC; } </script> </pead> <body> <div id= "abc" >CssRain</div> testtest </body> </pt Ml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
With these examples, you may be familiar with the concept of context. Contexts are important in object-oriented programming.
