TIL DAY 179

오늘 배운 일

✔️ 자바스크립트 복습!

1. 객체 생성자 함수와 프로토타입

자바스크립트 입문 코스에서 중요한 역할을 맡고 있어서 완벽히 이해하자!

시작하기 앞서, 객체 생성자라는 것을 알아볼텐데...

객체 생성자(Object Constructor Function) 는?

• 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현 할 수 있게 해준다.
• 일반적으로 객체 생성자를 사용할 때는 함수의 이름을 대문자로 시작해준다.
• 그리고 새로운 객체를 만들었으면, new 라는 키워드를 앞에다가 붙여준다.

간단한 예제 )

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
  this.say = function() {
    console.log(this.sound);
  };
}

const dog = new Animal('개', '멍뭉이', '멍멍');
const cat = new Animal('고양이', '냐옹이', '야옹');

dog.say();
cat.say();

결과는...

멍멍
야옹

위의 코드를 참고하면, dog 가 가지고 있는 say 함수와 cat 이 가지고 있는 say 함수는 코드가 똑같음에도 객체가 생성될 때 마다 함수도 새로워져서 this.say 로 설정이 되어있다.

위에처럼 같은 객체 생성자 함수를 사용하는 경우, 특정 함수 또는 값을 재사용 할 수 있는것을 바로 프로토타입이라고 한다.

프로토타입 (Prototype)

자바스크립트에서 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 이것은 마치 객체 지향의 상속 개념과 비슷하게 부모 객체의 프로퍼티 또는 메서드를 상속받아 사용할 수 있다.

이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다.

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

프로토타입은 밑에 예제와 같이 객체 생성자 함수 아래에...

.prototype.[원하는키] = 코드를 입력하여 설정 할 수 있다.

예제 )

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}

Animal.prototype.say = function() {
  console.log(this.sound);
};
Animal.prototype.sharedValue = 1;

const dog = new Animal('개', '멍뭉이', '멍멍');
const cat = new Animal('고양이', '냐옹이', '야옹');

dog.say();
cat.say();

console.log(dog.sharedValue);
console.log(cat.sharedValue);

결과는...

멍멍
야옹
1
1

객체 생성자 상속받기

예를 들어 우리가 Dog 와 Cat 이라는 객체 생성자를 만든다고 가정해보자!
그리고 해당 객체 생성자들에서 Animal 의 기능을 재사용한다고 가정해보면 밑에처럼 구현할 수 있다.

예제 )

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}

Animal.prototype.say = function() {
  console.log(this.sound);
};
Animal.prototype.sharedValue = 1;

function Dog(name, sound) {
  Animal.call(this, '개', name, sound);
}
Dog.prototype = Animal.prototype;

function Cat(name, sound) {
  Animal.call(this, '고양이', name, sound);
}
Cat.prototype = Animal.prototype;

const dog = new Dog('멍멍이', '멍멍');
const cat = new Cat('야옹이', '야옹');

dog.say();
cat.say();

결과는...

새롭게 만든 Dog 와 Cat 함수에서 Animal.call 을 호출하고 있는데, 이 때 첫 번째 인자로는 this 를 넣어줘야 하고 그 이후에는 Animal 객체 생성자 함수에서 필요로 하는 파라미터를 넣어줘야 한다.

추가적으로 prototype 을 공유해야 하기 때문에 상속받은 객체 생성자 함수를 만들고 나서 prototype 값을 상위 함수인 Animal.prototype 으로 설정해주었다.

프로토타입 체이닝(prototype chain)

객체는 자신의 프로토타입 객체의 프로퍼티에 접근할 수 있다. 막 프로토타입 객체를 찾아가는 것은 아니고, 객체에서 프로퍼티를 접근할 때, 보니 자기 자신에게 그러한 프로퍼티가 없는 경우 프로토타입 객체에 혹시 그것이 있나 찾으러 가는 것이다.

그리고 자신의 프로토타입 객체에도 해당 프로퍼티가 없으면 더 상위의 프로토타입 객체에 찾으러 가서 있으면 불러온다.

이러한 과정을 통해서 최종적으로 모든 객체의 부모 객체인...

Object.prototype에게까지 접근을 하게 되는데 이런 일련의 접근 프로세스를 prototype chianing이라고 부른다.

쉽게 말해 가상의 연결 고리라고 생각하면 된다.

예제 )

var obj = new Object(); // 이 객체의 프로토타입은 Object.prototype이다.

var arr = new Array(이다);  // 이 객체의 프로토타입은 Array.prototype이다.

var date = new Date();  // 이 객체의 프로토타입은 Date.prototype이다.

하지만 Object.prototype 객체는 어떠한 프로토타입도 가지고 있지 않으며, 아무런 프로퍼티도 상속받지 않는다.

Object.prototype 객체는 모든 프로토타입 체인에서 가장 상위에 존재하는 프로토타입이다.

팁!

• 따라서 모든 자바스크립트의 객체는 기본적으로 Object.prototype 객체를 프로토타입으로 상속받는다.

끝으로 :

• 생각보다 내가 잘 몰랐던 부분에 대해 알아가게 되어서 기분이 좋다.
• 프로토타입이 중요하게 느껴진다.