사용자 도구

사이트 도구


language:javascript:class

클래스 - 기본

내장된 기본 객체의 사용, 클래스 사용의 기본.

var now  = new Date();
var year = now.getFullYear();

내장 객체가 아닌 임의의 새로운 클래스 생성

// 클래스이름 : MainClass와 같이 영문으로 구성되는 이름
// 파라미터 : 파라미터1, 파라미터2, 와 같이 콤마로 구분되는 파라미터들
//- 코드의 형식 -
클래스이름 = function( 파라미터 )
{
	// ...
}

실제 사용하는 코드의 예시, 함수처럼 보이지만. javascript에서는 클래스 선언과 생성자다.

//- 간단한 예제
MainClass = function( myId, yourName )
{
	this.myId = myId;
	this.yourName = yourName;
}

클래스의 변수(프로퍼티)는,

  • 'this.프로퍼티이름' : 클래스의 프로퍼티.

클래스의 사용은 내장 객체(클래스)를 사용하는 방법과 같다. 'new'연산자로 할당한다.

클래스의 변수를 추가하는 방법은 prototype 키워드를 사용해서 메소드를 추가한다.

클래스이름.prototype.함수이름 = function(파라미터) {
//...
}

사용하는 예제.

MainClass.prototype.doSomething( cmd )
{
	this.cmd = cmd;
}

MainClass를 사용한다면 이렇게 쓴다.

var _mc = new MainClass( 'a', 'b' );
_mc.doSomething( 'quit' );

리턴할 값이 있다면 'return' 키워드로 값을 돌려준다.

MainClass.prototype.showResult() {
	return 1;
}

클래스의 함수 선언은 동적으로 가능하다.

var _mc = new MainClass( 'a', 'b' );
_mc.doSomething( 'quit' );
 
_mc.printThis = function() {
	return xx;
}

JSON 표기

JSON = Javascript Object Notation, 데이터를 표기하는 방법

  1. 이름과 값을 쌍으로 표시
  2. 배열

이름/값의 형식으로

{ 이름1 : 값, 이름2 : 값 }
var countries = { ko : '한국', jp : '일본' }
var koName = countries.ko;
var jpName = countries['jp'];

배열

[ 값0, 값1, 값2 ]
var countries = [ 'ko', 'jp ]
var koName = countries[0];
var jpName = countries[1];

(이름/값) 형식과 배열 형식을 혼합해서 사용

var _member = {
	name : '홍길동',
	likeColor : ['black','white']
};
var _msg = _member.name + "/ 색 " + 
	member.likeColor.length + "/ 첫번째 색 : " + member.likeColor[0];

JSON을 사용한 클래스 정의

// 형식
클래스이름 = function(파라미터)
{
}
클래스이름.prototype = 
{
	함수이름1 : function(파라미터) {
	} ,
	함수이름2 : function(파라미터) {
	}
}

JSON을 사용한 클래스 정의 - 실제 코드

MainClass = function( myId, yourName )
{
	this.myId = myId;
	this.yourName = yourName;
}
MainClass.prototype = 
{
	doSomething : function( cmd )
	{
		this.cmd = cmd;
	} ,
	printThis : function() {
		return xx;
	}
}

패키지 정의하기

C++의 namespace와 같은 역할.

선언하는 예

var ajax = new Object();
 
ajax.Request = function() {}
 
ajax.Request.prototype = {
	someFunc : function() {
	}
}

사용하는 방법

var req = new ajax.Request();
req.someFunc();

중첩 선언 가능하다.

var ajax = new Object();
ajax.part1 = new Object();
 
ajax.part1.Request = function() {}
 
ajax.part1.Request.prototype = {
	someFunc : function() {}
}
 
var req = new ajax.part1.Request();

Object 클래스를 사용하지 않고, JSON 방식으로 선언할 수 있다.

var ajax = {};
ajax.part1 = {};
 
ajax.part1.Request = function() {}

상속

언어에서는 지원하지 않지만, prototype을 사용해서 구현은 가능

// 부모 클래스 선언
Daddy = function( param1 ) { //...
	this.param1 = param1;
}
Daddy.prototype.getName = function() {
	return param1;
}
Daddy.prototype.toString = function() {
	return this.param1 + "xxxx desu";
}
 
// 자식클래스 - 정의
ChildOne = function( param1 ) {
	this.param1 = param1;
}
// 자식클래스 - 상속
ChildOne.prototype = new Daddy;
// 자식클래스 - 함수 오버라이딩
ChildOne.prototype.toString = function() {
	return this.param1 + "from child.";
}

상속된 클래스가 사용 되는 모습

var dad = new Daddy("p");
var child = new ChildOne("c");
var _msg = 
	dad.getName() + "/ " + dad.toString() + "\n" +
	child.getName() + "/ " +	// 부모에서 상속된 getName() 실행
	child.toString() + "\n";	// 자식쪽에서 오버라이딩된 toString() 실행

부모의 함수 호출하기

appy(this) 함수로 부모의 함수 호출.

// 새로운 부모
Line = Function( x1, y1, x2, y2 ) { // ...
}
Line.prototype.getLength = function() { 
	return Math.sqrt(..);
}
 
// 자식 클래스 선언과 부모쪽 함수의 선언
RatioLine = Function( x1, y1, x2, y2, ratio ) { // ...
	this.ratio = ratio;
}
 
RatioLine.prototype = new Line;
 
RatioLine.prototype.getLength = function() {
	var _len = Line.prototype.getLength.appy(this);
	return _len * this.ratio;
}

부모 클래스의 이름을 사용하지 않고 부모의 함수 실행

// 위의 코드에서 
RatioLine.prototype.getLength = function() {
	// (old) : var _len = Line.prototype.getLength.appy(this);
	var _len = this.parent.getLength.appy(this);
	return _len * this.ratio;
}

JSON 방식으로 설정하는 부분 - 패스

language/javascript/class.txt · 마지막으로 수정됨: 2024/04/23 22:44 저자 127.0.0.1