this

📍 자기 참조 변수( self-referencing variable )
자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자
자신이 속한 객체 또는 자신이 생성할 인스턴스의 '프로퍼티나 메서드 참조 가능'

✔️ this 키워드

함수 호출 시 arguments 객체와 this가 암묵적으로 함수 내부에 전달되고, arguments 객체를 지역 변수처럼 사용할 수 있듯이, this도 지역 변수처럼 사용할 수 있다. 이 때, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 여기서 this 바인딩은 this와 this가 가리킬 객체를 바인딩 하는 것을 의미한다.

함수가 호출되는 방식에 따라 this에 바인딩 될 값, 즉 this 바인딩이 동적으로 결정되고, strict mode또한 this 바인딩에 영향을 준다. this는 코드 어디에서든 참조가 가능하다. 전역에서 사용될 경우 window를 참조하고, 함수 내부에서 사용될 경우 자가 참조한다. 하지만 strict mode 일 경우, 일반 함수 내부의 this에는 undefined가 바인딩 된다. 일반 함수 내부에서는 this를 사용할 필요가 없기 때문이다.

// ❗️전역에서 this는 전역 객체 window 참조
console.log(this); // window

function square(num) {
	// ❗️일반 함수 내부에서 this는 전역 객체 window를 가리킨다
	console.log(this); // window
	return num + num;
}

square(2);

const person = {
	name: 'Tia',
	getName(){
		// ❗️메서드 내부에서 this는 메서드를 호출한 객체를 가리킨다
		console.log(this); // {name: 'Tia', getName: f}
		return this.name;
	}
};

console.log(person.getName()); // Tia

function Person(name) {
	this.name = name;
	// ❗️생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스를 가리킨다
	console.log(this); // Person {name: 'Tia', __proto__: { constructor: f}}
};

const me = new Person('Tia');

✔️ 함수 호출 방식과 this 바인딩

this 바인딩은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다. 이때 this 바인딩의 경우에는 렉시컬 스코프와 다르게 함수 호출 시점에 결정된다.

❓ 일반 함수 호출

기본적으로 this에는 전역 객체( global object )가 바인딩 된다. 모든 함수( 전역 함수, 중첩 함수, 콜백 함수 포함 )는 일반 함수로 호출 시 함수 내부의 this에는 전역 객체가 바인딩 된다. 이때 만약 strict mode 일 경우, 일반 함수 내부의 this에는 undefined가 바인딩 된다.

function check () {
	console.log(`check's this: `, this); // window, if strict mode: undefined
	const checkAgain = () => {
		console.log(`checkAgain's this: `, this) // window, if strict mode: undefined
	}
	checkAgain();
}
check();

❓ 메서드 호출

메서드를 호출한 객체, 즉 메서드 호출 시 메서드 이름 앞의 마침표 연산자. 앞에 기술한 객체가 바인딩 된다. 메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩 된다.

const person = {
	name: 'Tia',
	getName() {
		// 메서드 내부의 this는 메서드를 호출한 객체에 바인딩
		return this.name;
	}
};

console.log(person.getName()); // Tia

const anotherPerson = {
	name: 'Anne',
};

anotherPerson.getName = person.getName;
console.log(anotherPerson.getName()); // Anne

const getName = person.getName;
console.log(getName()); // ''
// 일반 함수로 호출된 getName 함수 내부의 this.name은 window.name과 같음

❓ 생성자 함수 호출

📍 생성자 함수: 객체( 인스턴스 )를 생성하는 함수
일반 함수와 동일한 방법으로 생성자 함수 정의 후 new 연산자와 함께 호출하여 생성자 함수를 동작한다.
이 때, new 연산자와 함께 호출하지 않으면 일반 함수로 동작한다.

생성자 함수가 생성할 인스턴스가 바인딩 된다.

❓ Function.prototype.apply/call/bind 호출

apply, call, bind는 Function.prototype의 메서드이다. 즉, 모든 함수가 상속받아 사용이 가능하다.

▪️ apply / call

apply와 call 메서드의 본질적 기능은 함수를 호출하는 것이다. apply와 call 메서드는 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩한다.

function thisBinding() {
	return this;
};

// this로 사용할 객체
const thisObj = { a: 1 };

console.log(thisBinding()); // window
console.log(thisBinding.apply(thisObj)); // {a: 1}
console.log(thisBinding.call(thisObj)); // {a: 1}

▪️ bind

bind 메서드의 본질적 기능은 함수를 호출하지 않고 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성하여 반환하는 것이다.

function thisBinding() {
	return this;
};

// this로 사용할 객체
const thisObj = { a: 1 };

console.log(thisBinding.bind(thisObj)); // thisBinding
// bind 메서드는 함수를 호출하지는 않으므로 명시적으로 호출해야 함
console.log(thisBinding.bind(thisObj)()); // { a: 1}

bind는 메서드의 this와 메서드 내부의 중첩 함수 또는 콜백 함수의 this가 불일치하는 문제를 해결하기 위해 유용하게 사용된다.

const person = {
  name: 'Tia',
  getName(callback) {
    // bind 메서드로 callback 함수 내부의 this 바인딩을 전달
    setTimeout(callback.bind(this), 100);
  }
};

person.getName(function(){
  console.log(`Hi! my name is ${this.name}! 👋`)
})

✅ 화살표 함수와 this

화살표 함수는 일반적인 함수와는 다르게 자신만의 this를 생성하지 않는다. 대신, 화살표 함수가 정의된 시점에 외부 스코프의 this를 참조한다. 이는 화살표 함수 내부의 this는 상위 스코프의 this와 동일한 값을 가지는 것을 의미한다. 따라서 전역 스코프에서 화살표 함수와 this를 사용할 경우, 참조할 다른 값이 없으므로 전역 객체, 즉 window를 참조한다.