javascript 중첩 함수(범위 체인)_javascript 기술

중첩된 함수(범위 체인)
함수를 중첩할 때 범위 체인이 실제로 변경되므로 직관적이지 않을 수 있다는 점에 유의하세요. 다음 코드를 Firebug에 넣어 값 변경을 모니터링할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var testvar = 'window attribute'; 🎜>var o1 = {testvar:'1', fun:function(){alert('o1: ' this.testvar '<<');}};
var o2 = {testvar:'2' , fun: function(){alert('o2: ' this.testvar);}};
o1.fun();'1'
o2.fun();'2'
o1. fun.call (o2);'2'

이 글의 첫 번째 예시입니다.

코드 복사 코드는 다음과 같습니다.

var testvar = 'window attribute'; 🎜>var o3 = {
testvar:'3',
testvar2:'3**',
fun:function(){
alert('o3: ' this.testvar);/ /'obj3'
var inner = function(){
alert('o3-inner: ' this.testvar);//'window property'
alert('o3-inner: ' this.testvar2 );/ 정의되지 않음
};
inner();
}
}


변경된 함수로, 이 함수는 원래 함수와 거의 유사하지만 차이점은 내부 함수를 작성하는 방식입니다. 내부 함수가 실행되는 범위는 외부 함수의 범위와 다르다는 점에 유의해야 합니다. Ext를 사용하면 범위 문제를 피하기 위해 함수를 호출할 때 함수의 범위를 지정할 수 있습니다.
변수 선언

변수를 초기화할 때는 반드시 "var" 키워드를 추가해야 합니다. 그렇지 않으면 전역 변수입니다. 예를 들어 다음 예제에서는 함수 내부에 변수가 작성됩니다. 그러나 로컬 변수만 선언하려고 했으나 실제로는 전역 변수의 값을 덮어쓸 수 있습니다. FIREBUG "DOM" 탭에서 "window"를 검사하면 모든 전역 변수를 볼 수 있습니다. "k" 또는 "x" 변수가 있는 경우 해당 변수를 부적절한 범위에 할당했다는 의미입니다. 아래 예를 참조하세요.

코드 복사 코드는 다음과 같습니다. var i = 4 ;

var j = 5;

var k = 7;
var fn = function(){
var i = 6;//var이 없음에 유의하세요. 앞에 있으므로 이 문장의 의미는 변수 k에 8을 할당합니다!
alert(i);//6
alert(j);//5
alert(k '-1');//8-1
x = 1;//이 문장 모든 변수 x를 생성하거나 모든 변수 x를 덮어쓰는 두 가지 상황이 있습니다.
fn()
alert(k '-2'); //8-2(7-2 아님)


이전 예와 크게 다르지 않습니다. 또한 함수에서 k 앞에 var 키워드가 없으므로 지역 변수를 선언하는 대신 특정 값을 전역 변수에 할당합니다. 다시 변수 k. 또 한 가지 주의할 점은 Alert 메소드 실행 시 매개변수 i는 현재 찾을 수 있는 지역변수이고 그 값은 6인데, 매개변수 j는 현재 범위에서 찾을 수 없으므로 범위를 따라 위쪽으로 검색한다. 전역 변수의 j를 찾을 때까지.
Ext에서 범위 지정
앞서 언급했듯이 Ext는 함수 호출 시 범위 문제를 유연하게 처리할 수 있습니다. 내용의 일부는 DJ의 게시물에서 가져온 것입니다.
함수를 호출할 때 이를 각 함수 내의 특수(숨겨진) 매개변수로 생각하면 됩니다. 언제든지 JavaScript는 이것을 함수 안에 넣습니다. 이는 매우 간단한 아이디어에 기반을 두고 있습니다. 즉, 함수가 직접 개체의 멤버인 경우 this의 값은 이 개체입니다. 함수가 객체의 멤버가 아닌 경우 this 값은 일부 전역 객체(일반적으로 브라우저의 창 객체)로 설정됩니다. 이 아이디어는 아래의 내부 함수에서 명확하게 볼 수 있습니다.

함수가 변수에 할당되면, 즉 어떤 개체의 멤버도 아닌 경우 이 매개변수는 Windows 개체가 됩니다. 다음은 Firebug 콘솔에 직접 붙여넣을 수 있는 예입니다.




코드 복사

코드는 다음과 같습니다.

var obj = {
toString:function(){ return 'in the range of obj(in the range)';}, //console.log(의 실행을 용이하게 하기 위해 toString 함수를 다시 작성합니다. this) Output
func: function(){
// 여기서 함수는 "object" 객체에 직접적으로 종속됩니다.
console.log(this)
var innerFunc = function(){
// n여기의 함수는 특정 객체의 직접적인 멤버가 아니며, 단지 다른 함수의 변수입니다.
   };
   innerFunc(); }
}; 🎜>obj.func();
// "obj 범위 내(범위 내)" 출력
// "Window의 일부 관련 내용..." 출력


Missing 이렇게 하면 이와 같은 매개변수 호출이 절약됩니다. 하지만 이 매개변수를 수동으로 변경할 수도 있지만 구문이 약간 다릅니다. 마지막 줄의 "obj.func();"를 다음과 같이 변경합니다.

코드 복사 코드는 다음과 같습니다. obj.func.call(window);

// "Window의 일부 관련 내용..." 출력

// "Window의 일부 관련 내용..." 출력


위의 예에서 볼 수 있듯이 call은 실제로는 또 다른 기능(메서드)입니다. call은 obj.func에 대한 시스템 내장 메소드에 속합니다(JavaScript의 특성에 따라 함수는 객체라는 것을 알고 있습니다.).
이 방법으로 가리키는 범위를 변경하면 예제를 계속 사용하여 innerFunc에서 this 매개변수를 수정할 수 있습니다. "잘못된" 가리키는:

코드를 복사하세요 코드는 다음과 같습니다: var obj = {

toString:function(){ return 'in the range of obj (within 범위)';}, //console.log(this)

func: function(){
)
innerFunc.call(this); 🎜> }
};
obj.func();
// 출력 "obj 범위 내(범위 내)"
// 출력 "obj 범위 내(범위 내) scope)"


