What is this? 가 이것은 무엇인가요가 아닌  this 란 무엇인가요? 라는 말 장난을 쳐 둔 포스트의 내용이 있습니다. 



객체지향 프로그래밍 (Object Oriented Programming) 언어에 보면 this 라는 애가 등장합니다. 여기서의 this 는 간단해서 Object 자신을 가르키고 있습니다. 

다만 Javascript 의 this 는 이와 달라서 class 내에 선언된다고 해도 꼭 그 class 객체를 지정하지는 않습니다. 이 알송 달송한 javascript 의 this 를 체계적으로 잘 설명한 글 입니다.


왠만하면 번역을 해서 편하게 설명할 까 했는데 너무 양이 많아서 엄두가 나지 않는군요 ㅎㅎ;; 대신 결론 부분만 조금 언급을 하자면 this 는 실행 범위 (scope) 의 영향을 받는 다는 것입니다. 

1. 새로운 실행범위를 만드는 유일한 길은 function 키워드를 이용해서 입니다. 

2. var 용법은 현재 범위에만 통용되는 변수를 만들게 해줍니다. 만약 local 범위에서 var 를 이용해서 변수를 만든다면 그 변수는 외부에서 선언된 같은 이름의 변수를 덮어버립니다. 

3. this 와 argument 를 제외한 모든 변수들은 lexical 범위를 따릅니다. (이 뜻이 뭔고하니 함수나 파일 안 같은 물리적인 범위를 말합니다)

4. this 와 argument 는 (일반적인 OOP 와는 다르게) 각각의 불려지는 Context 환경에 따라 다릅니다. 얘네들을 클로져 (closure) 안에 포함시키고 싶다면 참조 (reference) 시키는 코드를 작성해야 합니다. 

5. this 의 값은 함수가 어떻게 불려지느냐에 따라 정의됩니다. 이것을 조절하고 싶다면 call 이나 apply 를 이횽해야 합니다. 


만약 OOP 에서 사용되는 this 의 용법을 구현하려고 하면 좀 복잡한 방법을 써야 한다고 합니다. 그런데 그렇게 구현하는 방법을 고심할 바에는 javascript 의 문법에 익숙해지는 것이 낫다는 충고를 줍니다.

자세한 내용은 본문에 예제와 함께 잘 정리되어 있습니다. 

요즘 javascript 공부를 하고 있습니다. 인터넷 뜬지가 언제인데.. 지금 와서 웹 공부를 하는지 저도 잘 모르겠지만 이 공부 덕분에 쌓여 있는 책을 제대로 못보고 있는 안타까움이 존재합니다. -0-

문제는 javascript 공부를 할 때 DOM 명령어들을 오타를 내서 자꾸 javascript 가 틀리는 문제가 발생하더군요. 제가 쓰는 Emacs 는 이런일을 아주 깔끔하게 처리할 수 있게 잠깐만 코딩해 주면 되는 것이지요.

즉 Javascript-mode 에 DOM 명령어들을 Keyword 로 등록해 주면 오타가 발생하는지 알아볼 수 있습니다.
추가하는 과정을 살펴보기로 합니다.

.emacs 에 다음과 같은 부분을 추가합니다.


(make-face 'dom-keywords-face)
face 한개를 설정해 줍니다. dom-keywords-face 라는 이름으로 설정해 줍니다.

;; M-x list-color-display
(set-face-foreground 'dom-keywords-face "IndianRed")
face 의 색은 IndianRed 로 해줍니다. 색이 아주 이쁘장합니다. list-color-display 를 실행시키면 emacs 에서 쓸 수 있는 색의 조합이 나타납니다. 명령을 자주 까먹어서 아예 주석으로 설명을 달아놨습니다.

(font-lock-add-keywords 'js-mode '(("\\<getElementById\\|createElement\\|document\\|appendChild\\>" . 'dom-keywords-face)))
(font-lock-add-keywords 'js-mode '(("\\<createTextNode\\>" . 'dom-keywords-face)))
키워드를 추가하는 부분입니다. \< \> 안에 들어 있어야 인식이 되는것 같습니다. (원리는 잘 모름..) 그리고 \\| 로 연속해서 써줄 수가 있습니다.  너무 많으면 차례로 늘어서 쓸 수가 있습니다.
js-mode 가 자바스크립트 파일을 읽어들이면 발동되는 javascript editor mode 입니다.



아주 쉽습니다. 키워드는 배우는 쪽쪽 추가해 주면 됩니다. 아직 배운 키워드가 몇개 없군요. ㅎㅎ



+ Recent posts