[TIL-19] Class

da.circle·2022년 10월 3일
0

TIL

목록 보기
19/44

JavaScript Class를 조금 더 자세히 공부해보았다.

Class

  • 객체지향 프로그래밍의 핵심!
    • 객체지향 프로그래밍 : 프로그램을 객체들로 구성하고, 객체들 간에 서로 상호 작용 하도록 프로그래밍하는 방법
  • JavaScript는 완전한 객체지향 언어는 아니지만 Class, 객체, 객체지향을 반영한 코드 작성이 가능하다.
  • Class는 Object(객체)를 찍어낼 수 있는 틀이다.
  • Class내에 정의된 함수를 메소드라 한다.

생성자(Constructor)

  • Class를 통해 생성된 객체를 인스턴스라고 한다.
  • Class로 객체를 생성하는 과정을 인스턴스화라고 부른다.
const myCat = new Cat("Nabi", 8);
  • Class는 새로운 인스턴스를 생성할 때마다 constructor()
    메소드를 호출한다.
class Cat {
  constructor(name, age) {
    this.name = name;
    this.age= age;
  }
}

→ Cat은 Class의 이름이다. Class이름은 PascalCase로 작성한다.

→ Cat class의 instance를 생성할 때 마다 constructor() 메소드가 호출된다.

constructor() 메소드는 name, age 두개의 인자(argument)를 받는다.

→ class의 실행범위에서 this는 해당 instance를 의미한다.

→ 인자로 넘어온 name과 age를 사용해 instance의 name과 age 프로퍼티에 값을 할당한다.

→ 클래스 내에서 name, age와 같이 변경 가능한 상태값이자 class 내 어느곳에서나 사용할 수 있는 변수를 멤버변수라고 한다.

→ 멤버변수는 this 키워드로 접근한다.

인스턴스(Instance)

  • class를 통해 생성된 객체
  • class의 프로퍼티 이름과 메소드를 갖는 객체
  • 인스턴스마다 다른 프로퍼티 값을 갖는다.
  • class이름 앞에 new를 붙여서 생성한다.
  • new 키워드는 constructor() 메소드를 호출하고 새로운 instance를 반환한다.
const cat1 = new Cat("darcy", 2);

console.log(cat1); // Cat {name: 'darcy', age: 2}
console.log(cat1.name); //darcy
console.log(cat1.age); //2

메소드(Methods)

  • 객체가 프로퍼티 값으로 갖고있는 함수
class Cat {
  constructor(name, age) {
    this.name = name;
    this.age= age;
  }

	changeName(newName){
		this.name = newName;
	}
}

const cat2 = new Cat("noNameYet", 3);

console.log(cat2); //Cat {name: 'noNameYet', age: 3}
console.log(cat2.name); // noNameYet
console.log(cat2.age); // 3

cat2.changeName("Nabi");
console.log(cat2); // Cat {name: 'Nabi', age: 3}
console.log(cat2.name); // Nabi

→ Cat 객체에 changeName 메소드를 추가했다.

profile
프론트엔드 개발자를 꿈꾸는 사람( •̀ ω •́ )✧

0개의 댓글