200830_TIL

Today I learned

• 코어 자바스크립트 책 요약 (this 파트)

@@ 오늘은 이어서 코어 자바스크립트의 this 파트를 읽었다.
수업때 배웠던 전역/함수/메서드/construction mode/call,apply,bind 에서의 5가지 패턴에 더해서 좀 더 자세하게 각 상황별 this 의 값과 그 값이 나오는 이유에 대해서 명확히 알아볼 수 있었다.

수업에서 setTimeout 함수에서 첫번째 인자인 콜백함수에 bind()로 this값을 명시해줘야 한다고 배울 때 쉽사리 이해가 가지 않던 부분이 있었는데, 책을 읽으면서 콜백함수도 결국은 함수이기 때문에 this 값이 명시 되지 않은 경우 window를 가리킨다는 이야기를 듣고 그 궁금증이 풀렸다. bind도 call/ apply와의 차이점이 명확하지 않았는데 복습을 하다보니 call / apply와 다르게 this를 바인딩 한 함수를 리턴한다는 개념을 다시 머릿속에 넣을 수 있었다.

책에서 다음 읽어야하는 파트는 콜백 함수이다. 내일부터 이머시브 수업이 진행되기 때문에 솔로위크 만큼의 속도로는 읽지 못하겠지만 꾸준히 읽어서, 남은 4-7 파트도 꼭 완주해야겠다.

this

• 다른 객체 지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미한다

전역공간의 this

• 전역 공간에서 this는 전역 객체를 가리킨다

• 전역 변수를 선언하면 자바스크립트 엔진은 전역 객체의 프로퍼티로도 할당한다.

• 자바스크립트의 모든 변수는 실은 특정 객체의 프로퍼티로서 동작한다.

  특정 객체란 바로 실행 컨텍스트의 LexicalEnvironment다.

  실행 컨텍스트는 변수를 수집해서 L.E의 프로퍼티로 저장한다.

  변수에 접근하고자 하면 스코프체인에서 해당 변수를 검색한다. 마지막 전역 스코프까지 도달하고도 담긴 값이 없으면, undefined를 해당 프로퍼티 조차 없으면 에러를 발생시킴

• 프로퍼티를 삭제하는 delete연산자를 사용하여 변수를 삭제할 때 (전역 변수 또한 전역객체의 프로퍼티이므로) 처음부터 전역객체 프로퍼티로 할당한 경우 삭제가 되지만 전역변수로 선언한 경우엔 삭제가 되지 않는다. (자바스크립트의 방어전략, 전역변수 선언시 configuable 속성을 false로 정의)

함수 내부에서의 this

• 어떤 함수를 함수로 호출할 경우 this가 지정되지 않는다.
• this가 지정되지 않는 경우 this는 전역객체를 가리킨다.

메서드 호출 시 그 메서드 내부의 this

• 메서드와 함수의 차이 - 독립성
  함수는 그 자체로 독립적인 기능을 수행한다.
  메서드는 자신을 호출한 대상 객체에 관한 동작을 수행한다.
• 객체의 프로퍼티에 할당된 함수 자체가 메서드가 되는 것이 아니라, 객체의 메서드로서 호 출된 경우에만 유효하다. 함수 앞에 .이 있는 경우 메서드로 호출한 것이다. (혹은 대괄호 표기법). 함 수 앞에 객체가 명시된 경우.
• 메서드를 호출한 객체가 바로 this가 가리키는 값이 된다.
• 메서드 내부에서 선언된 함수일때, 이 함수가 어떻게 호출되는지에 따라 this 값이 결정된다. 오직 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지 없는지가 관건이다.

메서드 내부 함수에서의 this를 우회하는 법

• 메서드 내부 함수에서 함수 자체를 메서드로 호출하지 않으면 this 는 window를 가리킨다 그러나 메서드에서 this를 변수에 담아 그 변수를 내부 함수에서 this 대신 활용하면 this를 우회할 수 있다.

this를 바인딩 하지 않는 함수

