[Javascript] This 의 영역 정의

Javascript에서의 This는 자바의 개념과는 다르다. 

자바에서는 언제나 자기자신을 가르키지만 여기에서는 의미가 계속적으로 변경된다.

그래서 아직도 많이 헷갈리고, 아리까리 하지만, 테스트 통해 일단 기본적인 것들을 정의해보려고 한다. 

자바스크립에서 function을 콜할 수 있는 방법은 다음과 같이 4가지이다.

Function form              functionObject(arguments) Method form      thisObject.methodName(arguments)      thisObject["methodName"](arguments) Constructor form      new functionObject(arguments) Apply form      functionObject.apply(thisObject, [arguments])

Example Function form  : callFunction(); Method form : myObject.callFunction(); Constructor form : var aa = new myObject();                             aa.callFunction(); Apply form : callFunction.apply( null, null);

<script type="text/javascript"> var myObject = {             value:0,             increment:function(inc){                   this.value+= typeof inc==='number'?inc:1;}              };      //value ==> local valuable.  0      //this.value ==> local valuable.  0 Object안에 {key:value} 이런식으로 들어있으면 그 변수는 local변수가 된다. 그리고 만약에 key로서 function이 들어가면 이 function안에서의 this는 바로 Object가 된다. 따라서 this.value = 0 이된다.

1.myObject.double = function(){ 2.      value = 20;  //Global valuable Change 0->20 3.      alert("myOject.double.this.value = "+this.value);   //this ==> myObject               4.      var testFunc = function(){ 5.            value =2; 6.            alert("myOject.double.testFunc.this.value = " +this.value);                  //this ==> global valuable. Becuase function calling. 2       }; 7.      testFunc(); 8.      return{ 9.            testFunc1 : function(){               alert("myOject.double.return.testFunc1.this.value = "+this.value);   //this ==> myObject             }       };        }; 2.function안에서 새로운 변수를 생성하지 않고 그냥 변수명만 쓰게 되면 전역변수가 된다.(자바스크립트 규칙이다.)   그러나 var value라고 쓰게 되면 local 변수가 된다.   그리고 value와 var value를 함께 쓰게 되면 동일하게 local변수가 된다. 3.이곳에서의 this는 global이 된다. 왜? fuction call을 하기 때문이다. 4.이것은 function안의 function이 들어가 있는 모습이다. 5.여기에서의 value는 global 변수값이 된다. 6.this.value가 2인 이유는 function call이므로 global변수를 찾게 되기때문이다.   만약 2번과 5번 둘다 없으면 undefined가 된다.

myObject.double().testFunc1(); myObject.double(); myObject.increment(2); </script>

대정리!!!!

1.function안에 있으면 this는 무조건 전역변수이다.

2.method안에 있으면 this는 지역변수이다. 그러나 그안의 들어있는 function안의 this는 다시 전역변수를 가리킨다.

  왜? method안의 function을 콜할 수 있는 방법은 function을 direct로 콜하는 방법밖에 없으므로.

3. 지역변수로 만들어 져 있지 않은 변수에 write를 할경우 전역변수로 등록된다.(window에 등록된)

var a = function(){

value =2

}

4.  지역변수와 전역변수의 이름이 같을 경우는 지역변수로 된다.

var a = function(){

value =2;

var value =3;

}

      왜냐하면 자바스크립트는 function안의 var를 미리 체크해서 값은 넣지 않은 변수를 그 무엇보다도 최상단에 정의하는 

      규칙이있기 때문이다.

5.Closure 일 경우..

var value =2; var serial_maker = function(){       var value =3;     var prefix=' ';     var seq=0;     this.value;     value;     return{         set_prefix:function(p){             prefix = String(p);         },         set_seq:function(s){             seq = s;         },         gensym:function(){             this.value;             value;             return {                   test:function(){                         this.value;                         value;                         var result = prefix +seq;                         seq +=1;                         console.log(">>" + result);                         return result;                   }             };         }     }; }();

처음 initial 되었을때는 closure Scope은 생성되지 않는다. 그래서 serial_maker안의 this.value는 이때까지는 2가된다.(글로벌 변수)

그러나 serial_maker.gensym();를 실행하게 되면 Closure scope이 만들어 지게 된다. 여기에서 주목해야 할것은 object안에  value 여기서는 Closure Scope에 있는 value는 최초에 다음과 같은 모습을 띈다. 이 그림은 serial_maker의 function이 정의되기 전이다. 여기에서의 value는 로컬에 정의 해놓은  function이 정의가 되면 그 어디에서도 로컬 변수인 value는 찾을 수 없다. (여기에서는 위에 보이는 빨간색() 때문에 정의가 완료되지 않는 것이다.)