JavaScript Intermediate Notes Chapter 3_Javascript Skills

3. Scope
All object-oriented languages ​​have some form of scope, and JavaScript is no exception. In JavaScript, scope is divided by functions, not by blocks (while, if, etc.).
Let’s first look at a simple scope example.

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

In the if block, although The value of foo is changed to "b", but it is still in the global scope, so the output result is "b".
An interesting feature of the browser-based JavaScript language is that all variables belonging to the global scope are properties of the window object.
Look at the code below:

[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

Let’s build on the above example Above, add another function to modify the value of foo. The code is as follows:

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

The result may be a bit surprising to you , but the result is definitely correct. The result of code ② is to output "b" instead of "c". The reason is related to scope. Although change() is called to change the value of foo, the change at this time only

works within the function scope and will not change the value of foo in the global scope. If we want to modify the global value of foo within the change() function, we can remove the variable declaration, for example:

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

In JavaScript, if the variable If not explicitly defined, it is defined globally. So after calling change(), the value of global foo will be modified. The final output is "c".
4. Context object

In JavaScript, code always has a context object, and the code is within this object. The context object is represented by the this variable. This variable always points to the object where the current code is located. The global object is actually a property of the window object. Next, let’s look at an example of a context object.

[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh it to execute ]
On this basis, we Let’s look at another example:

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]
本例中，我们把obj.hide变量的上下文对象变为window对象时，代码写得并不好理解。幸运的是，JavaScript提供了一套更好的方法来解决。
现在我们有请call和apply两位先生上场，通过它们也可以完成同样的功能。先看call：

<script type="text/javascript"> //定义一个对象 var obj = { show : function(){ this.display = "show"; } , hide : function(){ this.display = "hide"; } } alert(obj.display);//此时为undefined obj.show(); //执行show函数后，将display属性跟obj对象联系起来了 alert(obj.display);//"show" //window.hide = obj.hide;//把window.hide指向obj.hide //window.hide();//执行。hide的上下文对象是window对象了，所以this将指向window对象 obj.hide.call( window ); alert(obj.display);//"show"。obj对象的display属性值不变，因为hide的上下文已经改变为window对象了 alert(window.display);//"hide"。 window对象的display属性被更新了 </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

通过obj.hide.call(window)，我们将此时的上下文对象改为window对象。call方法的第一个参数就是上下文对象。
call方法也可以传递更多的参数，如下所示：

<script type="text/javascript"> //定义一个对象 var obj = { show : function(){ this.display = "show"; } , hide : function(msg1,msg2){ this.display = msg1+" , "+msg2; } } alert(obj.display);//此时为undefined obj.show(); //执行show函数后，将display属性跟obj对象联系起来了 alert(obj.display);//"show" //window.hide = obj.hide;//把window.hide指向obj.hide //window.hide();//执行。hide的上下文对象是window对象了，所以this将指向window对象 obj.hide.call( window , "a" , "b" ); //传递3个参数，第一个是上下文对象，后面的是函数的参数 alert(obj.display);//"show"。obj对象的display属性值不变，因为hide的上下文已经改变为window对象了 alert(window.display);//"hide"。 window对象的display属性被更新了 </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

另外apply方法跟call类型，它的第一个参数也是上下文对象，不过后面的参数则是一个数组。如下所示：

<script type="text/javascript"> //定义一个对象 var obj = { show : function(){ this.display = "show"; } , hide : function(msg1,msg2){ this.display = msg1+" , "+msg2; } } alert(obj.display);//此时为undefined obj.show(); //执行show函数后，将display属性跟obj对象联系起来了 alert(obj.display);//"show" //window.hide = obj.hide;//把window.hide指向obj.hide //window.hide();//执行。hide的上下文对象是window对象了，所以this将指向window对象 obj.hide.apply( window , ["a","b"] ); //后面的参数为数组 alert(obj.display);//"show"。obj对象的display属性值不变，因为hide的上下文已经改变为window对象了 alert(window.display);//"hide"。 window对象的display属性被更新了 </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

最后我们来看一个通过上下文，call和apply结合的例子。

<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");//在window对象中调用此函数会失败，因为window对象没有style属性 var div = document.getElementById("abc"); changeColor.call(div , "red");//把上下文改为div。从而this指向的是 id为abc的元素 //changeColor.apply(div , ["red"]);//把上下文改为div。从而this指向的是 id为abc的元素 setBodyColor(); } </script> <div id="abc">CssRain</div> TestTest
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

在setBodyColor函数中，apply的第二个参数是数组，而前面我们讲过，arguments 也是一个伪数组，那么它们2个能联系起来吗？
把 changeColor.apply( document.body , ["blue"]); 改为 changeColor.apply( document.body , arguments );，
然后给setBodyColor();函数传参数。如下代码所示：

<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");//在window对象中调用此函数会失败，因为window对象没有style属性 var div = document.getElementById("abc"); changeColor.call(div , "red");//把上下文改为div。从而this指向的是 id为abc的元素 //changeColor.apply(div , ["red"]);//把上下文改为div。从而this指向的是 id为abc的元素 setBodyColor("blue"); } </script> <div id="abc">CssRain</div> TestTest
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

通过这些例子，你也许对上下文的概念比较熟悉了。上下文在面向对象的编程中非常重要。