[JavaScript] this 한 번에 정리

this는 생성자 혹은 메서드에서 객체를 가리킬 때 사용하는 키워드다. 각 상황에 따라 this가 어떤 객체를 참조하는지 정리해보자.

 

 

 

목차

1. 기본 this
2. 객체에서 this
3. 함수에서 this
4. 객체 생성자 함수에서 this
5. Event handler에서 this
6. bind(), call(), apply()

 

 

 

1. 기본 this

this는 기본적으로 window 객체를 참조한다.

 

console.log(this) // window

 

 

 

 

2. 객체에서 this

this는 myColor 객체를 참조한다.

 

const myColor = {
    color: "blue",
    checkColor: function() {
        console.log(this.color);
    }
};

myColor.checkColor(); // blue

 

 

 

 

3. 함수에서 this

전역 범위에서 호출된 함수의 this는 window 객체를 참조한다.

 

function checkThis () {
    console.log(this);
}

checkThis(); // Window

 

 

 

스트릭트 모드를 설정하면 window 객체 참조를 방지할 수 있다. 스트릭트 모드에서는 window  객체 대신 undefined로 설정된다. 전역 범위의 this 또한 undefined가 된다.

 

'use strict';

function checkThis () {
    console.log(this);
}

checkThis(); // undefined

console.log(this); // undefined

 

 

 

 

 

4. 객체 생성자 함수에서 this

함수에서 호출된 this는 window 객체를 가리키지만 객체 생성자 함수에서의 this는 생성자 함수가 생성하는 객체를 가리킨다.

 

function Person(name) {
    this.name = name;
    this.showName = function(){
        console.log(name);
    }
}

const person1 = new Person("홍길동");
person1.showName(); // 홍길동

 

 

 

 

 

5. Event handler에서 this

 

이벤트 핸들러에서 this는 이벤트가 발생한 요소를 가리킨다.

 

const box = document.querySelector('.box');

box.addEventListener("click", function() {
    console.log(this); // box
})

 

 

 

 

 

6. bind(), call(), apply()

bind(), call(), apply()를 사용하면 this의 참조 객체를 직접적으로 설정할 수 있다. 

 

bind()

 

const myColor = {
    color: 'blue'
};


function showColor() {
  console.log(this.color);
}

const binding = showColor.bind(myColor);

binding(); // blue

 

 

 

call()

 

function Person(name, age) {
    this.name = name;
    this.age = age;
}

function Female(name, age) {
    Person.call(this, name, age);
    this.gender = "female";
}

const female1 = new Female('영희', 22);

console.log(female1.name); // 영희
console.log(female1.age); // 22
console.log(female1.gender); // female

 

 

 

apply()

apply는 call과 다르게 인수가 담긴 배열을 받는다. 

 

function Person(name, age) {
    this.name = name;
    this.age = age;
}

function Female(name, age) {
    Person.apply(this, [name, age]);
    this.gender = "female";
}

const female1 = new Female('영희', 22);

console.log(female1.name); // 영희
console.log(female1.age); // 22
console.log(female1.gender); // female