• ES6에서 함수 내부에서 this가 전역 객체를 바라보는 문제를 보완하고자 this 를 바인딩 하지 않는 화살표 함수 도입
• 화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 빠져 상위 스코프 this를 그대로 사용할 수 있다

콜백 함수 호출 시 그 함수 내부에서의 this

• 콜백 함수도 함수이기에 기본적으로 this 가 객체를 참조한다.

• 콜백함수를 인자로 받은 함수에서 콜백함수에 this 가 될 대상을 지정한 경우엔 그 대상을 참조한다.

  • addEventListener 메서드는 콜백함수를 호출할 때 자신의 this를 상속하도록 정의돼있다.
    ( ex. document.body.querySelector('a').addEventListener 일경우, querySelector('a')가 곧 this가된다)

• 콜백 함수의 제어권을 가지는 함수(메서드)가 콜백 함수에서의 this를 결정한다.

생성자 함수 내부에서의 this

• 프로그래밍적으로 생성자는 구체적인 인스턴스를 만들기 위한 일종의 틀

  이 틀에는 해당 클래스의 공통 속성들이 미리 준비 돼있고, 구체적 인스턴스의 개성이 더해 개별 인스턴스를 만들 수 있다.

• 함수가 생성자 함수로서 호출된 경우, 내부에서 this는 곧 새로 만들 구체적 인스턴스 자신이 된다.

• 생성자 함수 호출시, 생성자의 prototype 프로퍼티를 참조하는 proto라는 프로퍼티가 있는 객체를 만들고, 미리 준비된 공통 속성 및 개성을 해당 객체에 부여

명시적으로 this를 바인딩하는 방법

• call / apply / bind

• Function.prototype.call(thisArg[, arg1[, arg2[, ... ]]])

• 호출 주체인 함수를 즉시 실행하는 함수 call. 첫번째 인자로 this 바인딩. call을 이용하면 임의의 객체를 this로 지정 가능.

• call / apply 활용 사례

  • 유사배열 객체에 배열 메서드 사용 ( 키가 0 또는 양의 정수인 프로퍼티 존재, length 프로퍼티 값이 0 또는 양의 정수인 객체, 즉 배열의 구조와 유사한 객체)
    배열 메서드를 이용하여 slice로 유사배열을 복사하면, 배열로 반환된다.
    arguments 객체도 또한 유사배열객체이므로 배열로 변경 가능하다.
    문자열에도 사용가능하지만, 원본 문자열을 변경하는 메서드는 에러를 던지고, concat 등은 제대로된 결과를 얻을 수 없다.

    ES6엔 유사배열 객체 또는 순회 가능한 모든 종류의 데이터 타입을 배열로 변환하는 Array.from() 메서드를 새로 도입했다.

  • 생성자 내부에서 다른 생성자를 호출

  • 여러 인수를 묶어 하나의 배열로 전달하고 싶을 때 활용 (ex. Math.max, Math.min)

• bind 메서드

  • ES5에서 추가된 기능으로 call 과 비슷하지만 즉시 호출하지 않고 넘겨 받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드
  • bind 메서드는 함수에 this를 미리 적용하는 것과 부분 적용 함수를 구현하는 두가지 목적을 모두 지닌다.
  • bind 메서드를 적용 새로 만든 함수는 name 프로퍼티에 동사 bind의 수동태인 bound라는 접두어가 붙는다. ( 코드 추적에 용이)

• 상위 컨텍스트의 this를 내부함수나 콜백 함수에 전달

• 화살표 함수에서 실행 컨텍스트 생성시, this를 바인딩하는 과정이 제외됨. this 에 접근하고자 하면 스코프 체인상 가장 가까운 this에 접근.

• 별도의 인자로 this를 받는 경우 (콜백 함수 내에서의 this)

  콜백 함수를 인자로 받는 메서드 중 일부는 추가로 this 로 지정할 객체(thisArg)를 인자로 지정할 수 있는경우가 있다.

  forEach()의 두번째 인자 thisArg 에 this를 지정할 수 있다. (map, set 등의 배열 메서드에서도 일부 존재)

  • thisArg를 인자로 받는 배열 메서드
    • forEach
    • map
    • filter
    • some
    • every
    • find