JavaScript - class

클래스 함수

자바스크립트는 객체 지향 프로그래밍 언어로 객체를 이용하여 프로그램을 작성하는 언어
자바스크립트는 모든 값을 객체로 표현하여 처리 - 브라우저를 window 객체로 표현하여 사용
객체(Object) : 현실 세계에 존재하는 대상을 프로그램에서 사용하기 위해
프로퍼티(Property - 표현대상의 속성)와 메소드(Method - 표현대상의 행위)로 표현
자바스크립트는 클래스 대신 함수(클래스 함수 - 생성자)를 선언하고 new 연산자로
클래스 함수를 호출하여 객체 생성
ES6에서는 class 키워드를 사용하여 클래스를 선언하여 new 연산자로 클래스의
생성자(Constructor)를 호출하여 객체 생성
클래스 함수(클래스)를 이용하여 객체를 생성하는 이유는 동일한 프로퍼티와 메소드를
가지고 있는 다수의 객체를 생성하기 위해 선언 - 생산성 향상 및 유지보수의 효율성 증가

클래스 함수 선언 : 객체를 생성하기 위한 함수

일반함수와 구분하기 위해 첫문자를 대문자로 작성 - 파스칼 표기법
클래스 함수에는 프로퍼티(값)와 메소드(함수) 선언
클래스 함수의 매개변수로 값을 전달받아 프로퍼티의 초기값으로 설정

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

클래스 함수를 사용하여 객체를 생성하는 방법

new 연산자로 클래스 함수를 호출하여 객체를 생성하고 변수에 저장 - 객체변수
형식)var 변수명=new 클래스함수(값,값,...)

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

객체의 사용

객체는 . 연산자를 사용하여 객체의 요소(클래스 함수의 프로퍼티와 메소드) 사용 가능

alert("학번 = "+student.num+", 이름 = "+student.name+", 주소 = "+student.address);//프로퍼티 사용

. 연산자 대신 [] 연산자를 사용하여 객체의 요소 사용 가능
=> [] 연산자 사용시 요소의 이름은 일반 식별자와 구분하기 위해 문자값으로 표현

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

student.display();//메소드 호출

자바스크립트에서는 객체에 요소(프로퍼티와 메소드)의 추가,변경,삭제 가능

student.phone="010-1234-5678"//객체 요소 추가
	//alert("전화번호 = "+student.phone);
	student.display=function() {//객체 요소 변경
		alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address
				+", 전화번호 = "+this.phone);
	}
		//student.display();
	//delete(객체요소) : 객체에서 요소를 제거하는 함수
	delete(student.phone);//객체 요소 삭제
	student.display();

ES6에서 class 키워드로 클래스를 선언하여 객체 생성

class Human {
		constructor(num) {
			this.num=num;
		}
	} 
// extends 키워드로 부모 클래스를 상속받아 클래스 작성 가능  Human 부모로 생성. 
class Student extends Human {
		//constructor 키워드로 생성자 함수 선언
		// => 생성자 함수 : 객체를 생성하기 위해 호출되는 함수
		constructor(num,name,address)	{
			//프로퍼티 선언 및 초기값 저장
			super(num);// 부모 클래스의 생성자 호출 
			this.name=name;
			this.address=address;
		}
		//메소드 선언 - function 키워드 생략
		display() {
			alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
		}	
	}
	//alert("자료형 = "+typeof(Student));//자료형 = function
	let student=new Student(1000,"홍길동","서울시 강남구");
	//alert("학번 = "+student.num+", 이름 = "+student.name+", 주소 = "+student.address);
	student.display();