[JavaScript] 객체지향 Class 문법 & prototype

객체지향 Class 문법

만약에 {object} 자료형으로 정보를 가져올 때 그 수가 어마어마하게 많다면 일일히 치기 비 효율적이다. 이때 쉽게 할 수 있는 문법이 클래스 문법이다!

클래스 문법으로 비슷한 object형을 많이 만들어 쓸 수 있다.

function 기계(스킬1,스킬2) {
  this.q = 스킬1;
  this.w = 스킬2;
}

this란? 간단하게 말해서 기계로부터 생성되는 object 이다. 이를 instance라고한다.

this가 존재하면 클래스 역할이 가능하다.

const nunu = new 기계('strike','courage') 

클래스를 이용해 간단하게 오브젝트를 생성할 수 있다.

new는 기계로 부터 자식을 뽑아주는 문법!

ES6 class 문법

class Hero {
	constructor(){
  this.q = 스킬1;
  this.w = 스킬2;
	}
}

const nunu = new Hero ('strike','courage') 

---

prototype 문법

프로토타입을 사용하여 자식 object에게 데이터를 물려줄 수 있다!

콘솔창에서 보면 prototype이란것이 나온는 것을 확인 할 수 있는데

prototype은 간단히 말해서 유전자이다.

 

만약 기계.prototype.name = ‘kim’ 으로 데이터를 추가하거나 수정하면 ,

기계 유전자로부터 추가된 name을 자식들이 모두 사용 가능하다.

function 기계() {
  this.q = 'strike';
  this.w =  'snowball';
}

기계.prototype.name = ‘kim’

var nunuu = new 기계 ()

 

 

 

실제로 nunu라고 쳤을 경우 name이 없지만

부모가 가지고 있으면 유전자로 인해 끌어다가 name을 쓸 수 있다.

즉, 상속 기능이 있다.

속성을 물려주고 싶다면 ?

1. 클래스 내에 추가하면 ( 자식이 직접 가집)
2. 프로토타입에 추가하면 자식은 가지고 있지 않지만 부모만 가지고 있음, 끌어다 쓸 수 있음

부모 유전자에 있는 것을 자식이 사용이 가능한 이유는 무엇일까?

오브젝트에서 데이터를 뽑을 때 일어나는 순서

nunu.name 이런식으로 점과 함께 데이터 이름을 쓰면 데이터를 뽑는다. 이때 직접 가지고 있는지 확인한다.

근데 만약 name이 없다면 부모 유전자에게 물어본다.

근데 부모도 없으면 부모의 부모 유전자 까지 확인한다.

이것을 끊임 없이 확인하는데 이를 prototype chain 이라고 한다.

응용 ! 우리가 Array에서 sort()나 length() 함수를 쓸 수 있는 이유는?

var 어레이 = [4,2,1]
var 어레이 = new Array(4,2,1)

사실 배열은 위 모두 동일하다. 즉, array라는 기계가 하나 있어서 자식을 뽑아서 사용한다.

array에 있는 기본 함수들은 부모유전자에 기록이 되어 있어서 사용이 가능하다!

이를 확인 해 보기 위해 array의 prototype을 보면 함수들이 있다.

따라서 array의 자식들은 모두 이것들을 갖다 쓸 수 있는 것이다.

응용! 직접 추가해보자

어레이에서 삭제하는 기능을 자주 쓸 경우, 함수를 만들어서 추가할 수 있다.

Array.prototype.함수 = function () {

	
}

이렇게 추가할 경우(유전자를 추가할 경우!), 앞으로 모든 array에서 함수 사용이 가능하다!