[자바스크립트] this 객체의 정체

this

---

1. this 란?

this는 일반적으로 메소드를 호출한 객체가 저장되어 있는 속성입니다.

function MyClass () {
    this.property1 = "value1";
}

MyClass.prototype.method1 = function() {
    console.log(this.property1);
}

var my1 = new MyClass();
my1.method1();

- 코드 1 -

코드 1 실행 결과

메소드를 호출한 객체는 my1이 되며 method1은 메소드가 됩니다. method1()이 실행되면 메소드 내부에는 자바스크립트 엔진에 의해 this 속성이 생기게 됩니다. 바로 이 this에는 mthod1을 호출한 my1 객체가 저장됩니다.

결론을 먼저 말씀 드리자면,

this가 만들어지는 경우, 1. 일반 함수에서 this -> window 2. 중첩 함수에서 this -> window 3. 이벤트에서 this -> 이벤트 객체 4. 메소드에서 this -> 메소드 객체 5. 메소드 내부의 중첩 함수에서 this -> window

입니다.

2. 일반 함수에서의 this

var data = 10;        // 1
function outer() {
    this.data = 20;   // 2
    data = 30;        // 3

    console.log("1. data = " + data);
    console.log("2. this.data = " + this.data);
    console.log("3. window.data = " + window.data);
}
outer();

- 코드 2 -

코드 2 실행 결과

일반 함수 내부에서 this는 전역 객체인 window가 저장됩니다.

2의 data는 window.data와 동일하기 때문에, 1의 data에 20이 저장됩니다.

3이 실행 되는 경우 먼저 지역 변수 내에서 data를 찾고 없으면 outer()를 호출한 영역에서 찾기 때문에([자바스크립트] 유효범위(Scope)와 호이스팅(Hoisting) 참고) 결론적으로, 3의 data 역시 전역변수인 data에 30이 저장됩니다.

1, 2, 3의 data 모두 전역 변수인 data를 나타냅니다 (1의 data)

3. 일반 중첩 함수에서의 this

var data = 10;            // 1
function outer() {
    function inner() {
        this.data = 20;   // 2
        data = 30;        // 3

        console.log("1. data = " + data);
        console.log("2. this.data = " + this.data);
        console.log("3. window.data = " + window.data);
    }
    inner();
}

outer();

- 코드 3 -

코드 3 실행 결과 

일반 중첩 함수에서 this 역시 window가 됩니다.

이에 따라 2의 this.data는 1의 전역 변수인 data와 동일하기 때문에 1의 data에 20이 저장됩니다.

3의 data는 우선 지역 변수 내에서 data를 찾고, 없다면 outer()를 호출한 영역에서 data를 찾습니다. inner와 outer 모두 data가 없기 때문에, 3의 data 역시 1의 전역 변수인 data가 됩니다. 따라서 1의 전역 변수인 data는 30이 저장됩니다.

1, 2, 3의 data 모두 전역 변수인 data를 나타냅니다 (1의 data)

4. 이벤트 리스너에서의 this

var data = 10;             // 1
$("#myButton").click(function () {
    this.data = 20;    // 2
    data = 30;         // 3

    console.log("1. data = " + data);
    console.log("2. this.data = " + this.data);
    console.log("3. window.data = " + window.data);
});

- 코드 4 -

코드 4 실행 결과

이벤트 리스너에서 this는 이벤트를 발생시킨 객체가 됩니다.

그렇기 때문에 this는 #myButton이 됩니다. 이에 따라 2는 #myButton 객체에 data라는 프로퍼티를 동적으로 추가하는 구문이 됩니다. #myButton의 data 프로퍼티에 20을 저장합니다.

3의 data는 우선 지역 변수 내에서 data를 찾고, 없다면 상위 영역에서 data를 찾게 됩니다. 결국, 3의 data는 1의 전역 변수 data가 되어 30을 저장합니다.

2의 data는 #myButton 객체의 data, 3번 data는 전역 변수인 data를 나타냅니다 (1의 data)

5. 메소드에서의 this

var data = 10;              // 1
function MyClass () {
    this.data = 0;
}
MyClass.prototype.method1 = function () {
    this.data = 20;         // 2
    data = 30;              // 3

    console.log("1. data = " + data);
    console.log("2. this.data = " + this.data);
    console.log("3. window.data = " + window.data);
}

var my1 = new MyClass();
my1.method1();

- 코드 5 -

코드 5 실행 결과

메소드에서의 this는 메소드를 호출한 객체가 됩니다.

2의 data는 객체의 프로퍼티가 되어 코드 my1.data에 20이 저장됩니다.

my1.data 로그 결과

3의 data는 우선 지역 변수 내에서 data를 찾고, 없으면 상위 영역에서 data를 찾게 됩니다. 결국 3의 data는 1의 전역 변수 data가 되어 30을 저장합니다.

2의 data는 my1 객체의 data, 3번 data는 전역 변수인 data를 나타냅니다 (1의 data)

6. 메소드 내부의 중첩 함수에서의 this

var data = 10;             // 1
function MyClass () {
    this.data = 0;
}
MyClass.prototype.method1 = function () {
    function inner() {
        this.data = 20;         // 2
        data = 30;              // 3

        console.log("1. data = " + data);
        console.log("2. this.data = " + this.data);
        console.log("3. window.data = " + window.data);
    }
    inner();
}

var my1 = new MyClass();
my1.method1();

- 코드 6 -

코드 6 실행 결과

객체의 메소드 내부에서 만들어지는 중첩 함수에서 this는 객체가 아닌 window가 됩니다.

이에 따라 2의 data는 1의 전역 변수가 되어 1의 data에 20이 저장됩니다.

3의 data는 우선 지역 변수 내에서 data를 찾고, 없으면 상위 영역에서 data를 찾게 됩니다. 결국은 3의 data 역시 1의 전역 변수 data가 되어 30을 저장합니다.

1, 2, 3의 data 모두 전역 변수인 data를 나타냅니다 (1의 data)

(참조 문헌 : 자바스크립트 + JQuery 완전정복 스터디)