시산이 나흘장간다

이번에는 조금 복잡한 이야기를 해볼까요?


  자바스크립트 this 키워드에 대한 설명은 함수 파트에서 함께 진행하려고 하였습니다만 this를 통해 곤란해 하는 분들이 많아 앞당겨 진행하겠습니다. 이번에 드리는 설명을 올바르게 이해하기 위해서는 자바스크립트의 함수, 그리고 객체에 대한 정확한 이해가 밑받침 되어야합니다.


  자바스크립트는 가볍게 쓰는 경향이 있기 때문에 메커니즘을 착각하기도 쉽습니다. 자바스크립트에서 this의 본질은 여타언어 C++, Java등과 다르지 않습니다. this는 메서드를 호출한 호출객체를 가르킵니다. 이를테면


  // 자바스크립트의 객체 생성방법 중 하나
  var people = new Object();
  people.name = "thinkberry";
  people.displayName = function() { alert(this.name); }
  
  peolpe.displayName();
  

  위의 코드를 실행하게 되면 thinkberry가 뜨게 되죠. this는 곧 메서드를 호출한 객체 즉 자신을 가리키게 됩니다. 이것은 어느 언어나 마찬가지입니다. 하지만 자바스크립트는 함수호출객체, 데이터 타입으로서의 함수, 중첩함수, 어휘적 유효범위, HTML의 엘리먼트속에서 this가 사용되는 과정에 사용자로 하여금 혼란에 빠트리게 됩니다. 여러분이 this를 완벽하게 이해하려면 아래의 코드에서 출력결과를 예측해보시기 바랍니다. 

var scope = "global";

function scopeCheck() { 

var scope = "outterLocal";

alert("(1) "+this.scope); // 출력결과 예상

var object = new Object();

object.scope = "field";

object.scopeCheck = function() { alert("(2) "+this.scope); } 

object.scopeCheck(); // 출력결과 예상

function inner() { 

var scope = "innerLocal";

alert("(3) "+this.scope); 

}

inner(); // 출력결과 예상

anotherObject.scope = "anotherField";

anotherObject.scopeCheck = function() { alert("(4) "+this.scope); } 

object.scopeCheck = anotherObject.scopeCheck;

object.scopeCheck(); // 출력결과 예상
}

scopeCheck();