정의: 함수 실행 시 함수 내에서의 실행 맥락(context)을 참조하는 자동으로 할당되는 지역 변수.
this
**가 가리키는 대상(객체)이 결정되며, 함수가 어디서, 어떻게 호출되었는지에 기반하여 그 값이 달라진다.바인딩(binding)이란, 프로그래밍에서 어떤 값을 특정 이름(변수, 상수 등)에 연결하는 과정을 의미한다. 즉, 변수나 상수에 값을 할당하는 것을 바인딩이라고 할 수 있다.
this는 함수가 호출될 때 결정되는 실행 컨텍스트를 가리킨다. 그 종류로는 1)전역 this, 2)함수 this, 3)arrow 함수 this
this는 부르는 상황 마다 다르게 동작한다. new 바인딩 > 암시적 바인딩 > 명시적 바인딩 > 기본 바인딩
this
는 메서드를 호출한 객체를 가리킴.this
로 사용할 객체를 전달 function introduce(name, interest) {
console.log(`Hello! My name is ${name} and I like ${interest}.`);
console.log(`Hello! My name is ${this.name} and I like ${this.interest}.`);
console.log(`this: ${JSON.stringify(this)}`); // user를 가리키고 있음
console.log(`-----------------------------`);
}
const user = {
name: 'Alice',
interest: 'JavaScript',
};
introduce.call(user, user.name, user.interest);
introduce.apply(user, [user.name, user.interest]);
this
를 고정한 새로운 함수(영구적)를 반환function greet() {
console.log(`Hi, I am ${this.name}.`);
}
const user = {
name: 'Bob',
};
// bind
const userGreet = greet.bind(user); // 새로운 함수 선언,초기화
userGreet(); // 새로운 함수 사용
this
를 가지지 않고, 상위 스코프의 this
를 그대로 사용한다. 그래서 상위 스토프가 객체A니까 이 this가 전역 객체를 참조한다.
this
바인딩 자체가 없기 때문에 call, apply, bind 모두 사용 불가능const obj = {
name: 'Kim',
getName: () => {
return this.name;
}
}
console.log(obj.getName());
동작 방식: