JavaScript 의 this 란?

공식 문서에서는 아래와 같이 정의했다.

대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ES6는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다(이는 렉시컬 컨텍스트안의 this값을 유지합니다).

• 즉, this 는 함수가 호출될 때 동적으로 바인딩되는 참조 변수이며,
  this 는 함수를 호출하는 방법에 따라 값이 결정된다.
  • "바인딩"이란?
    • 변수나 함수 등을 식별하기 위한 이름과 값을 연결하는 과정.
    • this 바인딩이란 this 와 this가 가리킬 객체를 바인딩 하는 것이다.

1. this 를 전역에서 사용한 경우

• this 는 기본적으로 window 전역 객체를 참조한다. (node.js 에서의 전역 객체는 global 임)
  • 전역 객체란 전역 범위에 항상 존재하는 객체를 의미한다.

// - 브라우저
this === window 

// - node.js
this === global 

// 결과 값은 둘다 true!

function aa() {
	return this;
}

aa(); // window 객체 출력

2. this 함수 내부에서 사용한 경우

1. 함수를 호출할 때 해당 함수가 속한 객체를 this 로 바인딩한다. 이 경우를 메소드 호출이라고 한다.

// 메소드 호출 예시

const myObject = {
	name: 'John',
    sayName: function() {
    	console.log(this.name);
    }
}

myObject.sayName(); // 출력결과: 'John'

2. 함수를 호출할 때 call, apply,bind 를 사용하여 명시적으로 this 를 지정할 수 있다.

// call, apply, bind를 사용한 명시적 바인딩 예시

function sayName() {
	console.log(this.name);
}

const person1 = { name : 'john' };
const person2 = { name : 'mike` };

sayName.call(person1); // 출력결과: 'john'
sayName.apply(person2); // 출력결과 : 'mike'
sayName.bind(person2)(); // 출력결과 : 'mike'

3. 생성자 함수로 객체를 생성할 때 this는 새로 생성된 객체를 가리킨다.

// 생성자 함수로 객체를 생성하는 예시

function Person(name) {
	this.name = name;
}

const person1 = new Person('john');
const person2 = new Person('mike');

console.log(person1.name); // 출력결과: 'john'
console.log(person2.name); // 출력결과: 'mike'

// *this 가 new 연산자를 사용해 새로 생성된 객체를 가리킨다.

4. 화살표 함수에서 this 는 자신이 속한 정적 범위에서 상속된다.

• 화살표 함수 안에서 this는 언제나 상위 스코프의 this를 가리킨다.
• 화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

// 화살표 함수에서 this 를 상속하는 예시

const myObject = {
	name: 'john',
    sayName: function() {
    	const innerFunction = () => {
        	console.log(this.name);
        };
        innerFunction();
    }
};

myObject.sayName(); // 출력결과: 'john'