class 문법

일반적인 object 생성

object 자료형으로 캐릭터들의 정보 생성

let nunu = {
	q : 'consume',
  	w : 'snowball'
}

let geren = {
 	q : 'strike',
  	w : 'courage'
}

3번째 object를 생성하고자할 때 위의 문법을 다시 작성해야한다.
-> 비슷한 object가 많이 필요할 경우 class를 만들어 사용하는것이 좋다.

함수 사용

파라미터가 존재하지 않는 경우

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

var nunu = new 기계();
var garen = new 기계();

ES6
class 기계{
 	constructor(){
     this.q = 'strike';
  	 this.w = 'snowball'; 
    }
}

// this : 기계로부터 생성되는 object, 함수로 부터 생성되는 object => instance
// nunu, garen 인스턴스들이 생성된다.

하지만, 서로 다른 인스턴스들이 같은 값을 가지고 있기 때문에 파라미터를 추가하여 인스턴스만의 특징을 갖추게 한다.

파라미터 존재

ES5
function 기계(q,w){
	this.q = q;
  	this.w = w;
}

ES6
class Hero{
	constructor(q,w){
    	this.q = q;
      	this.w = w;
    }
}

let nunu = new Hero('consume','snowball');
let garen = new Hero('strike','courage');

비슷한 object들을 쉽게 만드록 싶을 때 해당 문법을 사용한다.

프로토타입

정의

class Hero{
	constructor(q,w){
    	this.q = q;
      	this.w = w;
    }
}

let nunu = new Hero('consume','snowball');
let garen = new Hero('strike','courage');

// Hero는 부모이며 nunu와 garen은 자손이다.
// Hero를 상속받는 nunu, garen

prototype을 사용해서 자식 object에게 데이터를 상속할 수 있다.
Hero는 자동으로 prototype이라는 공간이 생긴다.

prototype : 유전자역할을 한다.

활용

상속

class Hero{
    constructor(q,w){
        this.q = q;
        this.w = w;
    }
}

Hero.prototype.d ='heal';
Hero.prototype.f ='flash';

let nunu = new Hero('consume','snowball');

오브젝트 Hero에 데이터를 추가, 수정할 수 있다.
Hero에 존재하는 유전자에 기능을 추가해놓으면 자식들도 부모 유전자를 찾아 사용한다.

nunu의 프로퍼티만 검색할 경우 q,w만 존재하고 d,f는 보이지 않는다.
하지만 부모가 가진 prototype에 정의되어 있는경우 상속된 자손은 prototype을 사용할 수 있다.

q,w는 자손이 직접가지는 prototype이며, d,f는 부모만 가지고 있지만, 자손은 사용할 수 있다.

prototype != 상속
상속받는것이 아니라, 자바스크립트가 자손에게 없는경우 부모를 검색해서 리턴하는것이다.

프로토타입 chaining

nunu.name -> nunu가 name를 가지고 있으면 출력

name을 가지고 있지 않는경우 ? nunu 부모 유전자(prototype)를 검색 prototype에 존재하면 출력

부모도 가지고 있지 않는 경우 undefined

-> 자손이 가지고 있는것이 아니라, 단지 부모의 prototype을 검색해서 사용할 수 있는것이다.

함수 추가

자주 사용하는 함수를 생성하여 사용하고자 할 때 어떻게 해야할까?
배열에서 특정 숫자만 제거하는 함수를 생성하고자 한다.

Array.prototype에는 많은 함수들이 존재하고, Array의 자손들은 해당 함수들을 정의하지 않아도 상속받아 바로 사용할 수 있다.

즉, 내가 사용하고자 하는 Obejct의 prototype에 함수를 정의하면 해당 Object의 자손들은 전부 사용할 수 있다.

출처 : 코딩애플 유튜브