[JavaScript] 15. This

생성자 함수 내부에서 자기 자신을 참조할 때는 특수한 식별자인 this를 사용한다.

const obj = new Obj();

function Obj() {
	this.a = 1;	 
}

obj.a; // 1

함수 선언문은 코드 런타임 이전에 호이스팅, 평가가 일어나기 때문에 순서에 상관없이 사용할 수 있다.

this는 JS 엔진에 의해 암묵적으로 생성되는 식별자다.
함수 호출 시, arguments와 함께 함수 내부에서 생성되어 지역 변수처럼 사용될 수 있다.

다른 언어와 달리 함수 호출 시 바인딩 될 객체가 동적으로 결정된다.(다른 언어에서는 항상 클래스에 의해 생성될 인스턴스만을 가리킴)

this는 생성자 함수에 의해 만들어질 인스턴스를 가리키는 변수이므로 일반 함수에서는 undefined가 바인딩된다.(strict mode 기준)

1. this binding

this에 바인딩될 값은 함수 호출 방식에 따라 동적으로 결정된다.
함수의 상위 스코프를 결정하는 방식인 Lexical Scope는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 결정되지만, this는 함수 호출 시점에 결정된다.

동일한 함수라도 호출 방식은 다양하기 때문에 주의해야 한다.

일반 함수/메소드/생성자 함수/Function.prototype.apply/call/bind

1.1 Normal Function Call

일반 함수 호출 시, this에 전역 객체가 바인딩된다.

function fn() {
	console.log(this); // window
	function fn2() {
		console.log(this);  // window
    }
	fn2();
}

fn();

단, strict mode에서는 전역 객체가 아닌 undefined가 바인딩된다.

const obj = {
	fn() {
		console.log(this); // fn: ƒ fn()
      
		function fn2() {
			console.log(this); // window
        }
	    
      	fn2();
    }
};

obj.fn();

객체 내의 중첩 함수도 일반 함수로 호출되면 this에 전역 객체가 바인딩된다.
마찬가지로 strit mode에서는 undefined다.

const obj = {
	fn() {
		console.log(this); // fn: ƒ fn()
      
		setTimeout(function () {
			console.log(this); // window
        }, 100);
    }
};

obj.fn();

콜백도 마찬가지.
어떤 함수라도 일반 함수로 호출되면 this는 전역 객체.
strict mode에서는 undefined다.

const obj = {
	fn() {
      	const self = this;
      
		setTimeout(function () {
			console.log(self); // fn: ƒ fn()
        }, 100);
    }
};

obj.fn();

만약 obj 객체를 내부 함수에서 참조하고 싶으면, self 등의 새로운 변수를 만들어서 this를 미리 바인딩 해주거나, bind 호출, 혹은 화살표 함수 사용 등의 방법이 있겠다.

1.2 Method Call

방금 봤던대로 메소드를 호출한 객체에 this가 바인딩된다.

const obj = {
	fn() {
		console.log(this); // fn: ƒ fn()
    }
};

fn();

1.3 Constructor Function Call

this에 해당 생성자로 만들어질 인스턴스가 바인딩된다.

function Obj(value) {

	this.value = value;
	this.getValue = function () {
		return this.value;
    };
}


const obj = new Obj(1);
obj.getValue(); // 1

const obj2 = Obj(1);
obj2.getValue(); // Uncaught TypeError: Cannot read properties of undefined (reading 'getValue')
window.value; // 1
window.getValue(); // 1

생성자 함수라도 new로 호출하지 않는 경우 일반 함수로 동작하기 때문에 this는 전역 객체를 가리킬 것이고 위와 같이 window에 바인딩 될 것이다.
strict mode인 경우 undefined를 가리킬 것이기 때문에 undefined.value에 값을 할당하는 것이 되어 오류가 발생할 것이다.