프로그래머스 - this

이한결·2023년 1월 27일

this 스파르타코딩 여정 19일차 항해99

부트 캠프

목록 보기

29/98

1월 27일 여정 19일차이다.

new바인딩? 명시적 바인딩? 암시적 바인딩? 기본 바인딩?

this는 여러가지로 자바스크립트에서 헷갈리는 부분이다.

오늘의 Today I Learned

problem

자바스크립트의 this는 기본적으로 상황에 따라서 this에 바인딩되는 값이 달라진다. 그럼 어떻게 달라지는지 알아보겠다.

try

자바스크립트의 this에 대해서 자세하게 나온 것이 없었다. 그래서 여러 문서들을 다 찾아보며 나름대로 정리하였다.

solve

기본적으로 객체 지향 언어에서 this는 자기 자신을 가르킨다. 하지만 자바스크립트에서는 그 의미가 모호해 질 수 있다.
그 이유 중 하나가 바로 자바스크립트 함수는 객체이고, 그중에서도 일급 객체이기 때문이다. 그래서 밑에와 같은 역할을 하게 된다.

변수나 데이터를 저장.

함수의 인자로 저장.

함수의 반환 값으로 사용.

1. this의 기본 바인딩


console log(this) === window 

function 함수 () {
console.log(this) === window

}

일반적으로 브라우저에서 this를 콘솔에 찍어보면 window라는 전역객체가 나온다.

console log(this) === window 

function 함수 () {
console.log(this) === undefined

}

똑같은 this이지만 위의 예시는 엄격모드에서 실행한 것이다. 차이점은 함수에서 실행 했을때이다. undefined와 window가 나오는 것이다.

그 외에 node 환경에서 실행 했을 시에 비어있는 객체가 출력이 된다.

2. 명시적 바인딩

var someone = {
    name: '이한결',
    whoAmI: function () {
        console.log(this);
    },
};

var bindedWhoAmI = myWhoAmI.bind(someone);
myWhoAmI()

위 코드는 예시를 위해서 쓴 코드이다. this는 자바스크립트에서 쓰일 경우 의미가 상황에 따라서 매우 모호해 질 수 있다. 그러나 여기서는 'myWhoAmI.bind()' 여기에 집중해야 한다. 여기서 bind()는 this라는 키워드가 someone을 가르키도록 설정한 것이다.
bind()외에 call() apply()가 존재한다.

3. 암시적 바인딩

var 오브젝트 = {
    data: {
        함수() {
            console.log(this);
        },
    },
};

자바스크립트에서 this를 쓰면 가장 많이 헷갈리는 부분이다. 일단 기본적으로 위의 예시에서는 this가 오브젝트 내 함수안에서 쓰고 있기 때문에 그 함수를 가지고 있는 오브젝트를 뜻한다.

4. new 바인딩

function 기계() {
    this.이름 = 'Kim';
}
var 오브젝트 = new 기계();

constructor 안에서 쓰면 constructor로 새로생성되는 오브젝트(instance)를 뜻한다. 즉 기계 오브젝트 안에 이름을 뜻한다. 여기서 this는 기계라는 오브젝트 안에 name을 뜻한다.

추가적으로,

document.getElementById('버튼').addEventListener('click', function (e) {
    console.log(this);
    console.log(e.currentTarget);
});

여기서 this는 e.currentTarget랑 똑같다.

knew

이렇게 tihs의 4 + 1가지의 바인딩에 대해 보았다. this는 기본적으로 규칙이 있다.
일단 this가 쓰였을 때 코드 안에 new라는 것이 존재하면 기본적으로 new에 제일 먼저 바인딩 된다. 그리고 그 다음은 명시적 바인딩 그 다음 암시적 제일 마지막이 기본 바인딩이다.