this

1. this란 2. 호출 상황에 따라 달라지는 this 값 2.1 전역공간에서의 this 2.2 메서드 호출 시의 this 2.3 함수 자체 호출 시의 this 2.4 생성자 함수에서의 this 2.5 콜백함수 내부에서의 this 3. 명시적 this 바인딩 3.1 call, apply 메서드 [bind 메서드][고차함수에서의 this 바인딩]

🔑

This는 항상 같은 원리를 바탕으로 this 값을 가지게 된다. 하지만 특정상황에서 명시적 this 바인딩을 통해 규칙과 다른 값을 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)

[메서드 호출 시의 this]

메서드 호출 시 this는 호출한 주체이다.

점표기법(.) 바로 앞의 객체가 this 가 된다.

2.3 함수 자체 호출 시의 this

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

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

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

따라서 this는 전역객체를 가르킨다.

[내부 함수의 this가 상속되지 못하는 이슈]

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

해결방법1

내부함수에서의 this 우회

내부함수 바로 위에서 _this = this 또는 self = this 로 다른 변수에 this 값을 담고, 해당 변수를 내부함수에서 사용하도록 하여, this를 사용할 수 있게 함

code

화살표함수를 통해 상위 스코프의 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')

3. 명시적 this 바인딩

3.1 call, apply 메서드

call은 첫 번째 인자를 this로 바인딩하고,

이후 인자들을 호출할 함수의 매개변수로 받는다.

apply는 첫 번째 인자를 this로 바인딩하고,

두 번째 인자를 배열로 하여, 호출할 함수의 매개변수를 지정한다.

[활용]

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

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

[bind 메서드]

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


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

1. 함수로의 호출

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

2. 메서드로서의 호출

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


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을 가르킴


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을 가르킴


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


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