[TIL] 2020. 06. 10. ScopeChain_Bind

달밤·2020년 6월 10일
0

TIL

목록 보기
36/110
post-thumbnail

오늘 배운 것

Scope Chain

Identifiers(식별자)를 찾는 일련의 과정

  • 자바스크립트는 함수가 정의될 때의 환경을 기준으로 스코프가 설정.(호출X)
var a = '전역 변수'

function outFunc(){
 var a = '지역 변수';     (A)
 function inFunc(){
  console.log(a); 	 (B)
 }
 inFunc();
}

outFunc(); // '지역 변수'
  • 위 코드의 경우 inFunc 함수 내에 변수 a가 설정되어 있지 않음에도 outFunc 함수 내의 지역 변수 a의 값을 가져오는 것을 볼 수 있다.
  • 이렇듯 해당 스코프 내에 정의 되어 있지 않은 경우, 상위 스코프를 차례대로 탐색하며 식별자를 찾는 과정을 Scope Chain이라고 한다.
  • 따라서 만약 outFunc 함수 내의 변수 a가 정의되어 있지 않다면, 전역 변수 a가 출력 될 것이다.

Bind() 메소드

this.x = 9;		// 전역 스코프에서 this는 전역객체 window

var module = {
  x: 81,		
  getX: function() { return this.x; }
};

module.getX(); // 81	
// module object의 메소드에서 불러냈으므로, this는 해당 객체 module

var retrieveX = module.getX;
retrieveX(); //9
// 변수에 메소드를 할당하게 되면, 단순 일반 함수를 작성한 것과 동일
// 즉 함수가 실행되었을 때 this는 전역객체

// 하지만 bind를 이용해 명시적으로 바인딩해 줄 수도 있다.
var boundGetX = retrieveX.bind(module);
// module과 바인딩된 'this'가 있는 새로운 함수 생성

boundGetX(); // 81
  • call(), apply() 메소드를 통해서도 명시적으로 바인딩해 줄 수 있다.
  • 이것들과 bind() 메소드의 차이점은 함수를 반환한다는 것이다.
  • 따라서 bind()메소드로 this와 module을 명시적으로 바인딩한 후 새로운 변수에 할당하는 것도 가능.
  • 반면 call(), apply()는 명시적으로 바인딩 후 곧 바로 함수를 실행하기 때문에 변수에 할당하는 것은 어렵다.
profile
다 늦은 밤, 달밤의 개발일기

0개의 댓글