this란 뭘까 ?
this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다.
간단하게 말하면 this는 코드 상에서 자신이 지금 어디에 속하거나, 누가 자신을 호출하고 있는지 에 따라 다른 값을 가지는 특별한 변수다.
this는 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.⭐
함수를 호출하는 방식은 아래와 같이 다양하다.✔
- 일반적인 함수 호출
- 메서드 호출
- 생성자 함수 호출
- apply/call/bind 호출
전역 범위에서 this
JavaScript 최상위에서 this를 호출한다면 window라는 전역객체를 가리킨다. (Node에서는 Global)
// 1. 전역 범위에서 호출
console.log(this); // Window {...}
함수 호출에서 this
기본적으로 this는 전역 객체다.
전역함수는 물론이고 심지어 내부함수의 경우도 this는 외부함수가 아닌 전역객체에 바인딩된다.
function greet() {
console.log(this); // window
function greet2(){
console.log(this); // window
}
greet2()
}
greet()
메서드의 내부함수일 경우에도 this는 전역객체에 바인딩된다.
var value = 1;
var obj = {
value: 100,
foo: function() {
console.log("foo's this: ", this); // obj
console.log("foo's this.value: ", this.value); // 100
function bar() {
console.log("bar's this: ", this); // window
console.log("bar's this.value: ", this.value); // 1
}
bar();
}
};
obj.foo();
콜백 함수의 경우에도 this는 전역객체에 바인딩된다.
var value = 1;
var obj = {
value: 100,
foo: function() {
setTimeout(function() {
console.log("callback's this: ", this); // window
console.log("callback's this.value: ", this.value); // 1
}, 100);
}
};
obj.foo();
객체의 메서드에서 this
객체의 메서드로 호출 시 this는 해당 객체를 가르킨다.
const person = {
name: "Yjin",
introduce: function() {
console.log("My name is " + this.name);
}
};
person.inntroduce(); // My name is Yjin
생성자 함수에서의 this
함수 앞에 new 키워드가 붙이고 선언할 때, this를 해당 객체에 바인딩합니다. 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.
function Person() {
this.name = 'Yjin';
}
var person1 = new Person();
console.log(person1.name); // 'Yjin'
call,apply,bind 에서의 this
자바스크립트에서 함수의 this 값을 명시적으로 지정하거나 함수를 호출할 때 사용되는 메서드 call,apply,bind가 있다. 각각 메서드의 활용법을 보자.
1. apply
apply 메서드는 함수를 호출하면서 this 값을 특정 객체로 지정하며, 함수에 인자를 배열로 넘기는 방식이다.
const personage = {
age: 12
}
function Person(name) {
console.log(this.age, name)
}
Person.apply(personage, ['Yjin']) // 12, Yjin
2. call
call 메서드는 함수를 호출하면서 this 값을 특정 객체로 지정하며, 두 번째 인자부터는 함수에 넘겨줄 매개변수를 지정한다.
const personage = {
age: 12
}
function Person(name) {
console.log(this.age, name)
}
Person.call(personage, 'Yjin')
3. bind
bind는 함수에 인자로 전달한 this가 바인딩된 새로운 함수를 리턴한다.
const personage = {
age: 12
};
function Person(name) {
console.log(this.age, name);
}
const bindPerson = Person.bind(personage);
bindPerson('Yjin'); // '12 Yjin'
화살표 함수에서의 this ⭐
화살표 함수에는 this라는 것이 존재하지 않기 때문에 상위 환경에서의 this값을 그대로 참조한다.
const person = {
name: "Alice",
normal : function () {
console.log(this)
},
arrow: () => {
console.log(this);
}
};
person.arrow(); // Window
person.normal(); // {name: 'Alice', normal: ƒ, arrow: ƒ}
참고