객체와 Class

zioni·2022년 7월 16일
0

Javascript

목록 보기
2/6

객체의 형태

  • 참조형 데이터타입의 종류

  • 객체의 종류는 크게 배열(array), 함수(function), 배열이나 함수가 아닌 객체로 나눌 수 있습니다.

  • 객체는 하나의 변수에 다양한 정보를 저장할 때 유용하게 사용할 수 있다.

  • property 이름은 중복될 수 없습니다.

  • property 값에는 어느 type이나 가능합니다.(string,number,array,object,function...)

  • property의 값이 함수일 경우, 이를 일반 함수와 구분하기 위하여 method(메서드)라고 부릅니다.

      let profile = {
        name: "서지원",
        age: 28,
        team: function(){}
       } 

객체가 필요한이유

  • 객체는 데이터(프로퍼티)와 그 데이터에 관련되는 동작(메소드)을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다.
  • 관련 있는 정보들을 서로 연결하는 데에 객체를 활용하면, 데이터(Value)와 문자열(Key)을 연관 지어서 저장할 수 있기 때문에 코드를 유지 보수할 때에도 매우 편리하다.
    (코드가 복잡해지고 데이터가 많아질수록 유지 보수가 훨씬 편리해진다.)

객체의 값에 접근하는 방법

  1. 점으로 접근.
    let name = profile.name  
    console.log(name) // 서지원
  2. 대괄호로 접근
    let age = profile['age']
    console.log(age) // 28

Class란?

  • 객체로 직접 작성하여 정의하고 생성할 수도 있지만, 클래스로 만들어주면 여러 객체를 더쉽게 만들 수 있습니다.

    Class로 객체 생성하기

  • 객체는 new 클래스명() 으로 생성할 수 있습니다.
  • 소괄호() 안에는 객체를 생성할 때 전달하고 싶은 값을 넘겨줍니다.
     const ray = new Car('Ray', 2000); 
     const genesis = new Car('Genesis', 8000);  
  • ray는 Car클래스의 인스턴스이다.
  • genesis는 Car클래스의 인스턴스이다.
    class Car {
     constructor(name,price) {
         this.name = name;
         this.price = price;
         this.department = '송파구'
      }
      applyDiscount(discount) {
         return this.price * discount
      }
    }
- 클래스 내에 정의된 함수를 메서드 라고 부릅니다.
- 클래스를 통해 생성된 객체를 인스턴스라고 부릅니다.
- constructor는 Class에서 필요한 기초 정보를 세팅하는 곳입니다.(객체를 new로 생성할 때 가장먼저 자동으로 호출됩니다.)  
- this는 본인객체를 의미한다. 클래스 내에서 메서드끼리 소통하기 위해서는 this가 필요합니다.

static 정적 프로퍼티, 메서드

  • static키워드는 클래스의 정적인 메소드 또는 프로퍼티를 정의한다.
  • 정적 메소드와 정적 프로퍼티는 클래스의 인스턴스로부터 호출될 수 없다. 대신, 클래스 그 자체로 호출을 해야한다.
  • 정적 프로퍼티는 캐시, 고정된 설정, 또는 각 인스턴스마다 복제할 필요가 없는 데이터 만들때 유용하다.
lass Fruit {
  static Max_length = 4;

  constructor(name, emogi) {
    // 멤버함수
    this.name = name;
    this.emoji = emogi;
  }

  //클래스 레벨의 메서드
  static makerRandomFruit() {
    //  클래스 레벨의 메서드에서는 this를 참조 할 수 없음.
    return new Fruit("banana", "🍌");
  }
  // 인스턴스 레벨의 메서드
  display = () => {
    console.log(`${this.name}: ${this.emogi}`);
  };
}


const apple = new Fruit("apple", "🍎");
console.log(apple);
// 앞에 new를 안붙이고 호출한다.
const banana = Fruit.makerRandomFruit();
console.log(banana);
console.log(Fruit.Max_length);

class에서 get과set 사용하기

  • get과set은 함수를 속성처럼 보이게 해서 복잡성을 숨기는 방법이다.
// 접근자 프로퍼티
class Student {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  get fullName() {
    return `${this.lastName} ${this.firstName}`;
  }
  set fullName(value) {
    console.log(value);
  }
}

const student = new Student("지원", "서");
console.log(student);
console.log(student.firstName);
console.log(student.fullName); //get 사용해서 fullName()으로 호출x
student.fullName = "김철수";
  • set함수에는 변수처럼 값을 할당할 수 있습니다.
    (student.fullName = "김철수"로 할당함.)

class 상속

class Animal {
  constructor(color) {
    this.color = color;
  }
  eat() {
    console.log("먹자");
  }
  sleep() {
    console.log("자잔다자");
  }
}

class Tiger extends Animal {}
const tiger = new Tiger("노랑이");

// console.log(tiger)
// Tiger {color: '노랑이'}
class Dog extends Animal {
  constructor(color, ownerName) {
    //Animal color를 상속받음
    super(color);
    this.ownerName = ownerName;
  }
  play() {
    console.log("놀자아~!");
  }
  //오버라이딩
  eat() {
    super.eat(); //부모에있는 먹자가 출력
    console.log("강아지가 먹는다."); //상속받은거 덮어씌운다
  }
}

const dog = new Dog("빨강이", "지원");
console.log(dog.ownerName); // 지원
console.log(dog); // Dog {color: '빨강이', ownerName: '지원'}
dog.play(); // 놀자아~!
dog.sleep(); // Animal상속받은 메소드
dog.eat();

0개의 댓글