하루 30분 모던 자바스크립트 딥 다이브 this

this

1. this는 자신이 속한 객체 또는 자신이 생성한 인스턴스를 가리키는 자기 참조 변수
2. this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
3. strict mode가 적용된 일반 함수 내부에선 this는 undefined가 바인딩 된다. 일반 함수 내부에선 this를 사용할 필요가 없기 때문이다.

함수 호출 방식과 this 바인딩

일반 함수 호출

1. 기본적으로 this에는 전역 객체가 바인딩 된다.

메서드 호출

1. 메서드를 호출한 객체, 즉 메서드를 호출할 때 마침표(.) 연산자 왼쪽에 기술한 객체가 바인딩 된다.
2. person.getName() 에서 getName()메서드의 this는 person에 바인딩 된다.
3. 메서드 내부의 this는 프로퍼티로 메서드를 가리키고 있는 객체와 관계없고 메서드를 호출한 객체에 바인딩.
4. 생성자 함수의 prototype도 역시 객체 이므로, 함수의 메서드를 사용할 수 있고, 메서드의 this는 prototype 객체를 가리킨다.

생성자 함수 호출

1. this에는 미래에 생성할 인스턴스가 바인딩된다.

apply, call, bind 메서드

1. apply 메서드와 call 메서드는 첫 번째 인자로 바인딩 할 객체를 가진다.
2. apply는 호출할 함수의 인수를 배열로 묶어 두 번째 인자로 전달한다.
3. call은 apply와 달리 배열이 아닌 쉼표로 구분하여 전달한다.
4. bind 메서드는 apply와 call메서드와 달리 함수를 호출하지 않는다.
5. bind는 첫 번째로 전달된 인자에 this를 바인딩한 함수를 새롭게 생성한다.

 const person = {
	name : "Lee",
	foo(callback){
		setTimeout(callback.bind(this),100);
	}
};

person.foo(function(){
	console.log(this.name) //일반 함수는 전역 객체를 this바인딩 한다. 하지만 bind메서드로 person에 바인딩 하여 출력 값은 "Lee"가 된다.
})