개발/Javascript

자바스크립트 함수 형태, 클래스처럼 쓰는 법

신매력 2013. 4. 9. 17:10

자바스크립트의 함수는 객체의 속성을 갖고있다.
모든 함수 객체는 prototype이라는 프로퍼티를 갖고 있고, 

이 속성의 값은 함수 자체를 값으로 갖는 constructor라는 속성이 있는 객체다.
객체이긴 하지만 호출을 할 수 있다는 특징이 있다.


즉, 아래처럼 aaa에 함수 자체를 갖고있을 수 있단 말이다.


var aaa = function a {

//구현

}



자바스크립트 함수 3가지 형태가 있다.

자바스크립트는 클래스가 없는데, 클래스처럼 사용할 수 있는 법이 있다.

예제~ GOGO!




1. 가장 많이 쓰는 일반 함수 형태


function func_name() {
    // 구현....
}

function foo() {
    // 구현....
}


HTML 코드에서 부를 때는 onclick = func_name();  이런식으로 부른다.

이렇게 짜면 편하지만, 여러사람이 짤 때 함수명이 겹치는 경우가 있으므로

클로저를 이용하든, 2,3번처럼 이용하든 하는 것을 권장한다.


클래스처럼 사용하는 법 2가지는 아래에 있다.


2. 객체를 생성하여 사용하는 함수 형태


 var func_name = function() {
    this.temp = function() {
        // 구현....
    }
}



var a = new func_name(); 으로 객체를 생성하며,
호출시에는  onclick = a.temp(); 이렇게 부른다.

특이한점은 func_name이 객체로 정의되었는데 함수를 포함을 하고 있으며,
함수안에 또 함수가 존재할 수 있다는 것이다.

이것은 함수(또는 객체)이지만 클래스처럼 사용할 수 있다. 
func_name이 클래스라면 그 안에 있는 함수가 멤버메소드이며, 그 안에 있는건 멤버변수가 된다.

이 함수의 장점은 new를 통해 동적으로 생성이 가능하다는 것이다.



3. JSON형태 함수


 var obj = {
    func : function() {
        // 구현...
    },
    
    value : null,

    foo : function() {
        // 구현
    }
}



JSON 데이터처럼 생긴 함수이다.

접근할 때는 new로 생성을 하지 않는다. 
부르고 싶을 때에 바로 click = obj.func()  형식으로 호출한다.