[Java Script] 객체지향 프로그래밍 : 클래스, 생성자, 메서드

<클래스 기반의 언어>

• 클래스로 객체의 기본적인 형태와 기능을 정의
• 생성자로 인스턴스를 만들어서 사용할 수 있음
• 클래스에 정의된 메서드로 여러 가지 기능을 수행할 수 있음
• 모든 인스턴스가 클래스에 정의된 대로 같은 구조이고 보통 런타임에 바꿀 수 없다.
• 정확성, 안전성, 예측성 등의 관점에서 클래스 기반 언어는 프로토타입 기반의 언어보다 좀 더 나은 결과를 보장한다.
• Java, C++이 여기에 속한다

<프로토타입 기반 언어>

• 객체의 자료구조, 메서드 등을 동적으로 바꿀 수 있음
• 동적으로 자유롭게 객체의 구조와 동작 방식을 바꿀 수 있음
• 자바스크립트가 여기에 속함

 

- 자바스크립트는 거의 모든 것이 객체이고, 특히 함수 객체로 많은 것을 구현할 수 있다.

=> 클래스, 생성자, 메서드도 모두 함수로 구현할 수 있다

 

1. 자바스크립트로 객체 생성하기 (자원 낭비)

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

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

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

var me = new Person("zzoon");
console.log(me.getName()); //zzoon

me.setName("iamhjoo");
console.log(me.getName()); //iamhjoo

var you = new Person("you");
var him = new Person("him");

- 함수 Person이 클래스이자 생성자의 역할을 한다.

- 자바스크립트에서 클래스 기반의 객체 지향 프로그래밍의 기본적인 형태

=> 클래스 및 생성자의 역할을 하는 함수가 있고, 사용자는 new 키워드로 인스턴스를 생성해서 사용할 수 있음

- 위와 같은 방법은 겉으로는 별 문제 없이 작동하지만, 각 객체가 자기 영역에서 공통적으로 사용할 수 있는 setName(), getName() 함수를 따로 생성하고 있다.

=> 불필요하게 중복되는 영역을 메모리에 올려놓고 사용하기 때문에, 자원 낭비가 발생한다.

 

 

 

2. 프로토타입을 활용한 객체 생성하기

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("me");
var you = new Person("you");
console.log(me.getName()); //me
console.log(you.getName()); //you

- Person 함수 객체의 prototype 프로퍼티에 getName()과 setName() 함수를 정의하였다.

=> Person으로 객체를 생성할 때, 각 객체는 각자 따로 함수 객체를 생성할 필요 없이, 프로토타입 체인으로 함수를 접근할 수 있다.

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

 

 

 

 

3. 더글라스 크락포드가 제시한 메서드 정의 방법

Function.prototype.method = function(name,func){
    if (!this.prototype[name]){
        this.prototype[name] = func;
    }
}

- 더글라스 크락포드는 위와 같은 메서드를 정의하는 방법을 소개했다.

Function.prototype.method = function(name,func){
    this.prototype[name] = func;
}

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

Person.method("setName", function(value){
    this.name = value;
});

Person.method("getName", function(){
    return this.name;
});

var me = new Person("me");
var you = new Person("you");
console.log(me.getName()); //me
console.log(you.getName()); //you

- 이를 이용한 방법이 위와 같다.