[JavaScript] 프로토타입

Subin·2020년 3월 18일
0

c언어와 Java 등의 언어에서는 클래스를 통해 객체를 생성하는 반면, 자바스크립트는 프로토타입을 통해서 객체를 생성한다. 자바스크립트는 프로토타입을 기반으로 하는 객체 지향 언어이다.

자바스크립트에서 객체를 생성하는 방법

자바스크립트에서 객체는 함수에 의해 만들어진다. 자바스크립트를 만드는 대표적인 두 가지 방식은 아래와 같다.

1. 객체 리터럴

가장 일반적인 자바스크립트의 객체 생성 방식이다.

var obj = {};
console.log(typeof obj); // object

2. Object 생성자 함수

new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성할 수 있다.

var obj2 = new Object();
console.log(typeof obj2); // object

위의 두 방법 중 더 나은 방법이 있는 것은 아니다.
객체 리터럴 방식은 Object 생성자 함수 방식을 축약한 표현이다.

Prototype

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다.

Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다.

var student = {
  name: 'kim',
  score: 90
};

// student에는 hasOwnProperty 메소드가 없지만 아래 구문은 동작한다.
console.log(student.hasOwnProperty('name')); // true

console.dir(student);

student 객체는 함수 Object에 의해 만들어졌기 때문에 hasOwnProperty와 같은 메서드를 공유할 수 있게 된다.

var student = {
  name: 'kim',
  score: 90
}
console.log(student.__proto__ === Object.prototype); // true

객체를 생성할 때 프로토타입은 결정된다. 결정된 프로토타입 객체는 다른 임의의 객체로 변경할 수 있다. 이것은 부모 객체인 프로토타입을 동적으로 변경할 수 있다는 것을 의미한다. 이러한 특징을 활용하여 객체의 상속을 구현할 수 있다.

1. 해당 함수에 Constructor(생성자) 자격 부여
함수를 생성할 때 constructor 자격이 부여되고 new를 통해 객체를 만들어 낼 수 있게 된다.

2.해당 함수의 Prototype 생성 및 연결
함수를 정의하면 함수만 생성되는 것이 아니라 Prototype Object도 같이 생성된다.

그리고 생성된 함수는 prototype이라는 속성을 통해 Prototype Object에 접근할 수 있다. Prototype Object는 일반적인 객체와 같으며 기본적인 속성으로 constructor와 __ proto __ 를 가지고 있다.

construotr는 Prototype 객체와 같이 생성되었던 함수를 가리키고
__ proto __ 는 객체가 생성될 때 만들어졌던 함수의 Prototype 객체를 가르킨다.

function Student () {}

Student.prototype.nameOfSchool = 'Seoul high school';
Student.prototype.classOf = '2020';

var kim = new Student();
var park = new Student();

console.log(kim.nameOfSchool); // Seoul high school

Prototype 객체는 일반적인 객체이므로 속성을 마음대로 추가/삭제 할 수 있다. kim과 park은 Student 함수를 통해 생성되었으니 Student.prototype을 참조할 수 있게 된다.

아래의 링크를 많이 참고 했습니다.
더 자세한 내용이 궁금하시면 참고하시길 바라겠습니다 ^^
참고

profile
정확하게 알고, 제대로 사용하자

0개의 댓글