Javascript - 전역객체와 this

Javascript - 전역객체와 this

자바스크립트에서 빼놓을 수 없는 중요한 개념인 this에 대해서 살펴보자.

| 전역객체

function func(){
  alert('hello?');
}
​
func();
​
window.func();

• func는 window라는 전역객체의 메소드이다. (암시적이다)

자바스크립트에서 모든 객체는 기본적으로 전역객체의 프로퍼티이다.

https://opentutorials.org/course/50/44

• ECMAScript에서는 전역객체의 API를 정의해두었다. 그 외의 API는 호스트 환경에서 필요에 따라서 추가로 정의하고 있다. 이를테면 웹브라우저 자바스크립트에서는 alert()이라는 전역객체의 메소드가 존재하지만 node.js에는 존재하지 않는다. 또한 전역객체의 이름도 호스트환경에 따라서 다른데, 웹브라우저에서 전역객체는 window이지만 node.js에서는 global이다.

| 함수와 this

this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.

function func(){
  if(window === this){
    console.log("window === this")
  }
}
​
func();

위 함수는 window객체와 this가 동일한 것을 보여준다.

| 메소드와 this

var o ={
    func : function func(){
      if(o === this){
        console.log("o === this")
    }
  }
}
​
o.func();

• 결과는 o === this 이다.

즉, 객체의 소속인 메소드의 this는 그 객체를 가르키게 되는것이다. (메소드가 소속되어 있는 객체를 가르키게 됨.) 이는 앞의 함수예제에도 적용되는것을 자연스럽게 알 수 있다.
| 생성자와 this

var funcThis = null; 
 
function Func(){
    funcThis = this;
}
var o1 = Func();
if(funcThis === window){
    document.write('window <br />');
}
 
var o2 = new Func();
if(funcThis === o2){
    document.write('o2 <br />');
}

생성자를 사용하면 (new) 새로운 객체가 만들어지므로 결과 값이 다르게 나오는것이다. 전자는 객체가 window객체이고, 후자는 새로운 객체이기 때문이다.

| 객체로서의 함수

function sum(x,y){return x+y;}
//함수 리터럴
//var o={} -> 객체 리터럴
var sum = new Function('x','y','return x+y;');
//var o = new Object()
​

객체를 명시적으로 만들수있지만, 문법적체계인 리터럴을 이용해 함수를 만들고 있는것이다. 함수가 가지고있는 property중에 apply와 call이라는것을 이용할 수 있다.

var o = {}
var p = {}
function func(){
    switch(this){
        case o:
            document.write('o<br />');
            break;
        case p:
            document.write('p<br />');
            break;
        case window:
            document.write('window<br />');
            break;          
    }
}
func();
func.apply(o);
func.apply(p);
​

함수 호출 context를 대입할수 있게된다.

• 일반적 객체지향: 객체와 메소드는 강합 결집력을 가지고있다. (주종관계와 비슷하게)

• 자바스크립트에서의 객체지향: 객체와 함수는 유연하게 그 관계가 작용한다. (주종관계 x) 함수의 위상이 높다.

| 마치며
자바스크립트에서 중요한 개념인 this에 대해서 확실한 개념을 쌓는 계기가 되었고, 또 자바스크립트에서의 객체지향에 대해서도 다시한번 짚게 된것 같았다. 그리고 자바스크립트에서 함수는 객체라는점에 대해서도 다시한번 상기하게 되었고, 자바스크립트에서는 함수는 객체에 소속되는 것이 아닌,(물론 함수가 존재하려면 객체가 있어야하지만) 유연하게 다른 객체에 소속되기도 하면서 좀 더 유연한 구조를 같게 되었다는점도 크게 느끼게 되었다. 최근 블록체인에 대해서 글들을 읽어보며, 탈중앙화, 소속된것에서 개개인의 것으로와 같은 글들을 읽다보니 너무 크게 개념을 대입한것일 수도 있지만 이와 비슷한 맥락(?)일것 같다는 생각도 들었다. 왜냐면 어떤 객체에 소속된것이 아니라, 이제는 함수가 개개인으로서 작용하고, 이는 블록체인의 탈중앙화, p2p(person to person) 과도 유사하게 작용한다고 생각했기 때문이다. 이는 자바스크립트 기술과 블록체인 기술이 결합되면 큰 시너지 효과를 낼수 있지 않을까? 라는 생각까지도 혼자 해봤다. 물론 잘못된 생각일수도 있다..ㅋㅋㅋㅋ 블록체인에 대해서 전혀 모르는 상황이니! 아무튼 this라는 중요한 개념에 대해서 학습해 보게 되었다.