스터디 4회차 주간 공부 내용 - JS Prototype

잔잔바리디자이너·2022년 3월 25일
0

Study

목록 보기
4/19
post-thumbnail

프로토타입

하 이놈의 프로토타입 개념을 거의 2주간 공부했네요... 그래도 다 이해 못함. 당연함.
자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어다. 일단 모르겠으면 느껴. 자바스크립트를 이루고 있는 거의 모든 것이 객체라는 점. 원시 타입의 값들 빼고 말이다.

객체지향 프로그래밍?

⭐️ 상속과 프로토타입

프로토타입 객체

  • __proto__ 접근자 프로퍼티

  • 함수 객체의 prototype 프로퍼티

  • 프로토타입의 constructor 프로퍼티와 생성자 함수

리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입

프로토타입의 생성 시점

  • 사용자 정의 생성자 함수의 프로토타입 생성 시점

  • 빌트인 생성자 함수의 프로토타입 생성 시점

객체 생성 방식과 프로토타입의 결정

객체 생성 방법:

  • 객체 리터럴에 의해 생성된 객체의 프로토타입

  • Object 생성자 함수에 의해 생성된 객체의 프로토타입

  • ⭐️ 생성자 함수에 의해 생성된 객체의 프로토타입

⭐️ 프로토타입 체인

프로토타입 체인의 종점
프로토타입 체인과 스코프 체인

오버라이딩과 프로퍼티 섀도잉

프로토타입의 교체

  • 생성자 함수에 의한 교체

  • 인스턴스에 의한 교체

constructor 프로퍼티와 생성자 함수간의 연결이 파괴되기 쉽다. 프로토타입 교체를통해 객체 간의 상속 관계를 동적으로 변경하는 것은 번거롭기 때문에 직접 교체하지 않고, 직접 상속하는것이 더 편리하고 안전하다.

instaceof 연산자

생성된 객체의 프로토타입 체인 상에 생성자 함수의 prototype 바인딩 된 객체가 존재 하는지로 연산한다.

직접 상속

  • Object.create로 직접 상속

    장점:
    .call():
  • 객체 리터럴 내부에서 __proto__로 직접 상속

    ES6

정적 프로퍼티와 메서드

정적 프로퍼티와 메서드는 생성자 함수가 생성한 인스턴스로 참조 또는 호출할 수 없다.
This 파트 체크

프로퍼티 존재 확인

  • in 연산자

    객체 내에 특정 프로퍼티가 존재하는지 여부를 확인
    하지만 대상 객체가 상속받은 모든 프로토타입의 프로퍼티를 확인한다.
  • Object.prototype.hasOwnProperty 메서드

    객체 고유의 프로퍼티인 경우에만 true를 반환한다.

프로퍼티 열거

  • for...in 문

    상속받은 프로퍼티도 열거함. 또한 모든 프로토타입의 프로퍼티 중에서 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거함.
  • Object.keys/values/entries 메서드

    객체 자신의 고유 프로퍼티만을 열거.
    - Object.keys: 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환.
    - Object.values: 객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환.
    - Object.entries: 객체 자신의 열거 가능한 프로퍼티 키, 값 쌍의 배열을 2차 배열에 담아 반환.

0개의 댓글