this 키워드

this 알아보기

함수를 만들 때는 함수를 실행하는 객체와 연결되는 this라는 키워드도 같이 자동으로 만들어진다.

즉, 함수를 호출할 때 자바스크립트가 자동으로 만들어 삽입하는 객체인 것입니다.

this라는 키워드는 함수의 스코프 안에서 사용할 수 있으며 함수를 속성 또는 메소드로 포함하고 있는 객체를 참조합니다.

다음의 코드를 살펴보자.

JavaScript

var cody = {
    living : true,
    age : 30,
    gender: 'male',
    getGender : function() {
        return this.gender;
    }
};

// 객체내의 메소드를 호출
console.log(cody.getGender()); // male이 기록된다.

위 코드에서 this.gender의 this는 현재 함수를 포함하고 있는 객체인 cody객체를 참조하고 있다. 함수 안에서 사용되는 this는 일반적으로 함수자체가 아닌 함수를 포함하고 있는 객체를 참조한다고 생각하면 됩니다. (단, new 키워드, call(), apply()를 사용하는 경우는 예외)

 그리고 this 키워드는 수정될 수 없다는 점만 제외하면 변수처럼 동작한다.

 this의 값이 어떻게 정해지는지 좀 더 살펴보자.

 어떤 함수에서든 사용할 수 있는 this의 값은 함수가 호출될 때의 컨텍스트에 따라서 달라집니다.

 이 부분은 주의깊게 살펴볼 필요가 있습니다.

다음의 코드를 통해 this값이 어떻게 달라지는지 살펴보자.

JavaScript

var foo = 'foo';
var obj = {foo: 'foo는 obj 객체의 속성이다.'};

// 함수 표현식으로 정의
var sayFoo = function() {
    console.log(this['foo']);
};

// sayFoo함수를 obj객체에 속성 값으로 추가한다
obj.fnFoo = sayFoo;

// obj객체에 속성으로 함수를 추가한 것을 호출
obj.fnFoo(); // foo는 obj 객체의 속성이다. 기록된다

// 함수 표현식으로 정의 된 함수를 호출
sayFoo(); // foo 가 기록된다

위의 코드를 보면 obj.fnFoo와 sayFoo는 분명 같은 함수를 가리키고 있지만 sayFoo()함수가 실행된 곳인 컨텍스트에 따라서 this의 값이 달라진 것을 볼 수 있습니다.

obj.fnFoo()는 함수가 실행된 컨텍스트가 obj인 것이고 sayFoo()가 실행된 컨텍스트는 전역스코프이며 전역스코프의 객체는 글로벌 객체인 window객체를 참조한 것입니다.

var foo = 'foo'는 window객체의 속성으로 정의된 것이기 때문에 foo가 출력된 것입니다.

다시 말하지만 함수를 포함하고 있는 객체를 참조한다는 것을 기억하도록 하자. (=this의 값은 함수가 호출되는 컨텍스트에 따라서 달라진다.)

this

객체(인스턴스) 자신의 참조(번지)를 가지고 있는 키워드입니다.

객체 내부에서 인스턴스 멤버임을 명확하게 하기 위해 this.(쩜) 을 붙일 수 있습니다.

주로 매개변수와 필드명이 동일할 경우 인스턴스 필드임을 명확하게 하기 위해 붙입니다.

Jaehee's WebClub