자바스크립트 JS 클래스

클래스 

 

클래스가 붕어빵 만드는 기계

객체 만든 붕어빵 

----> 프로토타입 (객체지향 프로그래밍)

es6 최근 자바스크립트 부터 객체지향 프로그램 할수있다. 클래스를 기반으로 

 

클래스란 객체를 생성할 수 있는 템플릿 

객체지향 프로그래밍 

절차적으로 가 아니라 연관된 있는 애들끼리 객체로 구상해서 객체끼리 서로 호환이 가능하도록 한다. 

자바스크립트는 생성자 함수, 클래스 둘다 사용되지만 요즘은 클래스를 사용한다 ! 

 

클래스 객체를 만들수있다 이렇게 만들어진 객체를 클래스의 인스턴스라고 한다. 

 

 

// 객체를 손쉽게 만들수 있는 템플릿

// 1. 생성자 함수 (오래된 고전적인 방법 )

//2. 클래스를 이용한다.

// 클래스

class Fruit {

  // 생성자 : new 키워드로 객체를 생성할때 호출되는 함수

  constructor(name, emoji) {

    this.name = name;

    this.emoji = emoji;

  }

  display = () => {

    console.log('${this.name}: ${this.emoji}');

  };

}

// apple은 Fruit 클래스의 인스턴스이다.

const apple = new Fruit('apple', '＆');

const orange = new Fruit('orange', '◆');

console.log(apple);

console.log(orange);

// obj는 객체이고, 그 어떤 클래스의 인스턴스도 아니다.

const obj = {name : 'ee'};

 

 

----

 

// static 정적 프로퍼티, 메서드

class Fruit {

  // 생성자 : new 키워드로 객체를 생성할때 호출되는 함수

  constructor(name, emoji) {

    this.name = name;

    this.emoji = emoji;

  }

  // 클래스 레벨의 메서드

  static makeRandomFruit() {

    // 클래스 레벨의 메서드에서 this를 참조할 수 없음

    return new Fruit('banana', '▷');

  }

  // 인스턴스 레벨의 메서드

  display = () => {

    console.log('${this.name}: ${this.emoji}');

  };

}

const banana = Fruit.makeRandomFruit();

// apple은 Fruit 클래스의 인스턴스이다.

const apple = new Fruit('apple', '＆');

const orange = new Fruit('orange', '◆');

console.log(apple);

console.log(orange);

// obj는 객체이고, 그 어떤 클래스의 인스턴스도 아니다.

const obj = { name: 'ee' };

 

 

// 접근제어자 - 캡슐화

//캡슐화 : 내부상 필요한 데이터를 외부에서 보이지 않도록, 수정하지 못하도록 숨겨둔다

// private, public, protected  (접근제어자 )===> 자바스크립트는 없다.

// public 기본

// private # 내부에서만 가능 외부는 편집 불가능 자바스크립트는 # 이걸로 사용해야함 

//

class Fruit {

   #name;

   #emoji;

  #type = '과일';

  constructor(name, emoji) {

    this.#name = name;

    this.#emoji = emoji;

  }

  display = () => {

    console.log('${this.#name}: ${this.#emoji}');

  };

}

const apple = new Fruit('apple', '＆');

console.log(apple);