자바스크립트 클래스

▶ 클래스 : 객체를 생성하는데 사용된다.

// 리터럴

var 클래스명 = {

}

// 함수

function [클래스명]([매개변수]){

}

- 객체 리터럴은 객체로 정의하는 방법이다.

이 방식으 클래스는 장벽에 둘러싸여 있어서 클래스 내부에 선언된 메소드나 프로퍼티를 바로 접근할수가 없다.

따라서  클래서 내부로 접근하려면 '클래서, 프로퍼티' 이런식으로 접근해야한다.

이 방식의 장점은 독자적인 자신의 공간안에서만 프로퍼티와 메소드를 정의하고 사용할수 있다는 점이다.

이런 객체를 싱글톤이라고 부르기도하고 하나의 클래스 인스턴스만 가질수있다. 동일한 클래스 객체를 생성할수 없다.

- 함수를 사용하면 여러 인스턴스 생성이 가능해진다. 따라서 하나의 클래스만으로 여러가지의 값을 저장할수 있고 출력할수 있다.

new라는 생성자를 필수로 실행시켜줘야한다.

- 프로토타입

함수형으로 작성했을때 문제가 있는데 인스턴스가 많이 생성될 경우이다. 인스턴스를 생성할때마다 프로퍼티와 메소드도 함께 생성이 된다.

클래스의 메소드 사이즈가 20이라고 가정을했을때 함수형으로 작성하고 3개의 인서턴스를 생성하면 총 60이라는 사이즈가 나온다.

프로토타입은 이러한 문제를 해결할수 있는 방식이다.

프로토타입으로 메소드를 선언해주면 인스턴스를 생성할때마다 생성되는 것이 아니라 클래스의 프로토타입 속성에 함수를 할당해서 보다 적은 사이즈를 잡게된다.

프로토타입예제 >>

function pp(name,age,gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}
 
Person.prototype.getInfo = function(){
    return {
        name : this.name,
        age : this.age,
        gender : this.gander
    };
};
 
var ex1 = new pp('김아무개',18,'남자');
var ex2 = new pp('박아무개'25,'여자');

▶ 프로퍼티(Property) : 프로퍼티는 클래스라는 스코프 안에서만 사용할수 있는 클래스 전용 변수 입니다.

일반변수는 var name으로 선언하지만 this.name으로 선언합니다.

function [클래스명]([매개변수]){

this.[프로퍼티명] = [프로퍼티값];

}

▶ 메소드(Method) : 메소드는 클래스 안에서만 사용되는 함수 입니다. (클래스 내부 정의)

function [클래스명]([매개변수]){

this.[메서드명] = function([메서드 매개변수]){

[소스코드];

}

}

자바스크립트메서드 생성방법(prototype을 이용)

function [클래스명]([매개변수]){

}

[클래스 명].prototype.[메서드명] = function([매개변수]){

[소스코드];

};

자바스크립트 메서드 호출방법

var [인스턴스명] = new [클래스명]([매개변수]);

[인스턴스명].[메서드명]([메서드 매개변수]);

▶ 인스턴스 : 함수를 사용하려면 함수를 호출하듯 클래스에서는 하나의 클래스를 생성해놓으면 하나의 클래스를 여러형태로 생성시켜서 각자 독립적으로 사용할수 있는데 이대 인스턴스를 생성해야 하고 new 키워드를 사용한다.

var [인스턴스 명] = new [클래스명]([매개변수]);

---

클래스/객체 예제 >>

function Class(para) { 
     this.prop = para;
    this.met = function() {
        document.write(this.prop);
    }
    met();
} 
var obj = new Class(5); 

클래스명	Class
매개변수	para
프로퍼티	prop = para
메서드	met
인스턴스	obj

결과값 : 5

obj이라는 인스턴스를 선언해서 class 함수를 호출하고 매개변수 5를 넘깁니다.

5는 para로 받게 되고 Class를 실행합니다.

prop프로퍼티를 생성하고 para 값을 프로퍼티에 넣습니다.

met이라는 메서드를 생성하고 document.write(this.prop); 실행하라는  구문을 넣습니다.

그리고 met 메서드를 실행합니다.

---

이 클래스를 이용하여 구구단 클래스를 만들어보자

function gugudan(dan) {
            document.write(dan + " * 2 = " + (dan * 2), "<br>");
            document.write(dan + " * 3 = " + (dan * 3), "<br>");
            document.write(dan + " * 4 = " + (dan * 4), "<br>");
            document.write(dan + " * 5 = " + (dan * 5), "<br>");
            document.write(dan + " * 6 = " + (dan * 6), "<br>");
            document.write(dan + " * 7 = " + (dan * 7), "<br>");
            document.write(dan + " * 8 = " + (dan * 8), "<br>");
            document.write(dan + " * 9 = " + (dan * 9), "<br>");
        }
 
        gugudan(3);
        gugudan(7);
        gugudan(9);
        gugudan(2);
        gugudan(8);