📝자바스크립트 5 | this, 5가지 바인딩 패턴

 

 

this

let array = [];
array.push(1);
array.pop();

push, pop, shift, unshift 등 자바스크립트에서는 많은 메서드들을 사용할 수 있다. 메서드들은 자신이 속한 객체(마침표 앞의 객체)의 프로퍼티를 참조하고 변경할 수 있다. 

 

 

 

mdn 

 

 

자바스크립트에서 제공하는 메서드들은 이미 자바스크립트에서 정의를 해두었기 때문에 가져다 사용할 수 있다.

 

 

 

 

function Example(){
  this.storage = [];
}

Example.prototype.push = function(){
 this.storage.push(1);
 return 1;
}

 

Example 생성자 함수를 생성했다. push 메서드는 storage에 1을 추가하는 메서드이다. 

 

 

생성자 함수로 인스턴스를 생성하기 위해서는 아래와 같이 new 연산자와 함께 생성자 함수를 호출하는 단계가 필요하다.  

 

 

 

 

 

Example 생성자 함수를 정의한 시점에서는 인스턴스가 아직 생성되기 전이기 때문에 아직 자신이 속한 객체를 알지 못한다(array를 정의하기 전에 array.push를 사용할 수 없다).

 

때문에 push 메서드를 정의할 때 생성자 함수 안에 있는 storage의 값을 참조할 수 없는 것이다.

 

Example.prototype.push = function(){
 //example 정의되어있는 storage를 참조하고 싶다. => this.storage
 xxx.storage.push(1);
}

 

이 문제를 해결하기 위해 자바스크립트는 자신이 생성할 인스턴스, 자신이 속한 객체를 가리키는 특수한 식별자인 this를 제공한다.  push 를 메서드를 정의할 때 this를 사용하면 내가 원하는 객체를 참조할 수 있다. 

 

this의 값은 여러가지 패턴에 의해 바인딩(this가 가리킬 객체를 세팅)된다. 즉, 상황에 따라 this가 가리키는 값이 달라진다. 위의 예시의 경우, 메서드 앞의 객체인 Example이 자동으로 this 값으로 바인딩되었다. 

 

 

 

 

 

 

 

 

 

5가지 바인딩 패턴 

this 바인딩은 함수 호출 방식에 따라 결정된다(= 함수 호출 시점에 결정).

 

1. Global 

콘솔창에 this를 조회하면 window 객체가 바인딩된 것을 확인할 수 있다. 전역에서는 this는 전역 객체 window를 가리킨다. 

 

 

 

2. 일반 함수 호출

함수 호출 시 this를 조회하면 window 객체가 바인딩된 것을 확인할 수 있다. 일반 함수 내부에서는 this는 전역 객체 window를 가리킨다. 

 

Function 호출

 

중첩 함수의 호출 역시 일반 함수 호출이기 때문에 전역 객체 window 가 바인딩된다.

 

 

 

콜백 함수가 일반 함수로 호출된다면 this의 값으로 window 객체가 바인딩 된다. 

 

 

 

화살표 함수의 경우, 함수 호출 시 this가 바인딩 되는 일반 함수 호출과 다르게 this값이 없다. 대신 화살표 함수를 둘러싸는 렉시컬 범위의 this(상위 스코프가 this)가 사용된다. 

 

 

 

strict mode가 적용된 일반 함수 내부의 this에는 undefined가 바인딩된다. 

 

 

 

 

3. method 

메서드 호출 시 this를 조회하면 메서드를 호출한 객체가 바인딩된다. 메서드 이름 앞의 마침표(.) 앞에 객체가 바인딩된다. 

 

Method 호출

 

하지만 메서드는 바인딩된 객체와 독립적으로 존재한다. 그저 Example 프로퍼티에 할당되는 것이다. 

const Example = {
  storage : [],
  push(){
    this.storage.push(1);
    return 1;
  }
}

 

독립적으로 존재하기 때문에 메서드를 다른 객체에서도 사용할 수 있다.  메서드를 정의하고 있는 객체와 상관없이 메서드를 호출한 객체에 바인딩된다. 

 

 

 

 

 

 

 

4. new 키워드

new 키워드를 사용한 생성자 호출 시, 새롭게 생성된 인스턴스 객체가 this의 값으로 바인딩된다. 

 

new 키워들　이용한　생성자　호출

 

 

 

5. call, apply

call 또는 apply 호출 시, 첫번째 인자로 전달된 객체가 this의 값으로 바인딩 된다. 

 

function food 안에서　this의　값으로　Food의　인스턴스　객체를　주었다．

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[참고자료]

　　　　　

메서드와 this