[JavaScript] 자바스크립트 함수 호출 방법1 :this는 어떤 객체?

this 란?

this는 함수 내에서 함수 호출 맥락(context)를 의미한다.

즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 

 

함수 호출 방법 4가지

• 일반적인 호출방법 : func()
• 객체에 정의된 메서드 호출방법 : obj.func()
• call과 apply를 이용한 함수 호출방법 : func.call, func.apply
• 생성자 함수 호출방법 : new Func()

 

오늘은 일반적인 함수 호출 방법과 객체에 정의된 메서드 호출 방법을 통해 this를 완전 정복 ! 할 것이니 잘 따라오길 ~

 

1. 일반적인 호출방법

첫번째로는 일반적인 호출 방법으로 함수명( ); 으로 호출하는 것이다.

이 때 this가 가리키는 것은 window 객체 를 바라본다는 사실 !

 

다음 코드를 보며 살펴봅시다.

var count = 0;

function visit(){
    var count = 2;
    this.count++;
    console.log(count);
    console.log(this.count);
}

visit();    // 일반적인 함수 호출 방법

위와 같이 visit함수를 호출할 때 어떤 변수의 count가 증가하게 될까?

바로 전역변수의 count가 증가하여 2와 1이 출력된다.

 

2. 객체에 정의된 메서드 호출 방법

두번째로는 객체에 정의된 메서드 호출 방법으로 오브젝트명.함수명( );  으로 호출한다.

이 때 this가 가리키는 것은 함수가 정의되어있던 object를 바라본다. 

 

var count = 0;
var myObj = {
    count : 0;
    visit : function(){
        this.count++;
    }
}

myObj.visit();
console.log(myObj.count);    // 1 
console.log(window.count);    // 0

콘솔 출력값을 보면 알 수 있듯이 visit함수의 this는 myObj의 count를 가리킨다는 것을 알 수 있다.

 

심화 예제

여기까지 이해가 되었다면 조금 더 응용된 코드를 보도록 하자 !

var count = 0;
var myObj = {
    count : 0,
    visit : function(){
        this.count++;
        var visit2 = function(){
            this.count++;
        }
        visit2();
    }
}

myObj.visit();
myObj.visit();

console.log(myObj.count);    
console.log(window.count);

이 때 콘솔은 어떻게 찍힐까? 

대부분 4와 0이 출력될 것으로 예상하지만, 2와 2가 출력된다.

 

자세히 살펴보자

myObj.visit();

먼저, 위와 같은 호출 방법은 오브젝트명.함수명( ); 호출 방법으로 이 때 this가 가리키는 것은 myObj의 count이다.

var visit2 = function(){
    this.count++;
}
visit2();

 

또한 visit함수 내에 정의된 visit2 함수에서의 this가 가리키는 것은 전역객체, 즉 window를 가리키고 있다.

 

그 이유는 visit2함수를 일반적인 호출 방법으로 호출했다는 것을 보면 알 수 있다.

그렇기 때문에 myObj.count와 window.count는 2와 2가 찍히는 것!

 

 

this는 함수 안에서 사용할 수 있는 일종의 변수이면서 그 함수를 어떻게 호출하느냐에 따라서 변수의 값이 달라지니

완벽히 이해하고 잘 사용하길 바란다 !