자바스크립트

[자바스크립트] 프로토타입 쉽게 이해하기

세모이 2022. 4. 23. 15:24
반응형
JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

 

Prototype은 클래스, 객체의 내용 복사 없이도 상속처럼 보이는 기능을 구현할 수 있게 해주는 방법

→ 상속이 아닌 연결

function Person(name){
	this.name = name;
	this.sayHello = function(){
		console.log(`${this.name}: hello`);
	}
}

const gildong = new Person('gildong');
  1. new 연산자가 함수와 같이 있으면 새로운 빈 객체를 메모리 상에 생성
  2. 생성된 빈 객체가 this에 바인딩
  3. this 객체의 속성을 채운다.
  4. 함수 안에 return 하는 것이 없다면 만들어진 this가 반환된다

원형이 되는 객체 즉 유전자라고 보면 됨

프로토타입에 뭔가 추가하면 자식들이 사용 가능

function A(){ // 여기다 쓰면 자식들{a:'A', b:'B'} 가짐
	this.a = 'A';
	this.b = 'B';
}

A.prototype.name='test' // 여기다 쓰면 부모만 {name:'test'} 가짐
const test = new A();
test // {a: 'A', b: 'B'}
test.name // 'test'

 

부모 유전자가 가지고 있는데 왜 자식이 쓸 수 있느냐?

test.name 을 출력하면 ‘test’가 나온다

왜?

-> test 객체 안에 name이 없으면 부모 유전자를 뒤진다.

거기 있으면 출력을 하기 때문

<object에서 자료 뽑을 때 일어나는 일>

  1. 직접 자료를 가지고 있으면 출력
  2. 없으면 부모유전자까지 뒤진다.
  3. 없으면 부모의부모 부모 부모까지

배열을 예로 들어 const array = [3,2,4]가 있을 때

sort(),length 같은 것들을 쓸 수 있는데 우리는 추가 하지 않았어도

Array()의 자식이기 때문에 쓸 수 있다.

Array.prototype 확인해보면 된다.

 

* 예시

많은 배열에 적용이 되는 함수를 만들고 싶으면

// 배열안의 숫자를 제곱의 형태로 출력하고 싶을 때
Array.prototype.multiple = function(a){
    return this.map(a=>a*a)
}

const number = [2,4,8,16]

number.multiple() // [4, 16, 64, 256]

https://www.youtube.com/watch?v=wUgmzvExL_E

반응형