JavaScript 中級ノート 第 3 章_JavaScript スキル

3. スコープ
すべてのオブジェクト指向言語には何らかの形式のスコープがあり、JavaScript も例外ではありません。 JavaScript では、スコープはブロック (while、if など) ではなく関数によって分割されます。
まず簡単なスコープの例を見てみましょう。

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

foo の値は "b" に変更されますが、if ブロックはまだグローバル スコープ内にあるため、出力結果は "b" になります。
ブラウザベースの JavaScript 言語の興味深い特徴は、グローバル スコープに属するすべての変数がウィンドウ オブジェクトのプロパティであることです。
以下のコードを見てください:

[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

しましょう上記の例に基づいて構築し、foo の値を変更する別の関数を追加します。コードは次のとおりです:

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

この結果は少し驚くかもしれませんが、結果は間違いなく正しいです。コード②の結果は、「c」の代わりに「b」を出力します。その理由はスコープに関連しており、foo の値を変更するために change() が呼び出されますが、このときの変更は関数スコープ内でのみ機能し、グローバル スコープ内の foo の値は変更されません。

change() 関数内で foo のグローバル値を変更したい場合は、変数宣言を削除できます。例:

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

JavaScript の場合、変数が明示的に定義されていない場合は、グローバルに定義されます。したがって、change() を呼び出した後、グローバル foo の値が変更されます。最終的な出力は「c」です。
4. Context オブジェクト
JavaScript では、コードには常にコンテキスト オブジェクトがあり、コードはこのオブジェクト内にあります。コンテキスト オブジェクトは this 変数によって表されます。この変数は常に、現在のコードが配置されているオブジェクトを指します。

グローバル オブジェクトは、実際には window オブジェクトのプロパティです。 次に、コンテキスト オブジェクトの例を見てみましょう。

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります

] これに基づいて、別の例を見てみましょう:

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]
本例中，我们把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需刷新才能执行]

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