[모딥다] 19장 (2) 프로토타입

 

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

 

프로토타입 프로퍼티와 같은 이름의 프로퍼티를 인스턴스에 추가하면

-> 덮어쓰는 것이 아니라 인스턴스 프로퍼티로 추가한다.

인스턴스 메서드가 프로토타입 프로퍼티를 오버라이딩 했고, 

프로토타입 메서드는 가려진다.

=> 이렇게 상속 관계에 의해 프로퍼티가 가려지는 현상 :: 프로퍼티 섀도잉 

 

📌 오버라이딩

: 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하려 사용하는 방식

 

📌 오버로딩

: 함수의 이름은 동일하지만, 매개변수의 타입 or 개수가 다른 메서드를 구현하고, 

매개변수에 의해 메서드를 구별하여 호출하는 방식. 

JS 는 오버로딩은 지원하지 않지만 arguments 객체를 사용하여 구현할 수는 있다.

 

 

프로토타입의 메서드를 삭제하려고 시도 -> 인스턴스 메서드가 삭제됨. 

:: 하위 객체를 통해 프로토타입의 프로퍼티를 변경, 삭제 하는 것은 불가능함. 

즉, get 액세스는 허용되나 set 액세스는 허용 안됨. 

 

프로토타입 프로퍼티를 변경 또는 삭제하려면 -> 프로토타입에 직접 접근해야함. 

 

 

 

 

 

 

🍒 19.9 프로토타입의 교체

 

프로토타입은 임의의 다른 객체로 변경할 수 있음. = 부모 객체인 프로토타입을 동적으로 변경할 수 있다는 것을 의미함. 

=> 이런 특징을 활용해 객체간의 상속 관계를 동적으로 변경할 수 있음. 

 

19.9.1 생성자 함수에 의한 프로토타입의 교체

 

프로토타입을 교체하면 -> construnctor 프로퍼티와 생성자 함수 간의 연결이 파괴된다.

constructor 프로퍼티를 추가해서 되살릴 수도 있다.

 

 

19.9.2 인스턴스에 의한 프로토타입의 교체

 

인스턴스의 __proto__ 접근자 프로퍼티 또는 Object.setPrototypeOf 메서드를 통해 프로토타입을 교체할 수 있다.

 

생성자 함수의 prototype 프로퍼티에 다른 임의의 객체를 바인딩 한가는 것은 미래에 생성할 인스턴스의 프로토타입을 교체하는 것임. 

 

 

📌 생성자 함수에 의한 프로토타입 교체 VS 인스턴스에 의한 프로토타입 교체

생성자 함수의 prototype 프로퍼티가 교체된 프로토타입을 가리킴 ⭕ : 생성자 함수

생성자 함수의 prototype 프로퍼티가 교체된 프로토타입을 가리키지 ❌ : 인스턴스

 

프로토타입 교체를 통해 상속 관계를 동적으로 변경하는건 꽤나 번거로우니, 직접 교체하지 않는 것이 좋다.

 

 

 

 

 

 

🍒 19.10 instanceof 연산자

 

객체 instanceof 생성자함수

 

생성자 함수의 prototype 에 바인딩 된 객체가, 객체의 프로토타입 체인 상에 존재하면 -> ⭕ true

생성자 함수의 prototype 에 바인딩 된 객체가, 객체의 프로토타입 체인 상에 없으면 -> ❌ false

 

(걍 객체는 생성자 함수의 instance 인가 라는 연산자 아닌가?)

 

아 인스턴스 맞아도 false 나올 수 있음. 

연결 파괴됐을 수도 있음.

 

 

 

 

🍒 19.11 직접 상속

 

19.11.1 Object.create 에 의한 직접 상속

명시적으로 프로토타입을 지정해 새로운 객체를 생성함. 

 

Object.create(생성할 객체의 프로토타입으로 지정할 객체, Option 생성할 객체의 프로퍼티 키와 프로터피 디스트립터 객체로 이루어진 객체)

 

객체를 생성하면서 직접적으로 상속을 구현하는 것. 

 

장점

- new 연산자가 없어도 객체를 생성할 수 있다.

- 프로토타입을 지정하면서 객체를 생성할 수 있다.

- 객체 리터럴에 의해 생성된 객체도 상속받을 수 있다.

 

 

19.11.2 객체 리터럴 내부에서 __proto__에 의한 직접 상속

 

create 방법은 장점이 있지만, 두번재 인자로 프로퍼티를 정의하는게 번거옵다.

 

ES6 에서는 객체 리터럴 내부에서 __proto__ 접근자 프로퍼티를 사용하여 직접 상속을 구현할 수 있다.

const myProto =  {x: 10}


const obj ={
	y: 20, 
    __proto__ : myProto
}

 

 

 

 

 

🍒 19.12 정적 프로퍼티/메서드

 

정적 프로퍼티/메서드 : 생성자 함수로 인스턴스를 생성하지 않아도 참조/호출할 수 있는 프로퍼티/메서드.

-> 생성자 함수가 생성한 인스턴스로 참조/호출할 수 없다.

 

.strictProp

.stricMethod

 

Object.prototype.~ : 모든 체인의 종점의 메서드이므로 모든 객체가 호출 가능
Object.~ : 인스턴스가 호출할 수 없음

 

 

 

 

 

🍒 19.13 프로퍼티 존재 확인

 

19.13.1 in 연산자

객체 내 특정 프로퍼티가 존재하는지 여부를 확인

key in object

 

 

19.13.2  Object.prototype.hasOwnProperty 메서드

 

객체에 특정 프로퍼티가 존재하는지 확인할 수 있음.

 

 

 

 

🍒 19.14 프로퍼티 열거

 

19.14.1 for...in 문

객체의 모든 프로퍼티를 순회하며 열거

 

const person = {
    name: "Lee",
    address: "Seoul",
}

for (const key in person) {
    console.log(key, person[key])
}

//name Lee
//address Seoul

 

=> 객체의 프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중에서 

프로퍼티 어트리뷰트 [[Enumerable]] 이 true 인 프로퍼티를 순회하며 열거한다.

 

(키가 심벌인 프로퍼티는 열거하지 않음)

 

순서를 보장하진 않지만, 대부분의 모던 브라우저에서 순서 보장, 숫자에 대해선 정렬

 

 

배열엔 for...of 사용하기. 

 

 

19.14.2 Object.keys/values/entries

 

객체 자신의 고유 프로퍼티만 열거하기 위해선 for...in 보단 Object.keys/values/entries 사용 권장.

keys : 가진 키들을 열거-> 배열로 반환

values : 가진 값들을 열거-> 배열로 반환 

entries : 가진 키,값 들을 쌍으로 열거-> 배열로 반환 

 

 

 

 

 

 

프로퍼티 너무 복잡하고 어렵다.

어디에 사용하는지도 의문인데, 이건 강의로 한번 더 듣고 

계속 익숙해지는 수 밖에 없을 듯 하다.