자바스크립트 클래스 기초

본내용은 책의 내용을 학습하고

개인적으로 정리를 하고자 만든 내용입니다.

알아서 판단하여 보시길 바랍니다.

참고 책 : 자바스크립트 + JQuery 완전정복 스터디 3

완전정복스터디 : PART_05_자바스크립트 클래스와 클래스 단위 프로그래밍

1장 자바스크립트 클래스 기초.

자바스크립트에서는 클래스가 없다.

하지만 클래스와 유사하게 함수를 만들어서 사용할 수 있다.

3가지 방법을 비교하여 설명하고자 한다.

(프로토타입에 중점을 두고 비교하길 바란다.)

1_특징

1_1_리터럴 방식

• 클래스 만드는 용도는 아니며 주로 여러 개의 매개변수를 그룹으로 묶어 함수의 매개변수로 보낼 때 사용
• 정의와 함께 인스턴스가 만들어지는 장점이 있음. 단! 인스턴스는 오직 하나만 만들 수 있음.

1_2_함수 방식

• 간단한 클래스 제작 시 사용
• 인스턴스마다 메서드가 독립적으로 만들어지는 단점이 있음

1_3_프로토타입 방식

• 일반적인 클래스 제작 방법
• 인스턴스마다 공통된 메서드를 공유해서 사용하는 장점이 있음
• jQuery도 prototype 방식으로 만들어져 있음

2_클래스 정의(포장법) 방법

2_1_리터럴 방식

1 2 3 4 5 6 7 8 9

var 인스턴스 = {     프로퍼티1: 초깃값,     프로퍼티2: 초깃값,       메서드1: function () {     },     메서드2: function () {     } }

cs

2_2_함수 방식

1 2 3 4 5 6 7 8 9

function 클래스이름(){     this.프로퍼티1 = 초깃값;     this.프로퍼티2 = 초깃값;       this.메서드1 = function(){     }     this.메서드2 = function(){     } }

cs

2_3_프로토타입 방식

1 2 3 4 5 6 7 8 9

function 클래스이름(){     this.프로퍼티1 = 초깃값;     this.프로퍼티2 = 초깃값;   } 클래스이름.prototype.메서드1 = function(){ } 클래스이름.prototype.메서드2 = function(){ } Colored by Color Scripter

cs

3_인스턴스 생성 방법

3_1_릴터럴 방식

1 2

var 인스턴스 = { }

cs

3_2_함수 방식

1

var 인스턴스 = new 클래스 이름()

cs

3_3_프로토 타입 방식

1

var 인스턴스 = new 클래스 이름()

cs

4_객체 외부에서 프로퍼티와 메서드 접근 방법

3가지 방식이 모두 동일하다.

1 2

인스턴스.프로퍼티1; 인스턴스.메서드1();

cs

5_객체 내부에서 프로퍼티와 메서드 접근 방법

3가지 방식이 모두 비슷한다.

this로 접근하면 된다.

1 2

this.프로퍼티1; this.메서드2();

cs

5_1_리터럴 방식

1 2 3 4 5 6 7 8 9 10 11

var 인스턴스 = {     프로퍼티1: 초깃값,     프로퍼티2: 초깃값,       메서드1: function () {         alert(this.프로퍼티1);         this.메서드2();     },     메서드2: function () {     } }

cs

6,7번 라인

5_2_함수 방식

1 2 3 4 5 6 7 8 9 10 11

function 클래스이름(){     this.프로퍼티1 = 초깃값;     this.프로퍼티2 = 초깃값;       this.메서드1 = function(){         alert(this.프로퍼티1);         this.메서드2();     }     this.메서드2 = function(){     } }

cs

6,7번 라인

5_3_프로토타입 방식

1 2 3 4 5 6 7 8 9 10 11

function 클래스이름(){     this.프로퍼티1 = 초깃값;     this.프로퍼티2 = 초깃값;   } 클래스이름.prototype.메서드1 = function(){     alert(this.프로퍼티1);     this.메서드2(); } 클래스이름.prototype.메서드2 = function(){ } Colored by Color Scripter

cs

7,8번 라인