반응형
오늘 배운 내용들
- 객체 리뷰
- 객체 지향 자바스크립트
- this 키워드
- apply, call , bind
객체 지향 프로그래밍
실행에 따른 this의 바인딩 패턴
| 케이스 | this의 값 |
| 메소드 호출 | 실행 시점에서 부모인 객체 |
| new 키워드를 이용한 생성자 호출 | 새롭게 생성된 인스턴스 객체 |
| call 또는 apply 등에 의한 호출 | 첫 번째 인자로 전달된 객체 |
화살표 함수는 this의 값에 대해 결정하지 않기 떄문에 함께 사용하지 않는다.
Node에서 this는 무엇일까?
node에서는 this가 module.exports에 해당한다. module.exports = exports = this 라고 생각하자.
call, apply, bind
| 매개변수 | 함수 표현 | 반환값 | |
| apply | 첫 번째 인자는 this, 다음 인자로는 인수 배열 하나만 받는다. | func.apply(thisArg, [argsArray]) | 지정한 this 값과 인수들로 호출한 함수의 결과. |
| call | 첫 번째 인자는 this, 다음 인자로는 인수의 목록을 받는다. | func.call(thisArg[, arg1[, arg2[, ...]]]) | this 와 arguments 를 매개로 호출된 함수의 반환값. |
| bind | 메소드가 호출되면 새로운 함수를 생성하고, 첫 번째 인자의 value로 this 키워드를 설정 | func.bind(thisArg[, arg1[, arg2[, ...]]]) | 지정한 this 값 및 초기 인수를 사용하여 변경한 원본 함수의 복제본. |
만약 this의 값이 의미가 없는 경우라면, 첫 번째 인자에 null이 들어가면 된다. 만약 우리가 bind 메소드를 사용할 때, let something = func.bind(null, "anything") 과 같은 형태로 코드가 작성 되었다면 첫 번째 인자는 null이 되고 something은 func에 들어 갈 함수 자체를 반환하게 된다. 함수 내에 "anything"이 바인드 되어있다.
어려웠던 내용
- apply나 call 등의 메소드를 사용할 때, 첫 번째 인자값이 this가 된다고 배웠는데, 첫번째 인수가 지정되지 않고 함수를 호출했을 경우에는 왜 undefined가 나오지 않는지 정확히 이해하지 못했다. 일단 관련된 내용을 mdn에서 검색했는데 strict mode에서는 this가 undefined가 된다고 했는데, 그렇지 않은 경우는 this의 값이 전역 객체에 바인딩 된다고 써 있다. (그리고 strict mode는 최적화를 위해 좀 더 엄격하게 문법을 체크하는 모드라 들었는데 구체적으로 어떤 개념인지 이것 역시 잘 파악이 안된다.) 오늘 했던 과제 중에 이 부분에 대해서 페어분이랑 가장 많이 고민했는데 이유를 너무 알아내고싶다..
- 유사배열 개념에 대해서 아직 조금 헷갈린다. 유사배열이란 단어가 대체 무슨 소린가 싶었는데 Array-like Object라는 단어로 이해하니 그나마 좀 더 납득이 갔던 것 같다. 한 마디로 배열이 아닌데 배열인 척 하는 객체고 배열인지 Array.isArray()로 검사를 하면 결과가 false로 나온다. 따라서 유사 객체는 배열이 아니기 때문에 배열의 메소드를 쓸 수 없고 객체 내에 length란 프로퍼티가 반드시 존재해야하며 배열의 인덱스같이 프로퍼티의 키가 0, 1, 2 ... 와 같이 구성된다고 한다.
반응형
