[JS] this와 bind

자바스크립트 this란?

---

this : 함수가 객체 안에서 사용될 때 그 객체를 참조할 수 있는 키워드

• 함수 내에서 함수 호출 맥락(context)를 의미(함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라짐 = this가 어떤 obj에 binding 됨)
• js의 함수는 객체, 일급객체(1. 변수나 데이터에 저장, 2. 함수의 인자로 전달 3. 함수의 반환값으로 전달)
• bind : 함수가 호출될 때마다 this가 결정되는 것을 바인딩 된다고 표현

바인딩 종류

---

기본바인딩

• 특정 객체의 메서드가 아니라 함수를 호출하면, 해당 함수 내부 코드에서 사용된 this 는 전역객체에 바인딩
• 함수일 때 this는 전역객체에 바인딩 - 브라우저 환경에서는 window(엄격 모드일때는 undefined), 노드 환경에서는 global(함수코드), exports(전역코드)

암시적 바인딩(앞 객체에 바인딩), 객체의 소속인 메소드의 this는 그 객체, 객체의 메서드를 호출할 때

• func.bind(context, arg1, arg2) → 항상 this를 같은 객체에 강제 (하드 바인딩)
• 점 연산 : 점 연산이나 대괄호 연산으로 객체의 프로퍼티에 접근하면 참조타입을 반환 (base(객체), 프로퍼티이름(name), strict), 참조타입에 ()를 붙여 호출하면 base 객체에 binding됨
• 다른 연산은 함수의 참조값만 전달 → 함수 단독 실행 → 암시적 바인딩을 기대할 수 없음(인수로 전달된 콜백함수의 경우 객체에 대한 어떤 정보도 포함하지 않기 때문에 this가 바인딩이 안 됨)

new 바인딩

• new func() → 1. 새로운 객체 생성, 2. 함수 코드 실행, 3. 새로 실행한 객체 반환
• new binding : 생성자일 때 this는 새로 반환된 객체
• 생성자는 빈 객체를 만들고 이 객체내에서 this는 만들어진 객체를 가르킨다. 생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없다.

명시적 바인딩(call, bind, apply)

• 함수의 메소드인 apply, call을 이용하면 this의 값을 제어할 수 있다.
• call(context, arg1, arg2), apply(context, args) → call, bind는 인자를 하나하나, apply는 배열이나 유사배열 형태로 전달
• call(context, arg1, arg2) , apply(context, args) : context(this를 바인딩할 객체)
• bind는 함수를 선언할 때, this와 파라미터를 지정해줄 수 있으며, call과 apply는 함수를 호출할 때, this와 파라미터를 지정

우선순위 : new > 명시적 > 암시적 > 기본 바인딩

화살표 함수

• 화살표 함수 : 화살표 함수 안에 this는 실행 당시 상위 문맥, 상위 scope의 this를 가르킴 (어휘적 this, lexical this)
• ES6, 화살표 함수, This
• 상위 스코프의 this를 가르킴, 렉시컬 this