javascript_jquery_basic_3_2

자바스크립트 클래스 기초

클래스 소개

클래스란?

많은 변수와 함수 중 연관 있는 변수와 함수많은 선별해 포장하는 기술
클래스로 포장하는 이유는 객체 단위로 코드를 그룹화하고 코드를 재사용하기 위함

클래스가 가진 두 가지 기능

1. 객체단위의 코드 그룹화
2. 객체 단위의 중복 코드 제거 및 코드 재사용성

클래스를 만드는 방식

• 리터럴 방식
• 함수 방식
• 프로토타입 방식

클래스 관련 기본 개념과 용어정리

클래스 = 붕어빵틀
인스턴스 = 붕어빵

인스턴스를 생성하는 방법

var 붕어빵1 = new 붕어빵틀();

객체
클래스의 실체를 나타내는 용어, 인스턴스와 같은 의미로 해석됨
인스턴스는 new 키워드를 이용해 클래스의 실체를 생성할 떄 주로 사용함
객체는 인스턴스 생성 후 클래스에서 제공하는 프로퍼티와 메서드를 사용할 때 주로 사용함

프로퍼티
클래스 내부에 변수, 멤버변수로도 불림

메서드
클래스 내부에 함수, 멤버함수로도 불림

오브젝트 리터럴 방식으로 클래스 만들기

• 생성자가 없음
• 인스턴스 생성을 위한 작업이 없고, 두 개 이상의 인스턴스를 만들 수 없음 (동일변수 선언불가)
• 점(.) 표기법 이용해 프로퍼티와 메서드에 접근 // 멤버 접근 연산자
• 객체 내부에서의 자기 자신은 this를 이용해 자신을 참조
• 오브젝트 리터럴 방식은 클래스를 만드는 용도가 아닌 여러 개의 데이터를 묶을 때 주로 사용

함수 방식으로 클래스 만들기

• 함수 내부에 this를 이용해 프로퍼티와 메서드를 정의하는 구조
• 함수 선언방식과 동일하지만 선언지 대문자로 시작해야함 (관례)
• 클래스 이름 자체가 생성자이며 인스턴스가 생성될 때 자동으로 호출됨
• new 키워드를 이용해 인스턴스를 생성
• 점(.) 표기법 이용해 프로퍼티와 메서드에 접근
• 객체 내부에서의 자기 자신은 this를 이용해 자신을 참조
• 내부 멤버 메서드가 인스턴스마다 독립적으로 만들어지기 때문에 인스턴스의 개수가 많아질수록 크기가 증가

프로토타입 방식으로 클래스 만들기

• 함수 내부에 this를 이용해 프로퍼티를 정의하고 메서드는 prototype에 정의하는 구조
• 함수 선언방식과 동일하지만 선언지 대문자로 시작해야함 (관례)
• 클래스 이름 자체가 생성자이며 인스턴스가 생성될 때 자동으로 호출됨
• new 키워드를 이용해 인스턴스를 생성
• 점(.) 표기법 이용해 프로퍼티와 메서드에 접근
• 객체 내부에서의 자기 자신은 this를 이용해 자신을 참조
• 모든 인스턴스는 prototype의 메서드를 공유해서 사용하는 방식
• 상속 기능

// 클래스 생성자
function User() { 
    // 프로퍼티 정의
    this.name = "ddandonge";
    this.age = 10;   
}

// 메서드 정의
User.prototype.showInfo = function() {
    document.write("name = "+this.name+", age = "+this.age);
}

var user = new User(); // 인스턴스 생성
user.showInfo(); // 메서드 호출

미션3 - 심플갤러러리를 클래스로 만들기