__proto__

박성현·2020년 3월 25일
0

proto

let superObj = {superVal : 'super'}
let subObj = {subVal : 'sub'}
subObj.__proto__ = superObj;

console.log(subObj.subVal)
console.log(subObj.superVal)

sub
super

subObj 에는 superVal 이라는 속성이 없음에도 불구하고 super가 출력이 되는데
이러한 이유는 proto 라는 keyword 때문인데 우선 subObj는 자신이 superVal이라는 속성이 있는지 찾아보고 없다면 proto 로연결된 superObj를 찾아가 superVal 이라는 속성을 찾은후 값을 출력해 준다고 이해하면 된다고 생각한다.이렇게 proto
속성을 통해 상위 프로토타입과 연결되어있는 형태를 프로토타입 체인(Chain)이라고 합니다.

proto 는 사실 javascript 표준에서는 표준이라고 인정하지는 않는다 하지만 대부분의 브라우저와 javascript 는 proto 를 구현하여 사용한다 하지만 정석이라고는 할수없으니 똑같은 역활을 하는 상속방법인 Object.create()를 소개해보겠습니다

Object.create()

let superObj = {superVal : 'super'}
// let subObj = {subVal : 'sub'}
// subObj.__proto__ = superObj;
let subObj = Object.create(superObj);
subObj.subVal = 'sub'

console.log(subObj.subVal)
console.log(subObj.superVal)

sub
super

Object.create() 메소드를사용한 proto 와 같은 출력값을가진 코드이다,성능은 같지만 이 정석적인 방법이 더 좋은 방법이라고 할수있다고 한다, 또 이 방법을 사용시 주의할점은 constructor를 명확히 연결시켜주는게 중요하다

subObj.prototype.construcotr = subObj;

이유는 자바스크립트가 OOP를 생각하지 않고 만들어진 언어이기 때문이다.

모든 객체는 Object.prototype를 상속받는다.
모든 function 에는 프로토타입이라는 속성이있다.
prototype = 모델의 청사진을 만들 떄 쓰는 원형객체(original form)
constructor = 인스턴스가 초기화될 때 실행하는 생성자 함수
this = 함수가 실행되때, 해당 scope 마다 생성되는 고유한 실행 context
new키워드로 인스턴스를 생성했을 때에는 해당 인스턴스가 this의 값이 된다.

profile
FrontEnd Developer

0개의 댓글