this
this는 객체 내부의 메서드가 객체에 저장된 정보를 쓰고 싶을 때 사용!
함수가 ⭐어떻게 호출⭐되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.
바인딩
함수 또는 메소드를 호출한 대상에 실제 함수를 연결해주는 것!
어떤 환경에서 사용하는지에 따라 this 에 바인딩되는 객체가 달라집니다.
단독으로 사용한 this
//브라우저
console.log(this); //window
//서버 (node.js)
console.log(this); //global브라우저의 전역객체는 window, 서버(node.js)의 전역객체는 global
함수 안에서의 this
전역객체(window)에 바인딩!⭐
// 함수 선언식
function funcDeclaration() {
console.dir(this);
}
funcDeclaration(); // window
// 함수 표현식
const funcExpressions = () => {
console.dir(this);
}
funcExpressions(); // window다만, strict mode에서는 함수 내의 this에 디폴트 바인딩이 없기 때문에
undefined 값을 반환한다.
function myFunction() {
return this;
}
console.log(myFunction()); //undefined메서드 안에서의 this
메서드 내부 코드에서 사용된 this는 해당 메서드를 호출한 객체로 바인딩된다.
var coffee = {
size: 'Grande',
menu: 'Latte',
order: function () {
return this.size + ' ' + this.menu;
},
};
coffee.order(); //"Grande Latte"
생성자함수에서의 this
생성자 함수의 코드가 실행되기 전에 빈 객체가 생성된다.
그 후에 함수 내에서 사용되는 this는 이 빈 객체를 바인딩!⭐
function Coffee(order) {
//생성자 함수 코드 실행 전
this.order = order;
}
var cappuccino = new Coffee('cappuccino');
var einspenner = new Coffee('einspenner');
console.log(cappuccino.order); //cappuccino
console.log(einspenner.order); //einspenner
화살표 함수에서의 this
화살표 함수가 정의된 스코프에 존재하는 this를 바인딩!⭐
일반 함수처럼 호출한 대상에 따라 상대적으로 변하는 것이 아니라,
Arrow Function을 감싸는 정적 범위(Lexical Scope)가 선언되기 직전에 유효한 this 를 갖는다.
const returnThis = () => this;
const obj = {
name:'obj',
returnThis: returnThis,
returnThis2: () => this
};
console.log(obj.returnThis() === window); // true
returnThis 가 선언되기 직전에 유효한 this 는 window 객체이다.
Archive