javascript 클래스

- 자바스크립트는 클래스 정의 대신 생성자 함수와 new 키워드를 제공한다.

- 생성자 함수를 이용해 오브젝트를 인스턴스화할 때 

  오브젝트의 초기 속성 종류와 속성값을 지정할 수 있으며, 

  모든 자바스크립트 함수는 생성자로 활용할 수 있다.

- 생성자 함수에서 new 키워드를 이용해 새 인스턴스를 만들 수 있다.

예)

// 생성자 함수

var Person = function(name){

this.name = name;

}

var alice = new Person('h5homom');

Person('hohomom');  // undefined

- new 키워드를 이용해 생성자 함수를 호출하면

  컨텍스트가 전역(윈도우)에서 만들려고 하는 인스턴스 전용의 새로운 빈 컨텍스트로 바뀐다.

- this 키워드는 현재 인스턴스를 가리킨다.

- 생성자 함수에서 아무것도 반환하지 않으면 기본적으로 현재 컨텍스트를 가리키는 this를 반환한다.

- 기본형을 제외한 모든 타입을 반환할 수 있다.

예)

var Class = function(){

// 함수를 이용한 싱글톤으로 객체 생성

var klass = function(){ // function klass(){}

this.init.apply(this, arguments);

};

// klass 객체의 prototype 메소드 추가

klass.prototype.init = function(){ alert("p"); };

return klass;

}

var Person = new Class;

// Person을 인스턴스화할 때 호출된다. Person.prototype.init

Person.prototype.init = function(){ alert("c"); };    

// C 출력 - 인스턴스 추가한 함수 있음 (우선 호출 - ?)

Person.prototype.ini = function(){ alert("c"); };    

// P 출력 - 인스턴스 함수 없음 -> 오브젝트 프로토타입 검색

var person = new Person;

클래스 생성 방법 

http://www.phpied.com/3-ways-to-define-a-javascript-class/

http://programmingsummaries.tistory.com/209

http://msdn.microsoft.com/ko-kr/magazine/cc163419.aspx

1. 함수 이용하기

1.1. 내부에 메소드 정의하기

1.2. prototype에 메소드 추가하기

function Apple (type) {

this.type = type;

this.color = "red";

}

Apple.prototype.getInfo = function() {

return this.color + ' ' + this.type + ' apple';

};

Apple.fn = Apple.prototype;

Apple.fn.run = function(){ /* ... */ };

// jQuery는 포로토타입의 별칭으로 jQuery.fn을 사용하므로 

    jQuery 플러그인에서는 jQuery.fn 으로 함수 추가

2. 객체 리터럴 사용하기

3. 함수를 이용한 싱글톤

var apple = new function() {

this.type = "macintosh";

this.color = "red";

this.getInfo = function () {

return this.color + ' ' + this.type + ' apple';

};

};

클래스에 함수 추가하기

자바스크립트의 오브젝트에 프로퍼티를 추가하는 방법으로 클래스에 함수를 추가할 수 있다.

Person.find = function(){ /* ... */ };

var item = Person.find();

인스턴스 함수를 생성자 함수에 추가하려면 생성자의  prototype이 필요하다.

Person.prototype.breath = function(){ /* ... */ };

var item = new Person;

item.breath();

클래스 라이브러리에 메소드 추가하기

클래스에 직접 설정한 프로퍼티는 정적 멤버와 같다.

var Person = new Class;

// 클래스에 직접 정적 메소스 함수 추가

Person.find = function(){ /* ... */ };

// 정적 함수를 직접 호출

var item = Person.find();

클래스의 프로토타입에 설정한 프로퍼티는 인스턴스에서도 이용할 수 있다.

var Person = new Class;

// 프로토타입에 추가한 인스턴스 함수

Person.prototype.save = function(){ /* ... */ };

// 인스턴스에서 프로토타입에 추가한 함수를 호출

var item = new Person;

item.save();

문법이 복잡하고(?), 실용성도 떨어지며(?), 반복적인것 같다.

때문에 정적, 동적 프로퍼티 목록을 한눈에 파악하기 어렵다.

extend(), include() 사용

var Class = function(){

var klass = function(){

this.init.apply(this, arguments);

};

klass.prototype.init = function(){};

klass.fn = klass.prototype;

klass.fn.parent = klass;

// 클래스에 프로퍼티 추가 - extend

klass.extend = function(obj){

var extended = obj.extended;

for(var i in obj){

klass[i] = obj[i];

}

if(extended) extended(klass)

}

// 인스턴스에 프로퍼티 추가 - include

klass.include = function(obj){

var included = obj.included;

for(var i in obj){

klass.fn[i] = obj[i];

}

if (included) inclded(klass)

};

return klass;

}

extend()는 오브젝트를 인자로 받아 클래스를 만든다.

var Person = new Class;

Person.extend({

find: function(){},

exists: function(){}

});

var item = Person.find();

include()는 프로퍼티를 클래스 함수로 직접 복사하지 않고 클래스의 프로토타입으로 복사한다.

var Person = new Class;

Person.include({

save: function(){},

destroy: function(){}

});

var Person = new Class;

person.save()

클래스 상속과 프로토타입

자바스크립트는 클래스와 인스턴스를 구별하는 언어가 아니라 프로토타입 기반 언어이다.

자바스크립트에서는 새 오브젝트의 초기 프로퍼티를 얻을 때,

템플릿으로 사용할 수 있는 오브젝트인 프로토타입의 오브젝트 개념을 제공한다.

모든 오브젝트는 다른 오브젝트의 프로토타입이 되어 자신의 프로퍼티를 공유할 수 있다.

자바스크립트는 로컬 오브젝트를 검색해서 오브젝트의 프로퍼티를 가져오려고 한다.

로컬 오브젝트에서 프로퍼티를 찾지 못하면 자바스크립트는 오브젝트의 프로토타입을 다시 검색하는

동작을 반복해서 결국 Object.prototype까지 도달한다.

속성을 찾았으면 값을 반환하고 찾지 못하면 undefined를 반환한다.

즉, Array.prototype에 속성을 추가하면 자바스크립트 배열 전체에 영향을 미친다.

예)

var Animal = function(){};

Animal.prototype.breath = function(){

console.log('breath');

}

var Dog = function(){};

Dog.prototype = new Animal;

Dog.prototype.wag = function(){

console.log('wag tail');

}

var dog = new Dog;

dog.wag();

dog.breath();    // 상속받은 프로퍼티