스태틱 메서드와 프로토타입 메서드의 주요 차이점은 호출 방식에 있습니다.

스태틱 메서드

클래스 레벨에서 호출합니다. 스태틱 메서드는 클래스 자체에 바인딩되어 있기 때문에 클래스 정의 이후 인스턴스를 생성하지 않아도 클래스를 통해 호출할 수 있습니다.

인스턴스로 해당 메서드에 접근할 수 없습니다. (=인스턴스 프로퍼티 참조 불가능)

프로토타입 메서드

클래스 정의 이후 클래스의 인스턴스를 통해 호출합니다.

인스턴스로 해당 메서드에 접근할 수 있습니다. (=인스턴스 프로퍼티 참조 가능)

01  var Rectangle = function(width, height) {
02   this.width = width;
03   this.height = height;
04  };
05  Rectangle.prototype.getArea = function() {
06   return this.width  this.height;
07  };
08  Rectangle.isRectangle = function(instance) {
09   return (
10     instance instanceof Rectangle && instance.width > 0 && instance.height > 0
  );
11 };

12 var rect1 = new Rectangle(3, 4);
13 console.log(rect1.getArea()); // 12 (O)
14 console.log(rect1.isRectangle(rect1)); // Error (X)
15 console.log(Rectangle.isRectangle(rect1)); // true

예제 코드를 보면 Rectangle 함수를 new 연산자와 함께 호출해서 생성된 인스턴스를 rect1에 할당하였습니다. 또한 getArea 메서드와 isRectangle 메서드를 생성하였습니다.

rect1.getArea()와 같이 호출된 getArea는 실제로는 rect1.__proto__.getArea에 접근하며 결과로는 `rect1.width rect1.height의 계산값이 반환됩니다. 이처럼 인스턴스(rect1)에서 직접 호출할 수 있는 메서드(getArea)가 바로 **프로토타입 메서드**입니다.<br> <br> 하지만rect1인스턴스에서isRectangle메서드로 접근하려고 하면rect1에서 직접 접근할 수 없으므로 타입 에러가 발생합니다. 이렇게 인스턴스(rect1)에서 직접 접근할 수 없는 메서드를 **스태틱 메서드**라고 합니다.<br> <br> 스태틱 메서드는 생성자 함수(Rectangle`)를 this로 해야만 호출할 수 있습니다.

프로토타입 메서드
프로토타입 메서드는 프로토타입 체인에 추가되며, 이를 통해 모든 인스턴스에서 이 메서드를 상속받아 사용할 수 있습니다. 예를 들어, Array 객체의 push, pop 메서드는 모든 배열 인스턴스에서 사용 가능한 프로토타입 메서드입니다.

스태틱 메서드
스태틱 메서드들은 인스턴스 데이터에 접근할 수 없고, 클래스(생성자 함수) 또는 클래스에서 파생된 데이터에 대한 작업을 수행합니다.

프로토타입 메서드는 주로 인스턴스의 상태를 관리하거나 인스턴스 간에 공유되어야 할 기능을 제공하는 반면, 스태틱 메서드는 주로 유틸리티 함수나 인스턴스와 독립적인 작업을 수행하는 데 사용됩니다.

스태틱 메서드
클래스 자체에 직접 정의되는 메서드로, 클래스의 인스턴스가 아닌 클래스 이름을 통해 호출됩니다.

class Example {
  static staticMethod() {
    console.log('나는 스태틱 메서드!');
  }
}

Example.staticMethod(); // "나는 스태틱 메서드!" 출력

프로토타입 메서드
클래스 자체에 직접 정의되는 메서드로, 클래스의 인스턴스가 아닌 클래스 이름을 통해 호출됩니다.

class Example {
  constructor(name) {
    this.name = name;
  }

  prototypeMethod() {
    console.log(저는 ${this.name}입니다.);
  }
}

const exampleInstance = new Example('woodstock');
exampleInstance.prototypeMethod(); // "저는 woodstock입니다." 출력

