this

1. this란

• this는 실행컨텍스트가 생성될 때, this의 값이 결정된다.

• 실행컨텍스트는 함수 호출 시에 결정된다.
• this는 함수 호출 시에 결정된다.
• this는 함수 호출 방법에 따라 다른 값을 가진다.

2. 호출 상황에 따라 달라지는 this 값

2.1 전역공간에서의 this

• 전역공간에서 this는 ‘전역 객체'
• 브라우저 환경에서 전역객체는 ‘window’
• Node.js 환경에서 전역객체는 ‘global’

2.2 메서드 호출 시의 this

• 함수와 메서드의 차이는 ‘그 자체로 독립적인 기능을 할 수 있는가 여부이다.’
• 함수는 그 자체로 독립적 기능을 수행할 수 있다.
• 메서드는 자신을 호출한 대상 객체에 관한 동작만을 수행한다.

• 하나의 함수를 함수로서 호출할 수도 있고, 메서드로서 호출할 수도 있다.
• 둘의 구분은 . 의 여부이다.
• 대괄호 표기법에 따른 호출도 메서드 호출과 같다.
• obj.method(2) === obj[’method’](2)

const func = function(x) { console.log(this, x) }

1. 함수로의 호출

func(1) // window{...} , 1

2. 메서드로서의 호출

const obj = {
	method: func
}
obj.method(2) // {method: func} , 2

• 메서드 호출 시 this는 호출한 주체이다.
• 점표기법(.) 바로 앞의 객체가 this 가 된다.

2.3 함수 자체 호출 시의 this

• 함수 호출 시에는 this가 지정되지 않는다.

• 함수 호출은 호출한 주체가 명시 되지 않았기 때문에, 호출한 주체를 알 수 없다.

• 실행컨텍스트 생성되는 시점에서 this가 지정되지 않는다면, this는 전역객체를 바라본다.
• 따라서 this는 전역객체를 가르킨다.

• 내부함수의 this는 스코프체인과 같이 외부함수의 this를 상속받는 것이 더 자연스러운 흐름

const obj1 = {
	outer: function(){
		console.log(this); // 외부함수 this 
		const innerFunc = function(){
			console.log(this);  // 내부함수 this 
		}

		innerFunc() // this 는 전역객체를 가르킴
	}

	const obj2 = {
		innerMethod: innerFunc
	};
	obj2.innerMethod(); // this는 obj2 를 가르킴
}

obj1.outer(); // this는 obj1을 가르킴 

• 해결방법1
• 내부함수에서의 this 우회
• 내부함수 바로 위에서 _this = this 또는 self = this 로 다른 변수에 this 값을 담고, 해당 변수를 내부함수에서 사용하도록 하여, this를 사용할 수 있게 함
code

const obj1 = {
	outer: function(){
		console.log(this); // 외부함수 this 
		
		const _this = this // self 도 자주쓰임
		const innerFunc = function(){
			console.log(_this);  // 내부함수 this 
		}

		innerFunc() // this 는 전역객체를 가르킴
	}

	const obj2 = {
		innerMethod: innerFunc
	};
	obj2.innerMethod(); // this는 obj2 를 가르킴
}

obj1.outer(); // this는 obj1을 가르킴 

• 화살표함수를 통해 상위 스코프의 this 사용하기
• 화살표함수는 실행컨텍스트 생성 시 this 바인딩 과정을 거치지 않는다.
• 따라서 this값 사용 시, 변수와 같이 상위 스코프를 거슬러 올라가 this를 참조하게 된다.

2.4 생성자 함수에서의 this

• “생성자함수”는 공통된 성질을 지니는 객체들을 생성하는 데 사용하는 함수 이다.
• 객체지향언어에서 생성자는 클래스라고 한다..
• 객체지향언어에서 클래스를 통해 만든 객체를 “인스턴스”라고 한다.

• 자바스크립트에서는 new 명령어와 함께 함수를 호출할 경우, 해당 함수가 생성자로서 동작한다.
• 생성자 함수로 호출된 경우, 함수 내부에서의 “this”는 새로 만들어질 인스턴스 자신이 된다.

• new명령어로 생성자 함수를 호출 시
• 생성자의 prototype 프로퍼티를 참조하는 _ _proto_ _ 가 프로퍼티로 있는 객체(인스턴스)를 만든다.
• 인스턴스.__proto__ === 생성자.prototype
• 이 때 인스턴스의 this값에 공통 속성 및 개성을 부여한다.(?..?)

2.5 콜백함수 내부에서의 this

• this에 대한 제어권이 콜백을 받는 함수로 넘어감

• 제어권을 받은 함수에서 따로 지정하지 않는 경우 this는 전역객체
• setTimeout( function(){console.log(this)}, 300 ); ⇒ 전역객체
• [1,2,3,4,5].forEach( function(x){ console.log(this, x) }) ⇒ 전역객체

• 제어권을 받은 함수에서 별도로 this의 값을 지정 가능
• 메서드 호출과 같이 addEventListener의 호출 주체를 this로 상속받게 됨.
• this == document.querySelector('#id')

document.querySelector('#id').addEventListener('click', function(e){
	console.log(this. e)
})

3. 명시적 this 바인딩

3.1 call, apply 메서드

• call은 첫 번째 인자를 this로 바인딩하고,
• 이후 인자들을 호출할 함수의 매개변수로 받는다.

• apply는 첫 번째 인자를 this로 바인딩하고,
• 두 번째 인자를 배열로 하여, 호출할 함수의 매개변수를 지정한다.

const func = function(a, b, c) {
	console.log(this, a, b, c);
}
const obj = {
	x:1
	
}

func(1,2,3) // Window{...} 1 2 3
func.call({x : 99}, 4,5,6)) // {x : 99} 4 5 6

func.apply({x : 99}, [7,8,9]) // {x : 99} 7 8 9

• 유사배열객체 에서의 배열 메서드 사용 ⇒ Array.from() 으로 대체

• 여러인수를 묶어 하나의 벼앨로 전달 ⇒ Spread operator로 대체 […arr]

[bind 메서드]

[고차함수에서의 this 바인딩]