ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • JavaScript this
    MOOC/생활코딩 2016. 4. 23. 21:37
    반응형

    2016.04.23.


    - this


    this는 함수 내에서 함수 호출 맥락 (context)를 의미한다. 이는 상황에 따라서 의미가 달라질수 있다는 뜻인데 함수를 어떻게 호출하느냐에 따라 this가 가리키는 대상이 달라진다는 뜻이다.

    함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.


    1
    2
    3
    4
    5
    6
    7
    8
    var o = {
        func : function(){
            if(o === this){
                document.write("o === this");
            }
        }
    }
    o.func();   
    cs



    객체의 소속인 메소드의 this는 그 객체를 가르킨다. 고로 결과값은 o===this가 출력된다.




    - 생성자의 호출


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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 />');
    }
    cs


    위 코드에서 함수로 호출했을 떄와 new를 이용해서 생성자로 호출했을 때의 차이를 알수있는데 함수로 호출했을 경우에는 window 를 가르킨다. 또한 생성자로 호출한 경우에는 o2 를 출력한다.


    생성자는 빈객체를 만드는데 이 객체 안에서의 this는 만들어진 객체를 가르킨다.


    - apply, call


    함수는 apply와 call이라는 메소드를 가지고있는데 이 메소드로 this의 값을 제어할수있다.




    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    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);
    cs


    첫번째 func()의 경우 window 를 출력하고

    두번째의 func.apply(o)의 경우에는 case가 o 이므로 첫번째 switch문을 실행한다.

    새번째의 func.apply(p)의 경우에도 case가 p 이므로 두번째 switch문을 실행한다.

    반응형

    'MOOC > 생활코딩' 카테고리의 다른 글

    JavaScript Prototype  (0) 2016.04.24
    JavaScript 상속  (0) 2016.04.24
    JavaScript this  (0) 2016.04.23
    JavaScript 전역객체  (0) 2016.04.23
    JavaScript 생성자와 new  (0) 2016.04.23
    JavaScript 함수의 호출  (0) 2016.04.23

    댓글 0

Designed by Tistory.