this
란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. 자바스크립트에서 this
는 호출방식에 따라서 동적으로 결정됩니다.
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
은 렉시컬 스코프를 따릅니다. 기존 함수에서 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
값을 바인딩하는 것이 중요한 함수에서는 조심하여 사용해야 합니다.
이벤트 처리에 사용한 함수에서 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
메서드는 자바스크립트의 함수 객체에 존재하는 메서드입니다. 이 메서드는 특정 컨텍스트, 즉 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
는 객체의 메소드 내에서 그 객체 자신을 참조하기 위해 사용됩니다. 이를 통해 개발자는 해당 객체의 속성에 접근하고 수정할 수 있습니다.
let car = {
make: 'Toyota',
model: 'Camry',
displayCar: function() {
return this.make + ' ' + this.model;
}
}
console.log(car.displayCar()); // "Toyota Camry"
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"
this
는 이벤트가 발생한 HTML 요소를 참조합니다. 이를 통해 개발자는 이벤트가 발생한 요소에 대해 특정 동작을 수행할 수 있습니다.
button.addEventListener('click', function() {
this.style.display = 'none';
});
프로토타입 메서드에서 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."
메서드 체이닝을 구현하려면 메서드가 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
참고 자료