.png)
This
자바스크립트에서 This는 호출된 함수의 컨텍스트에 따라서 값이 결정된다. 즉 언제 어떻게 함수가 호출되었냐에 따라서 달라진다.
Global Context (전역공간)
console.log(this); // Window {parent: Window ... }
Function 내부에서의 this
- default binding
- this는 window object를 가리킨다.
const myFunction = function() {
console.log(this);
}
myFunction(); // Window (예제1)
const myFunction = function() {
console.log(this.a);
}
const a = 5 ;
myFunction(); // 5 Object에서의 this
- this는 object를 가리킨다.
(예제1) 메소드
const john = {
name: 'John',
greet: function(person) {
console.log(`Hi ${person} my name is ${this.name}`)
}
}
john.greet("Mark"); // Hi Mark my name is John(예제2) 오브젝트의 메소드를 변수에 할당
- 오브젝트의 메소드를 변수에 할당하면, 변수는 함수 그 자체를 가리킨다. 따라서 this는 window object를 가리킨다.
const greeting = john.greet;
greeting("Mark"); // Hi Mark, my name is Arrow Function
- 화살표 함수는 this를 가지고 있지 않다. 따라서 부모의 this를 따른다(enclosing scope)
(예제1) 화살표 함수
const person = {
name: "jason",
shout: () => console.log("my name is ", this.name)
}
person.shout() // my name is(예제2) Shorter syntax를 사용하고 싶다면?
const person = {
name: "Jason",
shout() {
console.log("Hi, my name is", this.name);
}
};
person.shout() // my name is JsonEvent Listener
- addEventListener 콜백 함수의 this는 event 객체의 target으로 바인딩 된다.
(예제1)
const body = document.querySelector('body');
body.addEventListener('click', function() {
console.log(this); // <body>...<body>
});(예제2) bind를 통해 this 명시한 경우
const body = document.querySelector('body');
const obj = { a: 'a' };
body.addEventListener('click', function() {
console.log(this); // {a: "a"}
}.bind(obj));Call, Apply, Bind
- 모든 함수들은
Function.Prototype으로 부터call/apply/bind를 상속받는다. call/apply/bind를 사용해서this를 직접 명시할 수 있다.functionName.call()과 같이 사용한다.
Call / Apply
- call,apply는 함수를 호출하고 실행시킨다.
- call과 apply는 받는 인자가 다르다.
const car = {
registrationNumber: "123",
brand: "Toyota"
}
function displayDetails(ownerName) {
console.log(ownerName + ", this is your car: " + this.registrationNumber + " " + this.brand);
}
// apply
displayDetails.apply(car, ["Vivian"]); // Vivian, this is your car: 123 Toyota
// call
displayDetails.call(car, "Vivian"); // Vivian, this is your car: 123 Toyotabind
(예제1)
const car = {
registrationNumber: "123",
brand: "Toyota",
displayDetails: function(){
console.log(this.registrationNumber + " " + this.brand);
}
}
const myCarDetails = car.displayDetails.bind(car);
myCarDetails(); // 123 Toyota(예제2) 파라미터와 함께 사용
const car = {
registrationNumber: "GA12345",
brand: "Toyota",
displayDetails: function(ownerName){
console.log(ownerName + ", this is your car: " + this.registrationNumber + " " + this.brand);
}
}
const myCarDetails = car.displayDetails.bind(car, "Vivian"); // Vivian, this is your car: 123 Toyota
Hello World.