this는 ‘자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수’이다. this를 통해 자신이 속한 객체 or 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 정의를 가지고 있다.
이 말은 곧 this가 고정된 값에 바인딩 되지 않는 것을 알 수 있다. this는 함수가 호출되는 방식에 따라 동적으로 결정된다.
바인딩: this의 호출 방식에 따라 this가 특정 ‘객체’에 연결되는 것
this의 호출 방식
this 값의 변화는 this 바인딩을 통해 this가 어떤 값과 연결되는지 확인 할 수 있다.
호출 방식에 따라 다음과 같이 나눠서 살펴볼 수 있다.
- 일반 함수 내부의 this는 전역 객체와 바인딩
- 메서드 내부의 this는 메서드를 호출한 객체와 바인딩
- 생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스와 바인딩
- call, apply, bind 메소드 메서드 첫 번째 인수로 전달하는 객체 바인딩
일반 함수 호출시 this는 전역 객체와 바인딩
this; //window {}
console.log( this === window) // true
function f1() {
return this;
}
f1() === window // true 메서드 호출시 this는 메서드를 호출한 객체와 바인딩
let person = {
name: “Hong”,
age: 20,
handsome() {
console.log(this.name + “is handsome”);
}
}
person.handsome() // Hong is handsome생성자 함수 호출시 this는 생성자 함수가 생성할 인스턴스와 바인딩
function person = {
this.name: “Hong”,
this.age: 20
}
let person 1 = new person();
console.log(person1) // {name: “Hong”, age:20}call, apply, bind 메소드 사용시에 메서드 첫 번째 인수로 전달하는 객체 바인딩
함수를 호출하는 방법에는 일반적으로 ()를 붙여 호출하는 방법과 call, apply를 사용하여 호출하는 방법이 있다.
아래의 코드를 보면 각자 함수 호출 방식은 다르지만, 같은 결과를 보여주고 있다
function f1(a, b, c) {
console.log(a + b + c);
};
f1(1, 2, 3); // 6
f1.call(null, 1, 2, 3); // 6
f1.apply(null, [1, 2, 3]); // 6call
func.call(thisArg[, arg1[, arg2[, ...]]])- thisArg : func 호출에 제공되는 this의+ 값
- Arg1,arg2..: func이 호출되어야 하는 인수
첫 번째 매개변수 thisArg는 각 함수의 실행문맥의 this를 특정하는 매개변수이란 걸 알 수 있다.
그리고 두 번째부터 호출할 인수들이 들어간다.
아래 예제 코드를 보면 call를 이용해 fruit2의 함수를 호출하고 있지만 call 메소드 첫 번쨰 매개변수에 fruit1를 넣어주고 있기 때문에 this는 fruit2가 아닌 fruit1를 가리킨다.
let fruit1 ={
kind: ‘apple’
} ;
let fruit2 = {
kind: ‘banana’,
delicious: function() {
console.log(this. King +”은/는 맛있습니다”)
}
};
fruit2.delicious(); // banana 은/는 맛있습니다
//call()
fruit2.delicious.call(fruit1)l // apple 은/는 맛있습니다apply
func.apply(thisArg,[argsArray])- thisArg: func 호출에 제공되는 this의 값
- argsArray: func이 호출되어야 하는 인수를 지정하는 유사 배열 객체
첫 번째 매개변수 thisArg는 call과 같이 this를 지정한다. 하지만 call()과 다르게 apply()는 두 번째 매개변수를 배열 형태로 넣게된다는 차이점이 있다. (배열 또는 유사배열 객체)
let fruit1 ={
kind: ‘apple’
} ;
let fruit2 = {
kind: ‘banana’,
delicious: function() {
console.log(this. King +”은/는 맛있습니다”)
}
};
fruit2.delicious(); // banana 은/는 맛있습니다
//call()
fruit2.delicious.apply(fruit1); // apple 은/는 맛있습니다bind
func .bind(thisArg[,arg1[,arg2[,…]]]
- thisArg: 바인딩 함수가 타겟 함수의 this에 전달하는 값
- Arg1, arg2, …: func이 호출되어야 하는 인수
bind()는 새롭게 바인딩한 함수를 만든다. 바인딩한 함수는 원본 객체 함수 객체를 감싸는 함수이다. bind()는 call(), apply()와 같이 함수가 가리키고 있는 this를 바꾸지만 호출되지는 않는다. 따라서 변수를 할당하여 호출하는 형태로 사용된다.
let fruit1 = {
kind:”apple”
};
let fruit2= {
kind:”banana”
delicious: function() {
console.log(this.kind + “은/는 맛있습니다”);
}
};
fruit2.delicious(); // banana 은/는 맛있습니다
// bind()
let fruit = fruit2.delicious.bind(fruit1);
fruit(); // apple 은/는 맛있습니다다시 돌아와서
이처럼 this는 함수 호출 방식에 따라 동적으로 결정된다. 함수를 일반 함수로 호출할 경우 this는 전역 객체를, 메서드로 호출할 경우 이를 호출한 객체를, 생성자 함수를 호출할 경우 생성자 함수가 생성할 인스턴스를 가리키게 된다.
call,apply,bind 메소드 사용시 메서드에 첫 번째 인수로 전달하는 객체에 바인딩된다.
