자바스크립트 this bind() 메소드 사용 관련

Question

다음과 같이 this 바인딩 예시를 보았는데, bind() 메소드를 사용시 setTimeout 내부 콜백함수의 this가 전역객체(window)가 아닌 상위 스코프의 this(obj)를 바인딩을 할 수 있다고 하는데,상위 스코프는 foo() 함수 스코프 아닌가요? var value &#61; 1; const obj &#61; { value : 10, foo () { setTimeout(function() { console.log(this.value); }.bind(this), 100); } } }var value &#61; 1; const obj &#61; { value : 10, foo() { setTimeout(()&#61;> console.log(this.value), 100); } }

퀘이사123 · Answer

단편적으로 봤을때는 콜백함수의 상위 스코프는 foo함수가 맞지만(콜백함수는 호출되는 시점에 상위스콥이 결정되긴하지만)bind메소드를 통해 전달되는 this는 foo함수에 바인딩되어있는 this이며, 이 this는 foo함수의 상위 스코프인 obj를 가르킵니다.

fx · Answer

자바스크립트에는 여러 형태의 바인딩이 존재합니다.그중 Lexical scope는 구조적으로 둘러싸인 함수가 상위 스코프 이고, 생각하신 것처럼setTimeout -> foo -> 전역(window) 순으로 연결되며, 해당 문맥에서 찾지 못할 때 연결 고리를 따라 변수를 찾아갑니다.렉시컬 스코프에서 변수를 사용할 때는 this.value 가 아닌 value 로 접근하셔야 합니다.자바스크립트에서 this는 다른 방식으로 바인딩 됩니다. 렉시컬 스코프가 정적으로 바인딩 되는 것과 다르게실행시에 동적으로 바인딩 됩니다. 따라서 자바스크립트에서 this 는함수에서 그냥 사용될 때 (undefined 또는 window: 엄격 모드에 따라)new 키워드와 함께 사용될 때bind, call, apply 와 함께 사용될 때객체의 메서드로 호출 될 때경우에 따라 다르게 바인딩 될 수 있습니다.

자바스크립트 this bind() 메소드 사용 관련

2개의 답변

#this 목록