[JavaScript] 클래스 함수 / 클래스

자바스크립트는 객체 지향 프로그래밍 언어로, 객체를 이용하여 프로그램을 작성한다.

자바스크립트는 모든 값을 객체로 표현하여 처리한다.

• 객체(Object) : 현실 세계에 존재하는 특정 대상을 프로그램에서 사용하기 위해 프로퍼티(Property)와 메소드로 표현한 것
  • 프로퍼티(Property) : 표현대상의 속성 
  • 메소드(Method) : 표현대상의 행위 

 

자바스크립트에서 객체를 생성하는 방법은 2가지가 있다. 

  
1) 클래스 함수를 선언하고 new 연산자로 클래스 함수를 호출하여 객체를 생성한다.

→ 자바스크립트는 클래스 대신 함수(클래스 함수)를 사용하여 객체를 생성한다. 

 

2) 클래스를 선언하고 new 연산자로 클래스의 생성자(Constructor)를 호출하여 객체를 생성한다.

→ ES6에서는 클래스를 선언하여 객체 생성이 가능하지만 ES5까지는 함수를 사용해 객체를 생성한다.

클래스 함수(클래스)로 객체를 생성하는 이유는 동일한 프로퍼티와 메소드가 포함된 다수의 객체를 쉽게 생성하기 위해서이다. 
→ 생산성 및 유지보수의 효율성이 증가한다.

 

---

클래스 함수를 사용하여 객체 생성하기

 

1) 클래스 함수 선언하기

• 일반함수와 구분하기 위해 함수명의 첫문자를 대문자로 작성해야 한다. (파스칼 표기법)
• 클래스 함수의 매개변수로 값을 전달받아 프로퍼티의 초기값으로 저장한다.
• this 키워드를 사용하여 프로퍼티와 메소드를 표현한다.
  • → this : 클래스 함수 내부에서 객체를 표현하기 위해 사용하는 키워드

function Student(num, name, address) {
	//this 키워드로 객체의 요소를 표현하여 값 저장 - 프로퍼티
    	//프로퍼티(Property) : 객체의 속성값을 저장하기 위한 변수 - 멤버변수
	this.num = num;
	this.name = name;
	this.address = address;
		
	//this 키워드로 객체의 요소를 표현하여 함수 저장 - 메소드
	// => 메소드는 this 키워드를 이용하여 프로퍼티 사용 가능
	//메소드(Method) : 객체의 행위(기능)을 함수로 표현하여 저장한 변수 - 멤버함수
	this.display = function() {
		alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
	}
}

 

2) 클래스 함수를 사용하여 객체 생성하기
→  new 연산자로 클래스 함수를 호출하여 객체 생성하고 생성된 객체를 변수에 저장한다. - 객체변수

형식)var 변수명 = new 클래스함수(값, 값, ...)

 

var student=new Student(1000, "홍길동", "서울시 강남구");
alert("변수의 자료형 = "+typeof(student));//변수의 자료형 = object

 

객체는 . 연산자를 사용하여 객체 요소(프로퍼터 또는 메소드)에 접근하여 사용이 가능하다.

alert("학번 = "+student.num+", 이름 = "+student.name+", 주소 = "+student.address);
student.display();//메소드 호출

 

. 연산자 대신 [] 연산자를 이용해도 객체에 접근이 가능하다.

alert("학번 = "+student["num"]+", 이름 = "+student["name"]+", 주소 = "+student["address"]);
student["display"]();

---

자바스트립트는 객체에 요소(프로퍼티 또는 메소드)에 대한 추가, 변경, 삭제가 가능하다.

 

객체에 프로퍼티 추가

student.phone="010-1234-5678";
alert("전화번호 = "+student.phone);//전화번호 = 010-1234-5678

 

객체 메소드에 저장된 함수 변경

student.display = function() {
	alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address+", 전화번호 = "+ this.phone);
}

student.display(); //학번 = 1000, 이름 = 홍길동, 주소 = 서울시 강남구, 전화번호 = 010-1234-5678

 

delete(객체요소) : 객체에서 요소를 삭제하는 함수

delete(student.phone);//프로퍼티 삭제

//객체의 요소가 아닌 경우 [undefined] 자료형으로 처리
alert("전화번호 = "+student.phone);//전화번호 = undefined

 

---

클래스를 선언하여 객체 생성하기

 

ES6에서는 class 키워드로 클래스를 선언하여 객체를 생성하는 것이 가능하다.

class Human {
	constructor(num) { //constructor 키워드로 생성자 선언
	//this 키워드로 객체 요소를 표현하여 값 저장 - 프로퍼티
	this.num = num;
	}
}

 

extends 키워드로 부모클래스를 상속받아 클래스를 작성할 수 있다.

class Student extends Human {
	constructor(num, name, address) {
		super(num);//부모클래스의 생성자를 호출하여 객체 초기화
		this.name = name;
		this.address = address;
	}
		
	//메소드 선언 - function 키워드 없이 함수 선언 
	display() {
		alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
	}
}

 

객체 생성

→ new 연산자로 클래스의 생성자(Constructor)를 호출하여 객체를 생성하고 생성된 객체를 변수에 저장한다.

let student=new Student(1000, "홍길동", "서울시 강남구");//객체 생성

alert("클래스의 자료형 = "+typeof(Student));//클래스의 자료형 = function
alert("변수의 자료형 = "+typeof(student));//변수의 자료형 = object

student.display();//학번 = 1000, 이름 = 홍길동, 주소 = 서울시 강남구 - 메소드 호출