Prototype

이창훈·2022년 5월 26일
0

Prototype

참조 : 우아한 Tech 크리스의 Prototype

Prototype 이해하기

  • 프로토 타입은 클래스, 객체의 내용복사 없이도 상속을 구현할 수 있게 해주는 방법이다.
  • Prototype은 상속이 아니라 "연결"이다.

의문점

  • 클래스가 없다면 객체를 어떻게 설계대로 찍어낼 수 있는가 ?

    클래스는 객체를 찍어내는 틀이다.
    실제로 실행되는 코드는 클랙스가 아니다.

class Person{
	constructor(name){
    	this.name = name;
    }
    sayHello(){
    	console.log(`${this.name} : hello`);
    }
}
// 위 코드가 실제로 실행되는 코드는 클래스가 아니다.

function Person(){
	this.name = name;
    this.sayHello = function(){
    	console.log(`${this.name} : hello`);
    }
}
const chris = new Person('chris');
// 사실상 function()코드 가 변환되어 사용되는 셈이다.
  • functions Person() 함수는 return이 없는데 어떻게 객체가 생성되는 걸까?

  • 함수와 new가 만나면 자바스크립트 딴에서 숨겨진 일들이 발생한다.

의문점 1.new와 함수가 만나면 발생하는 일

    1. new 연산자가 새로운 빈 객체(인스턴스)를 메모리 상에 생성함.
    1. 그 후에 Person함수 안에 this 에 생성된 빈 객체(인스턴스)가 바인딩된다.
    1. 그 상태에서 Person안의 내용이 실행되는데 그 내용들이 this의 속성(프로퍼티)를 할당하고 채워준다 한다.
    1. return 하는 것이 없다면 그렇게 만들어진 this가 return 된다.

의문점 2. 복사 없이 어떻게 상속을 수행할 수 있는 것인가?

  • 다른언어에서 일반적인 class에서 하나의 class가 부모class로 부터 상속을 받게 되면 자식 class로 인해 만들어진 인스턴스에는 부모와 자식 모두의 내용이 합쳐져서 반영되게 된다.

  • 하지만 자바스크립트 에서는 불가능하다.

  • 자바스크립트는 깊은 복사가 일어날 수 없다. 객체 자체나 코드 내용을 복사하는거 불가능

  • 복사 할 수 있는 것은 원시 값과 객체의 참조 값 뿐이다.

  • 하지만 자바스크립트는 상속을 흉내 내기위해서 상속이 아닌 연결이라는 개념을 활용한다.

.__proto__

  • 이 연결은 .__proto__ 라는 이름의 속성을 바탕으로 실행된다.

  • 자바스크립트의 모든 객체들은 .__proto__ 라는 속성을 가지고 있다.

  • 객체간의 연결 관계 이해하기
    1. 다른 객체를 바탕으로 만들어진 객체라면
    객체는 자신의 원형이라고 할 수 있는 객체가 있다면 그 객체를 가리키는.__proto__링크를 자동으로 가짐
    2. 그냥 객체가 아니라 함수라면
    .__proto__외에도 함수의 프로토타입 객체를 가진다.
    3. new + 함수로 만들어진 객체라면

Protytype Chaining을 이해하기

  • prototype을 .__proto__를 따라 탐색하기
const a = {
	attr1 : 'moohan~',
}

const b = {
	attr2: 'mooyaho~',
}
a.__proto__ = b;
console.log(a.attr2) // 'mooyaho~' 

a객체의.__proto__를 직접적으로 b에 연결 시키면 a객체에는 없는 속성이 있어도 __proto__통해 b객체로 이동하여 거기서 프로퍼티를 찾아서 a객체에 없는 속성도 b객체에 있다면 프로퍼티를 사용할 수 있다.

Prototype 활용 예시

profile
실패를 두려워하지 않고 배우고 기록하여 내일의 밑거름 삼아 다음 단계로 성장하겠습니다.

0개의 댓글