this 정체

정의

this는 일반적으로 메서드를 호출한 객체가 저장되어 있는 속성

 

예제)

<script>
    function MyClass() {
        this.name = “myClass”;
    }

    myClass.prototype.method = function() {
        alert(this.name);
    }

    var m1 = new MyClass();
    m1.method();
</script>

설명

메소드를 호출한 객체는 m1, 이때 method()가 실행되면 메서드 내부에서 자바스크립트 엔진에 의해 this 속성이 생성

this는 method를 호출한 m1 객체가 저장, 일반 객체의 메서드에서의 this는 메서드를 호출한 객체

하지만 this 속성은 메서드를 호출할 때뿐만 아니라 다양한 상황에서 만들어 짐.

 

 

 

다양한 상황에서 this가 만들어지는 경우 

• 일반 함수에서의 this - window 객체 

• 중첩 함수에서의 this - window 객체

• 이벤트에서의 this    - 이벤트를 발생시킨 객체   

• 메서드에서의 this    - 메서드를 호출한 객체   

• 메서드 내부에의 중첩 함수에서의 this - window 객체

 

1. 일반 함수에서의 this

<script>
    var data = 10;

    function outer() {
        this.data = 20;
        data = 30;

        console.log(data);
        console.log(this.data);
        console.log(window.data);
    }

    outer();
</script>

출력 결과
30
30
30

설명

일반함수 내부에서 this는 전역객체인 window에 저장

일반함수 내부에서 지역변수 data를 찾고 없으면 outer()를 호출한 영역에서 찾기 때문에 결론적으로 window에 저장

 

 

2. 중첩함수에서의 this

<script>
    var data = 10;

    function outer() {
        // 중첩함수
        function inner() {
            this.data = 20;
            data = 30;

            console.log(data);
            console.log(this.data);
            console.log(window.data);
        }
        inner();
    }
    outer();
</script>

출력결과
30
30
30

 

설명

inner() 함수는 outer() 함수에서 만들어져 있기 때문에 outer() 내부에서만 사용할 수 있는 전형적인 중첩 함수

일반 중첩함수에서 this는 전역객체인 window에 저장

inner() 함수 실행 시 지역변수 내에서 data가 없으면 inner() 함수를 호출한 outer()의 지역변수에서 찾는다. 여기에도 없으면 outer() 함수를 호출한 영역에서 찾기 때문에 결론적으로 window에 저장

 

 

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

<script>
    var data = 10;

    $(document).ready(function() {
        // 이벤트 리스너 등록
        $(“#button”).click(function() {
            this.data = 20; - ①
            data = 30;      - ②

            console.log(data);
            console.log(this.data);
            console.log(window.data);
        });
    });
</script>

출력결과
30
20
30

 

설명

이벤트 리스너에서의 this는 이벤트를 발생시킨 객체가 된다. 그렇기 때문에 #button이 된다.

①에서 this.data는  #mybutton 객체에 data라는 프로퍼티를 동적으로 추가하는 구문이 된다.

②에서 data는 중첩 함수 구조로 되어 있기 때문에 중첩함수에서의 this와 동일한 구조이기 때문에 전역객체(window)에 저장 

 

 

4. 메서드에서의 this

<script>
    var data = 10; - ①

    function MyClass() {
        this.data = 0;
    }
    MyClass.prototype.method = function() {
        this.data = 20; - ②
        data = 30;      - ③

        console.log(data);
        console.log(this.data);
        console.log(window.data);
    }
    
    // 인스턴스 생성
    var my1 = new MyClass();
    my1.method();
</script>

출력결과
30
20
30

설명

메서드에서의 this는 객체 자신이 저장

②의 data는 객체의 프로퍼티가 되어 이곳에 20이 저장

③은 ①의 전역변수(window) data가 되어 30이 저장

 

 

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

<script>
    var data = 10; - ①

    function MyClass() {
        this.data = 0;
    }
    MyClass.prototype.method = function() {
        function inner() {
            this.data = 20; - ②
            data = 30;      - ③

            console.log(data);
            console.log(this.data);
            console.log(window.data);
        }
        inner();
    }
    
    // 인스턴스 생성
    var my1 = new Class MyClass();
    my1.method();
</script>

출력결과
30
30
30

설명

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

이에 따라 ②의 data는 ①의 전역변수(window)가 되어 20이 저장, 이후 30이 저장

③의 data 역시 전역변수이며 30이 저장

 

 

출처 : 자바스크립트 + jQuery 완전정복 스터디