객체 지향 - this
포스트
취소

객체 지향 - this

함수와 this

  • this는 함수 내에서 함수 호출 맥락(context)를 가리킨다.
  • 맥락이란 것은 상황에 따라 달라지기 때문에,
    함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다.
function test(){
    if(window === this){
        console.log("window === this");
    }
    else{
        console.log("window !== this");
    }
}
test(); //출력 : window === this;

메소드와 this

  • 객체의 소속인 this는 그 객체를 가리킨다.
var t = {
    test : function (){
        if(t === this){
            console.log("t === this");
        }
        else{
            console.log("t !== this");
        }
    }
}
t.test(); //출력 : t === this;

생성자와 this

var funcThis = null; 
            
function Func(){
    funcThis = this;
}

//new를 붙이지 않으면 window의 전역 함수이기 때문에 window가 this가 된다.
var A = Func();
if(funcThis === window){
    console.log('window');
}//출력 : window

//new를 붙이면 객체를 리턴하기 때문에 해당 객체가 this가 된다.
var B = new Func();
if(funcThis === B){
    console.log('B');
}//출력 : B

객체로서의 함수

기본적으로 함수를 만들때에는
function sum(x, y){return x+y;}처럼 만든다.

하지만 이것은 사실
var sum = new Function(‘x’, ‘y’, ‘return x+y;’);처럼
new를 통해서 Function이라는 생성자 함수를 불러내서 만드는 것이다.

그렇지만 이런 식으로 모든 인자와 본문 내용을 저렇게 표현하면
길고 복잡한 코드를 사용할 때 문제가 커질수 있다.
그래서 함수나 배열 등을 문법적으로 표현할 수 있도록 하는 방법을 사용하는데
이런 것을 리터럴이라고 한다.

apply와 this

var a = {}
var b = {}
function test(){
    switch(this){
        case a:
            console.log('a');
            break;
        case b:
            console.log('b');
            break;
        case window:
            console.log('window');
            break;          
    }
}

test();         //출력 : window
test.apply(a);  //출력 : a
test.apply(b);  //출력 : b

//해설
//Function.apply => 메소드명.(함수를 호출하는데 제공될 this의 값 (객체명), 전달될 인수들로 이루어진 배열)
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.