본문 바로가기

자바스크립트-스터디[2021-10-05~완료]

19장 프로토타입

19.1 객체지향 프로그래밍
19.2 상속과 프로토타입
19.3 프로토타입 객체
19.4 리터럴 표기법에 의해 생성된 객체의 생성자 함수, 프로토타입
19.5 프로토타입의 생성 시점
19.6 객체 생성 방식, 프로토타입의 결정
19.7 프로토타입 체인
19.8 오버라이딩과 프로퍼티 섀도잉
19.9 프로토타입의 교체
19.10 instanceof 연산자
19.11 직접 상속
19.12 정적 프로퍼티, 정적 메서드
19.13 프로퍼티 존재 확인
19.14 프로퍼티 열거

 

시작!

자바스크립트

명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍

멀티 패러다임 프로그래밍

 

 

클래스 == 함수

기존 프로토타입 기반 패턴의 문법적 설탕.

 

클래스 , 생성자 함수

프로토타입 기반의 인스턴스 생성

 

클래스 >> 생성자 함수 보다 엄격!

클래스 >> 생성자 함수에서는 제공하지 않는 기능을 제공한다.

 

자바스크립트 ==  객체 기반의 프로그래밍 언어.

자바스크립트를 이루고 있는 거의 모든 것 == 객체

 

 

19.1 객체지향 프로그래밍

전통적 명령형 프로그래밍 : 절차지향적 관점 >>>>>>에서 벗어나

객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임.

 

속성 : attribute, property : 특징이나 성질을 나타냄 :다른사람과 구별하여 인식함. : 이름은 000, 성별 여자, 나이 32

 

추상화: 필요한 속성만 간추려 표현

 

const person = {
 name: 'Lee',
 address:'Seoul'
};
console.log(person);

 

 


19.2 상속과 프로토타입

상속: 부모님이 물려준다.

불필요한 중복을 제거함.

 

 

19.3 프로토타입 객체

프로토타입 객체 == 부모 객체 역할 == 부모

객체의 부모는 하나다. 즉 프로토타입은 하나다.

person 객체

[[prototype]] 내부 슬롯에 직접 접근 못함.

__proto__ 접근자 프로퍼티를 통해 자신의 부모를 간접적으로 접근 할 수 있다.

__proto__   접근자 프로퍼티 를 통해 자신의 부모를 간접적으로 접근
핑크처럼 부모의 메서드를 person은 사용할 수 있다 == 상속 받음

 

obj.__proto__ = papa; 를 하니까 가리키는 대상이 부모가 되버림!!!
__proto__ 접근자 프로퍼티는 핑크색이 가지고 있다.

핑크색: Object.prototype

모든 객체는 프로토체인으로 묶여 있다.

가장 끝(부모)은  Object.prototype 객체이다. 

 

 

상호 참조는 안된다.

이렇게 하면 무한 루프에 빠진다. 단 방향 Linked List가 되어야한다.

 

ob.__proto__ 는 상속받을수 없다.

뭔말인지 모르겠는데. __proto__ 접근자 사용하지말고

Object.getPrototypeOf(대상객체); 를 사용하라고 한다.

 

 

함수 객체
function(){ }
prototype 프로퍼티 소유함
일반 객체
{ }
prototype 프로퍼티 소유 안함
화살표 함수 == non-생성자
const Person = name => {this.name = name;};
prototype 프로퍼티 소유 안함
프로토타입 생성 안함
ES6 메서드 축약 == non-생성자
const obj = {
   foo(){}
}l
prototype 프로퍼티 소유 안함
프로토타입 생성 안함

화살표 함수는 생성자 함수가 아니다!!!

 

 

 

 

 

생성자 함수를 me에 할당... 결국 me 부모와 Person 생성자 함수의 부모는 같다

 

 

 

 

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