1. 인스턴스 생성 후 프로퍼티 제거
인스턴스를 일단 생성한 뒤 프로퍼티들을 일일이 지우고, 더는 새로운 프로퍼티를 추가할 수 없도록 하는 것입니다.
프로퍼티가 많은 경우를 대비해 위 동작을 함수로 만들어 사용할 수 있으며,
제안할 수 있는 방법 중 가장 깔끔하고 간단한 방법입니다.

var extendClass1 = function(SuperClass, SubClass, subMethods) {
  SubClass.prototype = new SuperClass();
  for (var prop in SubClass.prototype) { // 생성한 인스턴스를 순환하면서
    if (SubClass.prototype.hasOwnProperty(prop)) { // 프로퍼티 제거
      delete SubClass.prototype[prop];
    }
  }
  if (subMethods) {
    for (var method in subMethods) {
      SubClass.prototype[method] = subMethods[method];
    }
  }
  Object.freeze(SubClass.prototype);
  return SubClass;
};

var Rectangle = function(width, height) {
  this.width = width;
  this.height = height;
};
Rectangle.prototype.getArea = function() {
  return this.width  this.height;
};
var Square = extendClass1(Rectangle, function(width) {
  Rectangle.call(this, width, width);
});
var sq = new Square(5);
console.log(sq.getArea()); // ? 25

2. 빈 함수 활용
더글라스 크락포드가 제시해 대중적으로 알려진 방법입니다.
SubClass의 prototype에 직접 SuperCalss의 인스턴스를 할당하는 대신
아무런 프로퍼티를 생성하지 않는 빈 생성자 함수(Bridge)를 하나 더 만들어 그 prototype을 바라보게끔 한 다음
SubClass의 prototype에는 Bridge의 인스턴스를 할당하게 하는 것입니다.

*3. Object.create 활용
ES5에서 도입된 Object.create를 활용하여
SubClass의 prototype의 __proto__가 SuperClass의 prototype을 바라보되 SuperClass의 인스턴스가 되지 않게 하는 것입니다.

1. 프로퍼티들을 일일이 지우고 새로운 프로퍼티를 추가할 수 없도록 하는 방법
2. 브릿지(빈함수)를 사용하는 방법
3. Object.create를 사용하는 방법

이중에서 Object.create를 사용하여 SubClass의 prototype의 SuperClass의 prototype을 바라보되, SuperClass의 인스턴스가 되지 않게 만들었습니다

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

Animal.prototype.getInfo = function() {
    return this.name + " is " + this.type;
}

let Dog = function(name) {
    Animal.call(this, name, "dog");
}

Dog.prototype = Object.create(Animal.prototype);
Object.freeze(Dog.prototype)


let star = new Dog("Star");

star.getInfo() // "Star is dog"

Dog라는 SubClass의 prototype을 Object.create()를 사용하여 Animal의 프로토타입을 바라보도록 프로토타입 체인을 설정해주었습니다.

이를 통해 Dog의 prototype은 구체적인 데이터를 지니지 않고 Animal을 상속받을 수 있으며 new Dog()로 생성된 인스턴스는 Animal의 프로토타입 메서드를 사용할 수 있습니다.

클래스가 구체적인 데이터를 지니지 않게 하는 방법은 다음과 같습니다.

1. 인스턴스 생성 후 프로퍼티 제거
클래스의 인스턴스를 생성한 후, 이 인스턴스의 모든 프로퍼티를 삭제하고 새로운 프로퍼티를 추가할 수 없게 하는 방법으로, 객체의 멤버를 직접 조작하기 대문에 번거롭고 위험할 수 있습니다.

2. 빈 함수 활용
빈 함수를 사용하여 중간 단계를 만드는 방법입니다. 이 빈 함수의 프로토타입은 상위 클래스의 프로토타입을 참조하고, 하위 클래스의 프로토타입은 이 빈 함수의 인스턴스를 참조합니다. 이 방법은 상위 클래스의 프로토타입 메서드를 상속하면서도, 상위 클래스의 구체적인 데이터는 상속받지 않도록 합니다.

