ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Javascript] this란?
    JavaScript 2019. 11. 30. 20:01

    this란?

     this는 일반적으로 메서드를 호출한 객체가 저장되어 있는 속성입니다. 하지만 this 속성은 메서드를 호출할 때뿐 아니라 일반 함수를 호출할 때도 만들어지며 이벤트 리스너가 호출될 때에도 this 속성이 만들어집니다. 문제는 this 속성에 저장되는 값이 동일한 값이 아니라 각각 다르다는 점입니다.

     

    this가 만들어지는 경우

    1.일반 함수에서의 this (window 객체)

    2.일반 중첩 함수에서의 this (window 객체)

    3.이벤트 리스너에서의 this (이벤트를 발생시킨 객체)

    4.메서드에서의 this (메서드를 호출한 객체)

    5.메서드 내부의 중첩 함수에서 this (window 객체)


    1.일반 함수에서의 this

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    var data = 10;
     
    function thisFn(){
        
        this.data = 20;
        
        console.log("this.data = 20; 실행한 후 ===== ===== =====");            
        console.log("1.data : " + data);
        console.log("2.this.data : " + this.data);
        console.log("3.window.data : " + window.data);
        
        data = 30;
        
        console.log("data = 30; 실행한 후 ===== ===== =====");            
        console.log("1.data : " + data);
        console.log("2.this.data : " + this.data);
        console.log("3.window.data : " + window.data);
    }
     
    thisFn();
    cs


    출력결과

    this.data = 20; 실행한 후 ===== ===== =====

    1.data : 20

    2.this.data : 20

    3.window.data : 20


    data = 30; 실행한 후 ===== ===== =====

    1.data : 30

    2.this.data : 30

    3.window.data : 30


    설명

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


    2.일반 중첩 함수에서 this

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    var data = 10;
     
    function thisOuterFn(){
     
        function thisInnerFn(){
     
            this.data = 20;
     
            data = 30;
     
            console.log("1.data : " + data);
            console.log("2.this.data : " + this.data);
            console.log("3.window.data : " + window.data);
        }    
     
        thisInnerFn();
    }
     
    thisOuterFn();

    cs

    출력결과

    1.data : 30

    2.this.data : 30

    3.window.data : 30


    설명

     thisInnerFn() 함수는 thisOuterFn() 함수에 만들어져 있기 때문에 thisOuterFn() 내부에서만 사용할 수 있는 전형적인 중첩 함수입니다. 따라서 일반 중첩 함수에서 this 역시 window가 됩니다.


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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    var data = 10;
            
    $(document).ready(function(){
        
        $("#thisButton").click(function(){
     
            this.data = 20;
            
            console.log("this.data = 20; 실행한 후 ===== ===== =====");            
            console.log("1.data : " + data);
            console.log("2.this.data : " + this.data);
            console.log("3.window.data : " + window.data);
            
            data = 30;
            
            console.log("data = 30; 실행한 후 ===== ===== =====");            
            console.log("1.data : " + data);
            console.log("2.this.data : " + this.data);
            console.log("3.window.data : " + window.data);
        });
    });

    cs

            

    출력결과

    this.data = 20; 실행한 후 ===== ===== =====

    1.data : 10

    2.this.data : 20

    3.window.data : 10


    data = 30; 실행한 후 ===== ===== =====

    1.data : 30

    2.this.data : 20

    3.window.data : 30


    설명

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


    4.메서드에서의 this

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    var data = 10;
     
    function thisFn() {
     
        this.data = 0;
    }
     
    thisFn.prototype.thisMethod=function(){
     
        this.data = 20;
        
        console.log("this.data = 20; 실행한 후 ===== ===== =====");            
        console.log("1.data : " + data);
        console.log("2.this.data : " + this.data);
        console.log("3.window.data : " + window.data);
        
        data = 30;
        
        console.log("data = 30; 실행한 후 ===== ===== =====");            
        console.log("1.data : " + data);
        console.log("2.this.data : " + this.data);
        console.log("3.window.data : " + window.data);
    }
     
    var thisFn = new thisFn();
     
    thisFn.thisMethod();

    cs


    출력결과

    this.data = 20; 실행한 후 ===== ===== =====

    1.data : 10

    2.this.data : 20

    3.window.data : 10


    data = 30; 실행한 후 ===== ===== =====

    1.data : 30

    2.this.data : 20

    3.window.data : 30


    설명

     메서드에서 this는 객체 자신이 저장됩니다.


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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    var data = 10;
     
    function thisOuterFn() {
     
        this.data=0;
    }
     
    thisOuterFn.prototype.thisMethod = function(){
        
        function thisInnerFn(){
        
            this.data = 20;
            
            console.log("this.data = 20; 실행한 후 ===== ===== =====");            
            console.log("1.data : " + data);
            console.log("2.this.data : " + this.data);
            console.log("3.window.data : " + window.data);
            
            data = 30;
            
            console.log("data = 30; 실행한 후 ===== ===== =====");            
            console.log("1.data : " + data);
            console.log("2.this.data : " + this.data);
            console.log("3.window.data : " + window.data);
        }
     
        thisInnerFn();
    }
     
    var thisOuterFn = new thisOuterFn();
     
    thisOuterFn.thisMethod();

    cs


    출력결과

    this.data = 20; 실행한 후 ===== ===== =====

    1.data : 20

    2.this.data : 20

    3.window.data : 20


    data = 30; 실행한 후 ===== ===== =====

    1.data : 30

    2.this.data : 30

    3.window.data : 30


    설명

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

    댓글 0

Designed by Tistory.