자바스크립트 중급 노트 3장_자바스크립트 기술

3. 범위
모든 객체지향 언어에는 일정한 형태의 범위가 있으며, 자바스크립트도 예외는 아닙니다. JavaScript에서는 범위가 블록(while, if 등)이 아닌 함수로 구분됩니다.
먼저 간단한 범위 예를 살펴보겠습니다.

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

In if 블록은 foo의 값이 "b"로 변경되었지만 여전히 전역 범위에 있으므로 출력 결과는 "b"입니다.
브라우저 기반 JavaScript 언어의 흥미로운 특징은 전역 범위에 속하는 모든 변수가 창 개체의 속성이라는 것입니다.
아래 코드를 보세요:

[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

위의 예제를 기반으로 foo의 값을 수정하는 다른 함수를 추가합니다. 코드는 다음과 같습니다.

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

결과는 다소 놀랄 수도 있지만 결과는 확실히 정확합니다. 코드 ②의 결과는 "c" 대신 "b"를 출력하는 것입니다. 이유는 범위와 관련이 있습니다. foo의 값을 변경하기 위해 Change()가 호출되지만, 현재 변경 사항은

함수 범위 내에서만 작동하고 전역 범위의 foo 값은 변경되지 않습니다. change() 함수 내에서 foo의 전역 값을 수정하려면 변수 선언을 제거하면 됩니다. 예:

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

In JavaScript에서는 변수가 명시적으로 정의되지 않은 경우 전역적으로 정의됩니다. 따라서change()를 호출한 후 전역 foo의 값이 수정됩니다. 최종 출력은 "c"입니다.
4. 컨텍스트 객체

JavaScript에서 코드는 항상 컨텍스트 객체를 가지며 코드는 이 객체 내에 있습니다. 컨텍스트 개체는 this 변수로 표시됩니다. 이 변수는 항상 현재 코드가 있는 개체를 가리킵니다. 전역 개체는 실제로 창 개체의 속성입니다. 다음으로 컨텍스트 개체의 예를 살펴보겠습니다.

[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]
이를 바탕으로 또 다른 예를 살펴보겠습니다.

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]
本例中，我们把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需刷新才能执行]

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