클래스 & 생성자, 메서드

클래스(=생성자) 메서드 정리

C++ 이나 Java와 같은 경우 class 라는 키워드를 제공하여 프로그래머는 클래스를 만들 수 있습니다.

클래스와 같은 이름의 메서드로 생성자를 구현해 내는 것입니다. 하지만 자바스크립트에는 이러한 개념이 없습니다. 

하지만 자바스크립트의 거의 모든 것이 객체이고, 특히 함수 객체롤 많은 것을 구현해 내고 있기 때문에 클래스, 생성자, 메스드도 모두 함수로 구현이 가능합니다.

생성자

생성자는 new 연산자에 의해 호출되어 객체의 초기화를 담당합니다.

new 생성자함수() => 자바에서는 new 클래스이름()

다시 말해서, 자바스크립트에서는 클래스 키워드가 없기 때문에 생성자함수가 클래스이자 생성자의 역활을 수행합니다.

자바스크립트에서의 생성자의 역할

데이터의 값을 설정(변수 설정)하거나 메소드를 호출해서 객체를 사용할 수 있도록 준비하는 역할을 수행

다음의 예제를 살펴 보겠습니다.

javascript

function Person(arg) {

    this.name = arg;

    this.getName = function () {
        return this.name;
    }

    this.setName = function (value) {
        this.name = value;
    }
}

var me = new Person('jaehee');
/**
 * new 키워드로 새로운 객체 me 를 만들었음.
 * 함수 Person 이 클래스이자 생성자의 역할을 한다.
 */
console.log(me.getName()); // jaehee

me.setName('JavaScript');
console.log(me.getName()); // JavaScript

위의 코드 형태는 기존 객체지향 프로그래밍 언어에서 한 클래스의 인스턴스를 생성하는 코드와 매우 유사합니다.

함수 Person 이 클래스이자 생성자의 역할을 동시에 하고 있으며 자바스크립트에서 클래스 기반의 객체지향 프로그래밍의 기본적인 형태가 이와 같습니다. 

다시 말해서, 클래스 및 생성자의 역할을 하는 함수가 있고, 사용자는 new 키워드를 이용하여 인스턴스를 생성하여 사용할 수 있습니다. 예제 코드에서 생성된 me 는 Person 의 인스턴스로서 name 변수가 있고, getName() 과 setName() 함수가 있는 구조입니다.

하지만 이 예제에는 문제가 있습니다.

예를 들어서 이 Person 을 생성자로 하여 여러 개의 인스턴스인 객체를 생성한다고 가정해보겠습니다.

javascript

var me = new Person('me');
var you = new Person('you');
var her = new Person('her');

위와 같이 여러 개의 인스턴스를 생성하여 사용하면 겉으로는 별 문제없이 작동되어 질 것입니다. 하자만 각 객체(인스턴스)는 자기 영역에서 공통적으로 사용할 수 있는 setName() 함수와 getName() 함수를 각각의 객체마다 따로 생성하고 있습니다. 이는 불필요하게 중복되는 영역을 메모리에 올려놓고 사용하게 됨을 의미하고 자원 낭비와 성능을 떨어뜨리는 원인이 됩니다.

따라서 위와 같은 문제를 해결하려면 다른 방식을 접근이 필요한데, 여기서 활용할 수 있는 자바스크립트의 특성인 함수 객체의 프로토타입을 이용하는 것입니다.

다음의 코드를 살펴 보겠습니다.

javascript

function Person(arg) {
    this.name = arg;
}

Person.prototype.getName = function () {
    return this.name;
};

Person.prototype.setName = function (value) {
    this.name = value;
};


var me = new Person('jaehee');
var you = new Person('you');

console.log(me.getName()); // jaehee
console.log(you.getName()); // you

위의 코드는 Person 함수객체의 prototype 프로퍼티에 getName() 과 setName() 함수를 정의하였습니다. 

이 Person 으로 객체를 생성한다면 각 객체를 각자 따로  getName() 과 setName() 함수객체를 생성할 필요 없이 객체가 공통으로 가지는 공간인 prototype 객체의 공간인 한군데에서 setName() 과 getName() 함수에 접근하여 사용할 수 있습니다. 정확히는 프로토타입 체인을 통해 접근하는 것입니다.

이와 같이 자바스크립트에서 클래스 안의 메서드를 정의할 때는 프로토타입 객체에 정의한 후,  new 로 생성한 객체에서 접근할 수 있게 하는 것이 좋습니다.

@ 객체(Object)와 클래스(Class)

현실세계: 설계도 → 객체 (아파트를 짓기 위해 설계도면 필요, 설계도를 가지고 아파트가 완성)

자바: 클래스 → 객체 

클래스에는 객체를 생성하기 위한 필드와 메소드가 정의되어 있다.

클래스로부터 만들어진 객체를 해당 클래스의 인스턴스(instance)라고 한다. ( 보통 객체를 인스턴스라고 부르기도 함)

객체는 독립적으로 사용하는 어떤 대상을 일컫는다면 인스턴스는 어떤 설계도를 바탕으로 만들어진 것인지에 포커스를 맞춘다 

하나의 클래스로부터 여러 개의 인스턴스를 만들 수 있다.

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

클래스가 없으면 프로그램이 더 짧아진다. 객체를 생성하기 위해 클래스를 만들 필요가 없기 때문이다.

자바스크립트에서는 빈 객체를 필요한 시점에 생성하고 그 이후에 필요한 멤버를 추가할 수 있다.

객체는 원시 데이터 타입이나 함수, 다른 객체를 추가하여 객체의 프로퍼티를 구성한다.

빈 객체는 사실 완전히 비어있는 것이 아니다.

빈 객체는 몇몇 내장 프로퍼티를 가지고 있지만 자신이 직접 소유한 프로퍼티가 없을 뿐이다.

JAVA 의 객체 생성방법

JAVA

// JAVA 의 객체 생성
HelloOO hello_oo = new HelloOO

Jaehee's WebClub