[JavaScript]클래스와 인스턴스

__객체 지향 프로그래밍(OOP, Object-oriented programming)

프로그램 구현에 필요한 객체를 파악하고 각각의 객체들의 역할이 무엇인지를 정의하여 객체들 간의 상호작용을 통해 프로그램을 만드는 것을 말한다.

여기서 객체는 클래스라는 틀에서 생겨난 인스턴스들로 클래스와 인스턴스의 개념과 관계를 잘 이해한다면 객체지향적인 프로그램을 잘 짤 수 있다.

 

__클래스와 인스턴스 개념

게임 케릭터에 아바타를 커스텀하여 새로운 아바타를 만들어 낼 때

이때 사용되는 기본 아바타를 'class'라고 부르며 그 아바타를 바탕으로 만들어진 아바타를 '인스턴스' 객체라고 부른다.

생성자 함수(Constructor) = 거푸집
인스턴스 = 거푸집으로 찍어낸 칼

 

__사용법

ES6문법으로 인스턴스 생성

/*기존 ES5*/
functioin MayaAvartar (hair, name, color){
	this.hair = 'blackhair';
    //this 를 사용하여 속성값 지정
}

MayaAvartar.prototype.facesize()
//클래스 키워드 바깥으로 매서드 정의

/*최신 ES6*/
class MayaAvartar {
	constructor(hair, eye){
    	this.hair = 'blackhair';
        //this 를 사용하여 속성값 지정
    }
    facesize(){
    //클래스 키워드 안쪽으로 매서드 정의
    }
}
//constructor 해당 클래스의 개체 인스턴스를 만들고 초기화하기 위한 클래스의 특수 메서드입니다.
//ES6 문법을 사용한 class키워드 사용
/*
#클래스는 대문자로 시작합니다.
*/

생성자 호출

//생성자 호출
let coolmaya = new MayaAvartar('blackhair', 'eyes')
//클래스를 바탕으로한 객체 제작
coolmaya.hair//'blackhair'
coolmaya.facesize()//'얼굴크기를 설정해 주세요'
/*
#새로운 인스터를 만들때에는 new라는 키워드를 사용해야 합니다.
*/

__개념 정리

• prototype
  • 아바타의 원형 객체(original form)입니다.
• constructor
  • 인스턴스가 초기화될때 실행하는 생성자 함수
• this
  • class에서의 this는 인스턴스의 객체를 가르키지만 this의 쓰임은 워낙 다양하기 때문에 예시를 조금 가져왔습니다

//단독으로 사용한 경우 global object를 가르킵니다
var x = this;
console.log(x); //Window

//함수한에서 사용한 경우 함수의 주인에게 바인딩됩니다
 function myFunction() {
  return this;
}
console.log(myFunction()); //Window //함수의 주인인 window객체

//메서드 코드 내에서 사용된 경우는 해당 메서드를 호출한 객체로 바인딩됩니다
var person = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  },
};
 
person.fullName(); //"John Doe"

//이벤트 핸들러 안에서 사용된 경우 이벤트를 받는요소를 가르킵니다.
var btn = document.querySelector('#btn')
btn.addEventListener('click', function () {
  console.log(this); //#btn
});

//생성자 안에서 쓴 경우 함수가 생성하는 객체로 this가 바인딩 됩니다.
function Person(name) {
  this.name = name;
}
 
var kim = new Person('kim');
var lee = new Person('lee');
 
console.log(kim.name); //kim
console.log(lee.name); //lee