[코어자바스크립트] 03. 종잡을 수 없는 this

JavaScript에서 this가 동작하는 방식(규칙?)

 

함수로서 호출됐을 때에는 this에 전역 객체가 바인딩 되고, 메서드로서 호출됐을 때에는 this에 호출 주체에 대한 정보가 담긴다. setTimeout처럼 this를 정의하지 않는 함수라면 전역 객체를 바인딩하고, 77p. addEventListener가 메서드로서 호출되므로 그 앞에 있는 #a 요소를 this에 바인딩 한다. 이것이 가능한 이유는 addEventListener 메서드는 콜백함수를 호출할 때 자신의 this를 상속하도록 정의돼있기 때문.

 

함수와 메서드의 차이는?

함수와 메서드의 차이는 독립성 그 자체로 독립적인 기능을 수행하면 함수 자신을 호출한 대상 객체에 관한 동작을 수행하면 메서드 (참고) 어떤 함수를 객체의 프로퍼티에 할당했을 땐, 객체의 메서드로서 호출하면 메서드로 동작 , 그렇지 않다면 함수로 동작 - p.70 this를 변수에 할당해서 우회하는 방법으로 위 의아점을 해결할 수 있다.

 

화살표 함수에서 this 바인딩 과정 자체가 빠져있을까?

화살표함수는 this를 바인딩하지 않는다. 접근하고자 하면 스코프체인상 가장 가까운 this에 접근하게 된다. 그래서 상위의 실행 컨텍스트를 유지하기 위해서 화살표 함수를 쓴다. 그게 아니면 this는 선언될 때 바인딩을 하게 되어 예상치 못한 객체를 참조할 수 있다.

 

책에서는 var를 기준으로 나와있는데 let, const는 어떻게 동작할까?

var는 선언될 때 전역 객체의 프로퍼티로 저장된다. let, const는 전역 객체의 프로퍼티로 저장되지 않는다. useStrict로 this로 window에 접근하지 못하게 하는 방법도 있다. let, const 는 블록 레벨 스코프로 변수를 사용하기 위해서 만들어진 애라서 전역 객체의 프로퍼티로 저장되지 않게 해놓은 것 같다.

 

call, apply, bind 의 차이점은?

call은 두 번째부터 끝 까지의 인자를, apply는 두번째 인자를 배열로서 받아 그 안의 요소들을 호출할 함수의 매개변수로 지정한다. bind는 즉시 호출하지는 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드이다. call, apply는 this를 직접 binding하기 위해서 쓰는데 es5 까지는 여러 인수를 한 번에 넘길 때 많이 썼을 것 같다. es6에서는 펼침 연산자를 사용할 수 있다. es5까지는 화살표함수도 없었으니까, this 바인딩을 수동으로 계속 신경을 써줬어야 해서 많이 썼을 것 같다. bind는 즉시 호출하고 싶지 않을 때. this를 미리 적용하는 목적, 부분 적용 함수를 구현하고 싶을 때 쓴다. p.88

 

유사배열객체를 배열로 변환하는 방법은?

es5: slice 메서드는 배열메서드인데 변수를 아무것도 넘기지 않으면 원본 배열의 얕은 복사본을 반환한다. 유사배열객체의 메서드로서도 동작이 가능한데 slice는 배열 메서드이기 때문에 유사배열객체를 배열로 반환하게 된다. Array.prototype.slice.call(obj); es6: Array.from 메서드를 사용한다.

 

콜백 함수 내부에서 사용될 this 값을 원하는 대로 변경할 수 있을까요?

forEach, map, filter, some, every, find 같은 경우에 첫 번째 인자로 콜백함수를 받고, 두번째 인자로 thisArg를 받을 수 있는데 이 때 thisArg로 넘겨주는 값을 해당 콜백함수의 this값으로 지정할 수 있다. thisArg로 아무것도 넘겨주지 않으면 undefined를 thisArg로 사용한다. 그래서 이 때, 해당 콜백함수의 this는 함수로 호출되는 콜백 함수의 특성상 전역 객체를 참조하게 된다.