Object.create 활용
Object.create()를 사용하여 하위 클래스의 프로토타입을 생성하는 방법입니다. 이 함수는 주어진 프로토타입을 가진 새로운 객체를 만들기 때문에, 상위 클래스의 인스턴스를 생성하지 않고도 상위 클래스의 프로토타입 메서드를 상속할 수 있습니다.
예제코드

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

Animal.prototype.speak = function() {
  console.log(${this.name}가 말해요);
};

function Duck() {
}

Duck.prototype = Object.create(Animal.prototype);
Duck.prototype.constructor = Duck;

const duck = new Duck();
duck.speak(); // "undefined가 말해요"

이 코드에서 Duck 클래스가 Animal 클래스의 메서드는 상속받되, 구체적인 데이터 name은 상속받지 않습니다.

클래스가 구체적인 데이터를 지니지 않게 하는 방법으로는
1. 인스턴스 생성 후 프로퍼티 제거하는 방법

인스턴스를 생성한 후 프로퍼티를 일일이 지우고, 더는 새로운 프로퍼티를 추가할 수 없도록 freeze 하는 방법

2. 빈 생성자 함수를 만들어 활용하는 방법

SubClass의 prototype에 직접 SuperClass의 인스턴스를 할당하는 대신 빈 생성자 함수 Bridge를 만들어, 이 함수의 prototype이 SuperClass의 prototype을 바라보게 한 다음 SubClass의 prototype에는 Bridge 함수의 인스턴스를 할당하는 방법.

3. Object.create 를 활용하는 방법

Object.create를 활용하여 SubClass의 prototype의 proto가 SuperClass의 prototype 을 바라보되, SuperClass의 인스턴스가 되지는 않게하는 방법

이 있습니다.

이 중 세 번째 방법의 예제입니다.

var extendClass3 = function (SuperClass, SubClass, subMethods) {
  SubClass.prototype = Object.create(SuperClass.prototype);
  SubClass.prototype.constructor = SubClass;
  if (subMethods) {
    for (var method in subMethods) {
      SubClass.prototype[method] = subMethods[method];
    }
  }
  Object.freeze(SubClass.prototype);
  return SubClass;
};

var Fruit = (function () {
  function Fruit(name, color) {
    this.name = name;
    this.color = color;
  }
  Fruit.prototype.description = function () {
    console.log(이 과일은 ${this.color} ${this.name} 입니다.);
  };
  return Fruit;
}());

var 내과일 = new Fruit('키위', '골드');
내과일.description(); // ? 이 과일은 골드 키위 입니다.

class Fruit {
    constructor(name, color) {
        this.name = name;
        this.color = color;
    }

    aboutFruit() {
        return 이 과일은 ${this.color} ${this.name} 입니다.;
    }
}

const apple = new Fruit("사과", "파란색");
console.log(apple.aboutFruit());  // "이 과일은 파란색 사과 입니다."

주어진 조건에 맞추어 apple이라는 인스턴스를 생성하고 문자열을 출력했습니다.

let Fruit = function(name,color){
    this.name = name;
    this.color = color;
}

Fruit.prototype.getMessage = function(){
    return 이 과일은 ${this.color} ${this.name} 입니다.
}

let apple = new Fruit("apple","red")

apple.getMessage() // '이 과일은 red apple 입니다.'

class Fruit {
  constructor(name, color) {
    this.name = name;
    this.color = color;
  }

  describe() {
    console.log(이 과일은 ${this.color} ${this.name} 입니다.);
  }
}

const apple = new Fruit('사과', '빨간');

apple.describe();  // 출력: 이 과일은 빨간 사과 입니다.

class BaseBall {
    constructor(team, rank) {
        this.team = team;
        this.rank = rank;
    }

    todo() {
        console.log(2024 시즌에서 ${this.team} 은(는) ${this.rank}위를 한다.);
    }
}

const LGTWINS = new BaseBall("LG 트윈스", 1);

