JS로 클래스 만들기

이동환·2020년 9월 10일
1

TIL

목록 보기
26/74

class 를 만드는데에는 4가지 방법이있습니다.

  • functional
  • functional shared
  • Prototypal
  • Pseudoclassical

1. fucntional

let Car = function (name){
  let instance = {};
  instance.name = name;
  instance.description = function(){
    return `this car is ${this.name}.` 
  }
  return instance;
}
// 
let avante = Car('avante');
// this car is avante

함수로 클래스를 선언한다. 함수를 많이 사용해봤으면 뭔가 익숙하다.

2. functional shared

// 두 함수를 합칠 함수 생성
let extend = function(to, from){
  for( let key in from ){
    to[key] = from[key];
  }
}
// Car와 같이 쓸 함수 생성
var someMethod = {}
someMethod.move = function (){
  this.position += 1
}
// Car라는 함수 생성
let Car = function (position){
  let instance = {
    position : position
  };
  // extend함수를 통해  Car 와 someMethod를 합침
  extend(instance, someMethod);
  return instance;
}
//
//
let car1 = Car(5);
car1.move();
car1.move();
car1.move();
console.log(car1)    // 8

3. Prototypal

var someMethod = {}
someMethod.move = function (){
  this.position += 1
}
//
let Car = function (position){
  let instance = Object.create(someMethod)
  instance.position = position
  return instance;
}
//
let car1 = Car(3);

4. Pseudoclassical

let Car = function(position){
  this.position = position;
}
Car.prototype.move = function (){
  this.position +=1 ;
}
//
let car1 = new Car(4);

여기서 가장 많이 사용하는 방법은 4번인 Pseudoclassical 방식입니다. 이 방식은 ES6에서 Class를 만드는 법과 매우 흡사하다

ES6 Class만들기

class Person{
  constructor(name,age){
   this.name = name;
   this.age = age;
  }
  greeting(){
    return `Hello, I'm ${this.name} and ${this.age}-year-old ` 
  } 
}
//
let DH = new Person('DH',28);
DH.greeting() 
// Hello, I'm DH and 28-year-old
profile
UX를 개선하는것을 즐기고 새로운것을 배우는것을 좋아하는 개발자입니다.

0개의 댓글