클래스(class)와 인스턴스 객체(instance object)

1. 객체지향프로그래밍

• 기본 골격이 되는 뼈대를 만들고 여러 부품을 붙여 각기 다른 객체를 만드는 프로그래밍 패턴
• 기본 골격이 되는 뼈대를 클래스(class)라고하며 만든 객체를 인스턴스 객체(instance object) 줄여서 인스턴스(instance)라고 한다.

1) class와 instance 정의하기

• class의 정의는 일반함수와 비슷하다. 다른 점은 일반함수와 구분하기 위해 대문자로 시작하며 이름을 일반 명사로만 작성한다. 일반함수의 경우 소문자로 시작하며 이름에 적절한 동사를 포함시킨다.
• 새로운 instance를 정의하기 위해선 new 키워드를 사용해야한다.

// 일반함수
function numAdd() {
	// 생략
}

// class
function Computer() {
	// 생략
}

// instance
let bpple = new Computer(//생략)

 

 

class를 정의하는 방법

• ES5에서는 class를 함수로 정의했다.

function Computer(brand, CPU, memory, GPU) {
	//instance가 생성될 때 실행되는 코드
}

 

• ES6이후는 class를 class라는 키워드로 정의할 수 있다.

class Computer{
	constructor(brand, CPU, memory, GPU) {
    	// instance가 생성될 때 실행되는 코드
    }
}

 

• 최근에는 주로 ES6방법이 쓰이며 둘 다 생성자(constructor)함수라고 불린다.

 

instance를 생성하는 방법

• new 키워드를 사용한다.
• 사용하게되면 생성자 함수가 실행되며 instance가 할당된다.
• 생성된 instance는 class의 속성과 메소드를 갖게 된다.

let myCom = new Computer('DIY', 'i5', '16GB', 'GTX1060');
let broCom = new Computer('DIY', 'i7', '32GB', 'GTX1070');

 

2) 속성과 메소드의 정의

• 속성은 값을 할당하는 요소이고 메소드는 객체 안에 있는 함수를 말한다.

클래스의 속성을 정의하는 방법

• ES5의 경우 함수 안에 정의

function Computer(brand, CPU, memory, GPU) {
    this.brand = brand;
    this.CPU = CPU;
    this.memory = memory;
    this.GPU = GPU;
}

• ES6의 경우 class 키워드 안에 있는 생성자(constructor)안에 정의

class Computer{
	constructor (brand, CPU, memory, GPU) {
    		this.brand = brand;
    		this.CPU = CPU;
    		this.memory = memory;
    		this.GPU = GPU;
    }
}

• parameter는 instance 생성시 지정하는 값이다.
• this에 할당을 하겠다는 것은 instance에 부여하겠다는 뜻이다. (객체에 key와 value를 추가하는 것과 같아보인다.)

 

클래스의 메소드를 정의하는 방법

• ES5의 경우 prototype 키워드를 사용해야 메소드를 정의할 수 있다.

function Computer(brand, CPU, memory, GPU) {
    this.brand = brand;
    this.CPU = CPU;
    this.memory = memory;
    this.GPU = GPU;
}

Computer.prototype.run = function() {
	// 컴퓨터 전원 ON을 구현하는 코드
}

Computer.prototype.login = function() {
	// 로그인을 구현하는 코드
}

• ES6의 경우 생성자함수와 함께 class 키워드 안에 묶어서 정의한다. (function을 사용하지 않으며 이름만으로 정의)

class Computer{
	constructor (brand, CPU, memory, GPU) {
    		this.brand = brand;
    		this.CPU = CPU;
    		this.memory = memory;
    		this.GPU = GPU;
    }
    
    run() {
    }
    
    login() {
    }
}

 

3) 속성과 메소드의 instance 안에서 사용

let myCom = new Computer('DIY', 'i5', '16GB', 'GTX1060');
myCom.brand; // 'DTY'
myCom.run();  // 'myCom의 전원이 켜졌습니다.'

let broCom = new Computer('DIY', 'i7', '32GB', 'GTX1070');
broCom.brand; // 'DTY'
broCom.run();  // 'broCom의 전원이 켜졌습니다.'

 

4) 배열과 클래스의 관계

• 이제까지 만들었던 배열은 Array의 instance였다. (속성과 메소드의 사용법이 동일하다.)

// instance
let myCom = new Computer('DIY', 'i5', '16GB', 'GTX1060');
myCom.brand; // 'DTY'
myCom.run();  // 'myCom의 전원이 켜졌습니다.'

// array
let arr = new Array('code', 'states');
arr.length // 2
arr.push(Good); // ['code', 'states', 'Good']