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 : 값 }
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