[ JavaScript ] Class

정인성·2022년 5월 20일
0

JavaScript

목록 보기
27/28
post-thumbnail

Class ( 객체를 편하게 찍어주기 위해 사용)

  • class의 기본 형식
class Person {		// class 이름
}		

let kim = new Person();	// kim 변수에 new 클래스이름();  --> 새롭게 class의 객체를 만들겠다

console.log(kim);	// 결과값 : Person ( 클래스이름 ) {}  --> Person이라는 객체 생성
  • class 초기값 설정
    • Constructor(생성자)를 이용하여 class 객체의 초기 값을 설정
      class 내부에서 Constructor는 한 개만 존재
class Person { 
	constructor (name,age, city) { 	// name,age,city 의 값을 받겠다
        this.name = name; 	// this(Person).이름은 = name
        this.age = age;		// this(Person).나이는 = age
        this.city = city; 	// this(Person).도시는 = city
      } 
  } 
let kim = new Person('kim','24','seoul'); // --> Constructor('이름','나이','도시')
console.log(kim); //  Person{ name :'kim',age:'24',city:'seoul'}
  • class 메서드 사용하기
class Person {
	constructor (name,age, city) { 
    	this.name = name; 
        this.age = age;
        this.city = city;
    } 
    //메서드생성
    nextYearAge() { 	// nextYearAge() 함수에 this(Person 객체)의 나이에 + 1
    	return Number(this.age) + 1;
    } 
} 
let kim = new Person('kim','24','seoul'); 

console.log(kim.nextYearAge());	// kim변수에 저장되어있던 객체에 접근하여 나이+1
  • class 상속 ( extends )
class Person { 
	constructor (name,age, city) { 
    	this.name = name; 
        this.age = age; 
        this.city = city;
    }
    //메서드생성 
    nextYearAge() { 
    	return Number(this.age) + 1;
    } 
} 
class introducePerson extends Person { 	// class 새이름 extends(상속) 상속할class명 ( Person )
	introduce () {		//  메서드를 생성
   		 return `저는 ${this.city}에 사는 ${this.name} 입니다.` // 이런식으로 상속class에서 값을 받아옴
    } 
}
let kim = new introducePerson('kim','24','seoul');

console.log(kim.introduce())	// 저는 seoul에 사는 kim 입니다
  • super 사용하기
class Person {
	constructor (name,age, city) { 
    	this.name = name; 
        this.age = age; 
        this.city = city; 
    } 
    //메서드생성
    nextYearAge() {
    	return Number(this.age) + 1;
    } 
}
class introducePerson extends Person { 
	constructor(name, age, city, futureHope) { 
		super(name, age, city);	// super를 이용하여 부모class에 있는 값들을 가져옴
   		this.futureHope = futureHope 
    } 
    introduce () {
   		 return `저는 ${this.city}에 사는 ${this.name} 입니다. 
         내년엔 ${super.nextYearAge()}살이며, // super 부모class 메서드를 가져옴
         장래희망은 ${this.futureHope} 입니다.` 
    } 
} 
let kim = new introducePerson('kim','24','seoul', '개발자'); 

console.log(kim.introduce())	
// -> 저는 seoul에 사는 kim 입니다.
	  내년엔 25살이며,
      장래희망은 개발자 입니다.

class를 이용할 경우 규칙성을 갖는 객체를 일관성 있게 만드는 게 가능

상속 ( extends )을 통해서 기능 확장이 용이하다는 것 알 수 있다

super를 이용하여 부모class의 값들과 메서드를 사용할수 있다

profile
2022.05.09 START

0개의 댓글