Prototype, function Method and class

자바스크립트 프로토타입. 

 

다른 블로그나 MDN을 봐도 무슨말인지 이해하기 힘들 것이다.

 

한마디로 정의하면,

• 인스턴스가 생성(instantiation)될 때 원형(original form), 즉 프로토타입(prototype)의 모양대로 인스턴스가 생성
• 인스턴스의 메소드는 Object.prototype.something으로 표현, prototype === 원형

프로토타입과 인스턴스의 관계는 붕어빵틀과 붕어빵의 관계라고 보면 된다. 

 

프로토타입이 있어야 인스턴스를 만들 수가 있다는 말이다.

 

그럼 프로토타입은 무엇이냐?? 사전적의미는 원형이다. 자바스크립트는 함수형 언어이다.

 

우리가 쓰는 Array나 Object, 그안에 딸린 메서드 들도 전부 function Array(){}, function Object(){} 이런 식으로

 

구성되어있다. 아래의 예를 보면서 이해를 해보자. 

 

인스턴스는 이런 모양이다.

var time = new Date();

new로 시작하면 그 함수에 대한 인스턴스가 생성된다. 위의 예시는 function Date(){}의 인스턴스다.

 

기존에 있는 함수들 MDN에 나와있다. Array, Object 등등 이런 것들은 그냥 인스턴스를 생성할 수 있다. 

 

위에서 말한 개념대로 프로토타입은 함수다. 

 

그럼 프로토 타입이 없는 것은?? 만들면된다. 어떻게?? 프로토 타입이 뭐다? 함수다.

 

한번 예시를 만들어보자. 일단 Car라는 인스턴스를 만들려고 한다. 자바스크립트 내에 Car라는 함수가 존재하는가??

 

존재하지 않는다. 

function Car(model,brand){
  this.model = model;
  this.brand = brand;
}

위와 같이 Car 라는 함수를 만들었다.

 

인스턴스의 메서드는 프로토타입으로 표기한다.

Car.prototype.ride = function(){
  console.log('Baam'+this.model);
}

위 코드는 Car라는 함수의 메서드가 아무것도 없어서 ride라는 메서드를 만들어봤다.

 

ride라는 함수를 사용하려면?? Car(원형, 프로토타입)라는 함수를 쓰거나, Car의 인스턴스면 Car의 속성과 기능을 사용 할수 있다(상속개념).

티코라는 인스턴스를 만들었다.

var tico = new Car('tico','hyundai');

티코라는 인스턴스가 원형(프로토타입)객체의 메서드를 사용할수 있을 것이다.

tico.ride();
//결과는 Baam!! tico 

 

이해를 더 돋구기 위해 기존에 있던 Array라는 함수를 이용해서 프로토타입을 구현해보자.

Array는 자바스크립트 내장함수로 존재를 한다. 개발도구에서 Array.prototype. 찍으니 관련 내장메서드들이 많이 나온

 

다. 함수인 Array가 프로토타입(원형)이기 때문이다. 그래서 Array의 인스턴스를 생성하면 Array의 인스턴스는 위의

 

Array 내장메서드를 다 사용할 수 있는 것이다. 

Array.prototype.join = function(){
//기능 커스텀 가능
}

이처럼 기존의 내장 메서드들을 커스텀해도 되지만, 그거는 추천하지 않는다. 충돌이 일어날 소지가 있다.

 

핵심은 기존에 만들어진 메소드를 가져가 쓸 수도 있고, 없는 메소드(방금전 예시에서 ride 만든거 처럼)를 내가 커스터마이징해서 만들 수도 있다는 이야기다! 

 

Function Method에 call과 apply가 있다.

 

여기서의 this 개념은 앞서배운 5가지 경우가 있다. this와 같이 보길 바란다.(1.인스턴스 생성시 this는 인스턴스를 의미, 2. call or apply invocation안에서는 this는 argument를 의미한다.)

Array.prototype.join.call([1,2,3],'-');
// 결과 : "1-2-3"

call안에 [1,2,3]은 this를 의미한다. 뒤에 '-'는 join의 기능을 말한다. 이거(this)를 이렇게 해라 라는 의미이다.

 

저렇게 쓰이는 것을 이해할 수 있을 것이다.

 

Class

클래스 개념은 자바스크립트 ES6에 처음 나온 개념이다.

 

자바스크립트의 클래스는 프로토타입기반으로 OOP를 흉내낸다.

 

function Car(model, brand) {
  this.model = model;
  this.brand = brand;
}

var spark = new Car("spark", "chevrolet");

아까 작성한 프로토타입을 클래스로 표현하면, 이렇게 된다.

class Car {
  constructor(model, brand) {
    this.model = model;
    this.brand = brand;
  }

  ride() {
    console.log("Baam! " + this.model)
  };
}

var spark = new Car("spark", "chevrolet");
spark.ride(); // "vrooom! spark"

이렇게 또는 

class Car {
  constructor(model, brand) {
    this.model = model;
    this.brand = brand;
  } 
}

Car.prototype.ride = function(){
  console.log("Baam! " + this.model)	 
}

var spark = new Car("spark", "chevrolet");
spark.ride(); // "Baam! spark"

이렇게 표현된다. 같은 의미이다.

 

class 내부 표현에 생성자constructor 기억하길바란다.

프로토타입 메서드 안에 this도 잊지 않기를 바란다.