Ext의 Scope 구성
Scope를 지정하는 함수는 없고 "this"는 브라우저의 창 개체(예: 이벤트 핸들러 등)를 가리키는 것을 알 수 있습니다. .), 이것의 포인터를 변경하지 않는 한, 범위는 포인터 바인딩에 사용할 수 있는 구성 항목입니다. 내장 호출/적용 메소드인 Ext는 도우미 메소드 createDelegate도 제공합니다. 이 함수의 기본 기능은 이 포인터를 바인딩하지만 createDelegate 메소드에 매개변수를 전달하여 즉시 실행하지 않는 것입니다. 이 매개변수의 범위에서 실행됩니다. 예:




코드 복사

코드는 다음과 같습니다.

var obj = {
toString:function(){ return 'in the range of obj(in the range)';}, //console.log(의 실행을 용이하게 하기 위해 toString 함수를 다시 작성합니다. this) Output
func: function(){
// 여기서 함수는 "object" 객체에 직접적으로 종속됩니다.
console.log(this)
var innerFunc = function(){
// n여기서 함수는 특정 객체의 직접적인 멤버가 아니며, 단지 다른 함수의 변수일 뿐입니다.
   };
   innerFunc = innerFunc.createDelegate(this ); // 여기서는 위임된 함수가 원래 함수를 재정의합니다.
                                                                                                             ~                                                 . 🎜>// "obj 범위 내에서" 출력


이것은 작은 예이고 원리는 매우 기본이므로 잘 소화하시기 바랍니다. 그럼에도 불구하고 실제 작업에서는 여전히 혼란스럽기 쉽지만 기본적으로 위의 이론적 지식에 따라 내용을 분석할 수 있다면 모든 것이 바뀔 것입니다.
또 다른 것이 있습니다. 다음 예를 살펴보세요.

코드 복사

코드는 다음과 같습니다. varsDs.load({callback: function(records){ col_length = varsDs.getCount();//여기의 varD가 범위를 벗어났습니까? //col_length = this.getCount ();/ /이것은 store와 동일합니까? for (var x = 0; x {

colarray[x] = varsDs.getAt(x).get(' hex');
}
}}); 하지만 더 명확하게 작성할 수 있습니다.
var obj = {
callback: function(records){
col_length = varsDs.getCount( );//여기서 varD가 범위를 벗어났습니까?
//col_length = this.getCount();//store와 같은가요?
// ...
}
};


varsDs.load(obj); 이제 함수 콜백이 obj에 직접 걸려 있으므로 this 포인터는 다음과 같습니다. obj.
하지만 참고: 이것은 쓸모가 없습니다. 왜? obj.callback이 최종적으로 실행될 때 무슨 일이 일어날지 모르기 때문입니다. Ext.data.Store의 로드 메소드(모방 구현)를 상상해 보십시오.

코드 복사

코드는 다음과 같습니다. 🎜> ... load : function(config) { var o = {} o.callback = config.callback //로드

o.callback ();

}
...


이 가짜 구현에서 콜백 함수의 범위는 개인 변수 "o"입니다. 일반적으로 함수가 어떻게 호출되는지 모르기 때문에 범위를 선언하지 않으면 콜백 함수에서 이 매개변수를 사용하지 못할 수도 있습니다.