[JS] this

this란?

자신을 가리키는 참조 변수
this는 자바스크립트 엔진에 의해 암묵적으로 생성되어, 코드 어디서든 참조 가능
객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.

 

---

JS의 호출방식

1. (일반)함수 호출
2. 메서드 호출
3. 생성자 함수 호출(객체 생성 함수)
4. apply / call / bind 호출

 

1. 함수 호출

const test = function(){
  console.log(this);
}

test(); // window

일반 함수는 다음과 같이 가장 간단한 방법으로 호출할 수 있으며,

이때, this는 전역객체를 가리키게 된다.

 

 

2. 메소드 호출

var person = {
  name: 'Sung',
  printName: function() {
    console.log(this.name);
  }
}

person.printName() // Sung

메소드 : 객체의 값이 함수로 이루어 진 경우

메소드 호출 this : 해당 메소드를 소유한 객체에 바인딩 된다.
바인딩 : 식별자와 값을 연결하는 과정, this가 가리킬 객체를 바인딩하는 것.

2-1 메소드에서 내부 함수를 선언하는 경우 this는?

var person = {
  name: 'Sung',
  printName: function() {
    function getName() {
    	return this.name;
  }
  console.log("hello " + getName());
}
}
person.printName() // hello undefined 출력

객체의 메소드에서 this = 해당 객체 인것과 다르게, 내부 함수에서 this = window 객체를 가르킨다.

내부 함수는 메소드가 아니기 때문에, 단순 함수 호출 규칙에 따라 window를 가르키고 있다.

 

 

3. 생성자 함수 호출

const instance = new test(); // instance

생성자 함수 : 객체를 생성하는 역할을 함
생성자 함수의 동작과정은 3가지로 요약 가능
1. 빈 객체 생성 및 this 바인딩 => 생성자 함수가 실행되기 전, 빈 객체가 생성되고 이는 this로 바인딩된다.
2. this를 통한 property 생성
3. 생성된 객체 반환

생성자 함수에서 this의 역할 = 함수의 인자로 전달받은 값을 객체의 속성에 할당하기 위해 this 키워드를 사용

 

 

4. apply/call/bind 호출

apply, call, bind 메소드를 통해 this를 특정 객체에 명시적으로 바인딩이 가능

apply, call: 함수를 호출 => 대표적으로 유사 배열 객체에 배열 메서드를 사용하는 경우에 활용
bind : this로 사용할 객체만 전달 => 메서드의 this와 메서드 내부의 중첩 함수 또는콜백 함수의 this가 불일치하는 문제를 해결하기 위해 사용