[JS] 프로토타입 (1)

❓자바스크립트는 어떤 프로그래밍 언어일까요

js는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어입니다!

❓JS가 객체지향 언어가 맞나

간혹가다 캡슐화를 위한 키워드인 public, private, protected 등이 없어 js는 객체지향 언어가 아니라고 오해 하는 경우가 있지만 자바스크립트는 클래스 기반 객체지향 언어보다 더 강력한 프로토타입 기반의 객체지향 프로토 타입 기반 언어입니다!

• 또한 js를 이루고 있는 거의 모든것이 객체라고 할 수 있습니다!
  왜그럴까요?
  • js에서는 원시타입의 값을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체로 구성되어 있기 때문입니다!

그래서 프로토 타입이 뭐에요?

• 보통 자식객체에 데이터를 물려주고 싶을때 아래와 같은 형식으로 객체를 생성 하곤 합니다

function parents() {
    this.firstName = 'kim';
    this.w = 54;
}

let test = new parents()

• 이때 js에서는 자동으로 부모객체에 아래와 같이 prototype객체가 생성되게 됩니다.
  

어떻게 사용하나요?

• 우리는 위 처럼 function 안에서 속성을 정의하는 것 뿐만 아니라
  아래 코드와 같이 객체의 속성을 추가하는 문법을 이용해서 객체안의 prototype 속성을 update 시킬 수 있습니다.

function parents() {
    this.firstName = 'kim';
    this.w = 54;
}

parents.prototype.name = 'yun'

let test = new parents()

• 위를 출력해보면
  

그냥 test를 호출했을때는 name이 나타나지 않지만 prototype으로 추가한 name을 찍어보면 추가해놓은 yun 이라는 데이터가 잘 찍혀 나오는 것을 확인 할 수 있습니다.

• 그래서 위처럼 prototype을 이용해 어떤 데이터를 추가한다면 그 자식들은 모두 그 데이터를 가지고 있다고 생각하시면 됩니다.

prototype을 사용하면 다른점이 뭔가요?

• 그냥 속성을 추가하는 것과 prototype을 이용해 추가하는것의 차이점은?
  그냥 생성시(객체 정의할때 초기화) 할 경우 자식생성시 자식이 그 데이터를 직접 가지지만 prototype을 이용한다면 부모만 그 값을 가지게 됩니다

어떤 원리인가요

• test가 직접 name을 가지고 있지 않은데 어떻게 가져올까요?
  • 만약 test안에 name을 직접 가지고 있지 않다면 그 부모까지 타고 올라가서 name을 찾으러 가서 갖다씁니다.
• object에서 자료뽑을 때 구동방식
  1. 직접 자료를 가지고 있나확인
  2. 없으면 부모유전자 까지 뒤짐
  3. 그래도 없으면 부모에 부모까지 쭉 올라감(prototype chain)

활용

이를 활용한다면?

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(`${this.name}가 소리칩니다.`);
};

const dog = new Animal('개');
dog.speak();

위와 같이 함수도 넣어서 사용할 수 있습니다