javascript 에서의 this 키워드

 

 

java를 공부하다보면 중요한 개념으로 this 라는 키워드를 만나게 된다.

java에서는 보통 다음과 같은 경우에 만나볼 수 있다.

 

public class Test {
    private String name;
    private int age;
    public Test() {}
    public Test(String name, int age) {
        this.name = name;
        this.age = age;
    }
    
    public static void main(String[] ar) {
    
    }
}

 

this가 사용된 부분은 6, 7 라인이다.

여기서 this는 this 키워드가 작성된 클래스 자기 자신을 뜻한다.

그래서 5라인에서의 name, age와 구분하기 위해 자기 자신임을 뜻하는 this를 사용하고 있는 부분이다.

 

그 증거로 다음과 같은 소스로 확인해볼 수 있다.

 

public class Test {
    private String name;
    private int age;
    public Test() {}
    public Test(String name) {
        this.name = name;
    }
    public Test(int age) {
        age = age;
    }
    public void disp() {
        System.out.println("name : " + name + ", age : " + age);
    }
    
    public static void main(String[] ar) {
        // this 키워드를 사용한 경우
        Test t1 = new Test("xxxelppa");
        t1.disp();
        
        // this 키워드를 사용하지 않은 경우
        Test t2 = new Test(21);
        t2.disp();
    }
}

 

[실행결과]

name : xxxelppa, age : 0 name : null, age : 0

 

 

17라인의 t1 객체에서 사용한 5라인의 생성자를 보면, this 키워드를 사용하여

자기 자신의 변수와 매개변수로 넘어온 변수를 구분해서 사용하고 있기 때문에 실행결과의 첫번째 라인과 같이 정상적으로 name이 할당됨을 볼 수 있다.

 

반면, 21라인에서 t2를 생성할 때 사용한 생성자는 8라인에 정의되어 있는데

내용부를 보면 age를 age에 담고 있다.

물론, 매개변수와 클래스의 변수명이 다르면 지금과 같은 상황은 생기지 않지만, 변수명이 동일할 경우 구분할 수 없기 때문에

9라인에서 사용된 this가 없는 age는 모두 자신과 가장 가까운 곳에 있는 매개변수 age를 바라보게 된다.

그래서 9라인의 뜻은, 매개변수로 받은 age에 매개변수 age를 담아라.

즉, 21 = 21 의 연산을 하고 있는 것이다.

 

그렇기 때문에 22라인의 t2.disp()의 결과의 age값이 0으로 할당되지 않음을 볼 수 있다.

 

 

 

 

 

이번 게시글의 목적은 java에서의 this가 아니므로 여기서 정리를 하고

본격적으로 javascript에서의 this에 대해 알게된 내용을 기계적으로 정리하려 한다.

 

결론부터 얘기하면, javascript의 this는 호출 방법에 따라 달라진다.

 

 

 

 

함수를 호출하는 방법에는 네가지가 있다.

1. function을 선언하고 이름으로 호출하는 경우로 일반 함수 호출 이라고 한다.

2. object에 function을 담아 오브젝트의 멤버로써 호출하는 경우로 멤버 함수로의 호출 이라고 한다.

3. javascript의 내장함수인 call을 이용한 호출 방법.

4. javascript의 내장함수인 apply를 이용한 호출 방법.

 

각기 네가지 호출 방식에 따라 this는 경우에 따라 같을 수는 있으나, 서로 다른 것을 나타낸다.

 

 

728x90

 

 

개발자 도구에서 다음의 코드를 작성해보자.

function thisTest() {
    return this.toString();
}
thisTest();

 

thisTest라는 function을 선언하고 호출하는 모습이다.

이 코드의 실행 결과는 다음과 같다.

 

[실행결과]

"[object Window]"

 

즉, 일반함수의 경우 this는 글로벌 객체인 Window를 나타낸다.

 

 

 

두번째 함수 호출 방식인 오브젝트를 선언해서 this를 출력해보기 위해 다음의 코드를 작성해보자.

var thisTest2 = {
    exec : thisTest,
    toString : function() {
        return "[object thisTest2]";
    }
}
thisTest2.exec();

 

[실행결과]

"[object thisTest2]"

 

2라인의 thisTest는 앞서 정의한 thisTest를 뜻하며,

3라인의 toString은 thisTest2의 toString을 재정의한 것으로

만약 exec의 호출 function의 thisTest안에서 this가 thisTest2를 바라보고 있다면 바로 3라인에서 재정의한 toString을 호출한 것이다.

그리고 그 실행 결과로 exec를 호출하여 thisTest를 실행한 결과 this가 바라보는 것이 thisTest2라는 것을 알아낼 수 있다.

 

즉, 오브젝트의 멤버로써 호출할 경우 이 오브젝트를 소유한 객체를 this에 넘겨준다.

 

 

 

마지막으로 call과 apply를 사용할 경우에는

매개변수를 넘겨주느냐 아니냐에 따라 this가 달라지는 것을 볼 수 있다.

.call() 이나 .apply() 를 사용할 경우 Window 객체를

그 이외에 매개변수를 넘겨주면, 해당 매개변수의 객체를 바라보게 된다.

(여기서 예외는 매개변수로 undefined를 넘겨주면 Window를 바라보도록 되어있다.)

 

ECMAScript의 표준 문서를 보면 이러한 결과가 나오는 이유를 알 수 있다고 하는데,

부끄럽게도 보고도 이해하지 못했다.

 

나중에 이해하는 날이 오리라 믿으며 우선 끝까지 한번 학습을 할 계획이다.

언어 공부의 시작은 암기라고 ..

자바를 처음 배울 때 무슨 뜻인지도 모르고 public static void main(String[] ar)을 달달 외우던 때로 돌아온 기분이다.

선암기 후이해.

 

정확한 원인은 이해하지 못했지만, 코드를 보면 어떤 결과가 나오는지부터 알아가려한다.

 

 

 

 

가장 중요한 결론은, javascript에서의 this는 다른 언어의 this와 상당히 다른 모습을 가지고 있다는 것이다.