[Javascript] 프로토타입 언어 : prototype 과 객체 생성

자바스크립트는 프로토타입 언어라고 한다. 그런데 여기서 프로토타입이 뭘까? prototype을 알기위해서 우선 객체를 알아야 한다. 객체를 생성하는 대표적 방법은 2가지 종류가 있다. 객체 리터럴 방식과 생성자 함수 (이하 클래스)를 통한 방식이있다. 

 

 

1.객체 리터럴(object literal) 방식

foo는 네임스페이스처럼 동작한다. 중괄호로 간단하게 생성할 수 있다.

//리터럴 방식
const foo = {}; 

 

객체 리터럴은 점표기법(.) 으로 값을 가져오거나 정의 할 수 있다.

const foo = { name: 'foo' };
foo.number = 1;
console.log(foo.name); // 'foo'
console.log(foo.nomber); // 1

 

또한 괄호표기법(대괄호 [ ]) 으로도 점표기법과 같이 정의할 수 있다. 괄호 안쪽에는 문자열로 정의한다.

const foo = {};
foo['name'] = 'foo';
console.log(foo['name']); // 'foo'

 

객체 리터럴을 사용해서 객체를 생성하는 것은 연속된 구조체나 연관된 데이터를 일정한 방법으로 변환하고자 할때 많이 쓰인다.

 

 

 

2. 생성자 함수를 통한 객체 생성

function Foo() {}
const foo = new Foo();

클래스를 통해 만들어진 객체는 constructor 가 생긴다. constructor 속성은 원본 생성자 함수 자신을 가리킨다. 

 

 

리터럴 표현

클래스 방식

 

 

생성자 함수를 통해 만들어진 객체를 이용해 객체를 만들어보자. 생성자 함수는 constructor 속성을 지닌 객체를 프로토타입 객체로 가지고있다.

function Foo() {
    this.name ='foo';
    this.greeting = function() { return 'hello'}
}

const foo = new Foo();
foo.name; // 'foo'
foo.greeting // 'hello'

여기서 this는 new를 통해 생성된 객체 인스턴스를 가리킨다.

Foo를 통해 생성된 객체들은 각각 greeting이라는 함수를 다시 정의 한다.

{
    name: 'foo',
    greeting: () => 'hello'
}

// 내부적으로 foo는 위처럼 정의되어진다

여러개를 Foo를 통해 생성하였다면 각각 greeting 함수를 다시 정의 한다. 메모리적으로도 낭비가 있기 때문에 좋은 방법이아니다. 이러한 문제를 prototype 으로 해결한다.

 

 

prototype 이해하기

자바스크립트는 프로토타입(prototype) 언어다. 모든 객체들이 상속을 받기위해 프로토타입 객체를 가진다.

프로토타입 객체를 이용하면 부모, 부모의 부모 등 상위의 프로토타입 객체로 정의된 것들을 상속받을 수 있으며, 이것을 프로토 타입 체인 이라고 한다. 

function Foo2() {
	this.name = 'foo'
}

Foo2.prototype.greeting = function() { return `${this.name} hello`; }

prototype으로 정의된 것은 그렇지 않은 것과 차이를 갖는다.

 

 

 

foo 와 foo2를 살펴보면 foo는 greeting 함수가 재정의되는 반면 foo2는 prototype객체를 통해 greeting 함수에 접근할수 있다. 이렇게 각각 프로토타입 체인을 통해 메모리 부담이 적어지면서 greeting 함수 혹은 그 상위 프로토타입객체에 prototype에 정의되어진 함수나 변수에 접근 가능해진다.

 

__proto__는 객체가 정의되어진 프로토타입으로 접근할수 있는 속성이다. 그렇기 때문에 프로토타입 체인이 가능해서 상속이 가능해진다. 결국 모든 자바스크립트의 객체는 Object를 상속한다. 

 

class라는 예약어를 사용하면 더 직관적이고 쉽게 해도된다. 

class Foo {
    constructor(){
    	this.name="foo"
    }
    
    greeting(){
        return 'hello';
    }
}

 

 

객체와 prototype에 대한 포스팅을 작성하며 더욱 세세한 부분까지 알게되어 좋았다. 앞으로도 꾸준히 기록해야겠다.

 

 

도움을 준 곳

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes