this
this란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. 자바스크립트에서 this 는 호출방식에 따라서 동적으로 결정됩니다.
binding
binding이란 함수 또는 메서드를 호출한 대상에 실제 함수를 연결해주는 것입니다. 자바스크립트에서 this 는 어떤 환경에서 사용하는지에 따라 this 에 바인딩되는 객체가 달라진다.
전역 환경
웹 브라우저, 전역 환경에서 this 는 전역 객체인 window 가 바인딩됩니다.
console.log(this === window); // true함수 내부
단순 호출
전역에서 함수를 호출하면 this 는 전역 객체인 window 가 바인딩됩니다.
function returnThis() {
return this;
}
console.log(returnThis() === window); // true
객체의 메소드 호출
함수를 어떤 객체의 메서드로 호출하면 this 의 값은 그 객체가 바인딩됩니다.
function returnThis() {
return this;
}
const obj = {
name: 'obj',
returnThis: returnThis
};
console.log(obj.returnThis() === obj); // true
Arrow Function
Arrow Function은 렉시컬 스코프를 따릅니다. 기존 함수에서 this는 런타임에 결정되는 반면, Arrow Function에서 this는 런타임이 아닌 정의가 될 때 결정됩니다. 이로 인해 Arrow Function의 this는 필요한 메서드나 생성자로 사용할 수 없습니다.
아래에 returnThis 가 선언되기 직전에 유효한 this 는 window 객체이다.
const obj = {
name: "obj",
regularFunction: function() {
console.log(this.name);
},
arrowFunction: () => {
console.log(this.name);
}
};
obj.regularFunction(); // "obj"
obj.arrowFunction(); // undefined
여기서 regularFunction은 일반 함수로 선언되었으므로 this는 obj를 가리킵니다. 그러나 arrowFunction은 화살표 함수로 선언되었으므로 this는 전역 객체인 window를 가리킵니다. 따라서 this.name은 undefined가 됩니다.
이런 특성 때문에 Arrow Function은 this 값을 바인딩하는 것이 중요한 함수에서는 조심하여 사용해야 합니다.
DOM 이벤트 처리
이벤트 처리에 사용한 함수에서 this 는 이벤트를 보낸 요소로 설정됩니다.
function checkThis(event) {
console.log(this === event.currentTarget); // true
}
const element = document.getElementById('something')
element.addEventListener('click', checkThis, false)
생성자 함수 호출
함수를 new 키워드와 함께 생성자로 사용하면 this 는 새로 생긴 객체가 됩니다.
function Person(name) {
this.name = name;
}
// new 연산자로 호출한 경우
const obj = new Person('이름');
console.log(obj.name === '이름'); // true
// new 연산자 없이 호출한 경우
const obj2 = Person('윈도우');
console.log(obj2 === undefined); // true
console.log(window.name === '윈도우'); // true
bind 메서드
bind 메서드는 자바스크립트의 함수 객체에 존재하는 메서드입니다. 이 메서드는 특정 컨텍스트, 즉 this로 설정될 객체를 함수에 바인딩하는 역할을 합니다.
function returnThis() {
return this;
}
const obj = { name: 'obj' };
const obj2 = returnThis.bind(obj)();
console.log(obj === obj2); // true
여기서 returnThis 함수는 this를 반환하는 함수입니다. bind 메서드를 이용하여 returnThis 함수의 this를 obj 객체로 바인딩했습니다.
이렇게 bind 메서드를 사용하면 this의 값을 원하는 대로 바꿀 수 있습니다. 이는 특히 객체의 메서드를 다른 객체에게 '빌려주는' 경우나, 콜백 함수의 this를 조절하는 등의 상황에서 유용하게 쓰일 수 있습니다.
this 사용 예시
Object methods
this는 객체의 메소드 내에서 그 객체 자신을 참조하기 위해 사용됩니다. 이를 통해 개발자는 해당 객체의 속성에 접근하고 수정할 수 있습니다.
let car = {
make: 'Toyota',
model: 'Camry',
displayCar: function() {
return this.make + ' ' + this.model;
}
}
console.log(car.displayCar()); // "Toyota Camry"
Constructor
this는 생성자 함수에서 새로 생성되는 객체 인스턴스를 참조하는 데 사용됩니다. 이를 통해 개발자는 객체의 속성을 설정하고 메서드를 정의할 수 있습니다.
function Car(make, model) {
this.make = make;
this.model = model;
this.displayCar = function() {
return this.make + ' ' + this.model;
}
}
let myCar = new Car('Toyota', 'Camry');
console.log(myCar.displayCar()); // "Toyota Camry"
Event handler
this는 이벤트가 발생한 HTML 요소를 참조합니다. 이를 통해 개발자는 이벤트가 발생한 요소에 대해 특정 동작을 수행할 수 있습니다.
button.addEventListener('click', function() {
this.style.display = 'none';
});
Prototype methods
프로토타입 메서드에서 this는 해당 메서드를 호출한 객체 인스턴스를 가리킵니다. 이를 통해 인스턴스마다 각각 다른 상태를 가지는 객체를 만들 수 있습니다.
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name}.`);
};
const alice = new Person('Alice', 25);
alice.sayHello(); // "Hello, my name is Alice."
Methods chaining
메서드 체이닝을 구현하려면 메서드가 this를 반환해야 합니다. this를 반환하면 해당 객체의 다른 메서드를 계속해서 호출할 수 있습니다.
const obj = {
value: 0,
increment: function() {
this.value++;
return this;
},
add: function(v) {
this.value += v;
return this;
},
print: function() {
console.log(this.value);
}
};
obj.increment().add(3).print(); // 4
참고 자료