LGTWINS.todo(); // 2024 시즌에서 LG 트윈스 은(는) 1위를 한다.

BaseBall 클래스는 constructor 메서드를 통해 인스턴스 생성 시 초기화 될 team과 rank를 정의합니다. todo 메서드는 인스턴스의 팀과 순위를 가지고 문자열을 콘솔에 출력합니다.

new 생성자와 함께 LGTWINS 인스턴스를 생성하고, BaseBall 클래스의 constructor에 "LG 트윈스"와 1을 넘겨줍니다.
그 후 LGTWINS의 todo 메서드를 호출하여 2024 시즌 순위 결과를 출력합니다.

es6에서는 클래스를 좀 더 직관적으로 생성 할 수 있도록 Class문법이 추가되었습니다. 특히 스태틱메서드와 프로토타입메서드를 위주로 설명하겠습니다.

class Person {
    constructor(name){
        this.name = name;
    }

    static staticMethod (){
        return this.name
    }

    prototypeMethod(){
        return this.name
    }
}

let suzy = new Person("Suzy")

console.log(Person.staticMethod()) // Person
console.log(suzy.prototypeMethod()) // Suzy

class 문법 도입 이후로는 static이라는 키워드를 사용할 수 있습니다.

이 static 키워드를 사용할 경우 클래스의 인스턴스에서 직접 호출할 수 없고, 클래스 자체에서 호출됩니다. 즉, 스태틱메서드로 설정됩니다.

만약 해당 키워드 없이 메서드를 설정하면 클래스의 prototype에 메서드가 설정되어 프로토타입 체인으로 접근이 가능한 프로토타입메서드로 설정이 됩니다.

class Pokemon {
  constructor(name, type, color) {
    this.name = name;
    this.type = type;
    this.color = color;
  }

  pokemonInfo() {
      console.log(앗, 야생의 ${this.name}이(가) 나타났다! 색상은 ${this.color}이고, ${this.type}타입 포켓몬이구나!)
    }
}

const popplio = new Pokemon('누리공', '물', '파랑');

popplio.pokemonInfo();
// 출력 결과 : 앗, 야생의 누리공이(가) 나타났다! 색상은 파랑이고, 물타입 포켓몬이구나!

Pokemon 클래스

constructor 로 객체의 name, type, color속성을 초기화

메서드 pokemonInfo는 객체의 정보를 출력

popplio 인스턴스

new 키워드로 '누리공', '물', '파랑'이라는 속성 값을 가지는 인스턴스를 생성

popplio객체의 pokemonInfo를 호출해 정보를 출력

class Book {
  constructor(title, author, year) {
    this.title = title;    // 책의 제목
    this.author = author;  // 책의 저자
    this.year = year;      // 출판년도
  }

  displayInfo() {
    console.log(${this.year}년에 출판된 ${this.author}의 "${this.title}");
  }
}

const myBook = new Book('1984', '조지오웰', 1949);

myBook.displayInfo();  // 출력: 1949년에 출판된 조지오웰의 "1984"

클래스 정의 : class 키워드를 사용해 Book 클래스를 정의합니다. 이 클래스는 책의 제목, 저자, 그리고 출판 년도를 속성으로 가집니다.

생성자 : constructor 메서드는 새로운 Book 객체를 생성하고 초기화할 때 호출됩니다. 이 메서드는 책의 제목, 저자, 출판 년도를 매개변수로 받아 객체의 해당 속성을 설정합니다.

메서드 : displayInfo 메서드는 책의 정보를 포맷된 문자열로 콘솔에 출력합니다. 이 메서드는 객체의 title, author, year 속성을 활용합니다.

인스턴스 생성 : new 키워드를 사용하여 Book 클래스의 인스턴스를 생성합니다. 생성자에 '1984', 'George Orwell', 1949라는 세 개의 인자를 전달하여 인스턴스를 초기화합니다.

메서드 호출 : 생성된 인스턴스 myBook에서 displayInfo 메서드를 호출하여 책의 상세 정보를 출력합니다.