객체지향언어- 커스텀 생성자

📌 객체지향언어란?

객체와 객체가 메소드를 통해 상호작용하는 것
객체지향은 표현하고자 하는 사물을 추상적으로 표현

• 행동 = 함수 = 메소드
• 상태 = 프로퍼티
• 아래 코드처럼 어떤 대상에 대한 정보를 알 수 있도록 중요한 내용을 간추린 것이 바로 '추상화'이다.

const Me = {
	name : '김태희',
  	age : 26
  	studying : function(student){
    	student.levelUp; 
    }
}

const student = {
	level = 1; 
  	levelUp: function(){
    	this.level++;
    }
}

Me.studying(student);

📌 커스텀 생성자(constructor) 함수

생성자 함수를 사용하는 이유: 같은 객체 안에 메소드와 프로퍼티를 동시에 생성할 수 있기 떄문

• 만드는 방법은 바로 new를 사용한다.
• 함수 이름은 대문자로 쓰는 것이 개발자들 간의 약속!
• let snack = ['쿠키','초콜릿','커피']을 생성자 함수로 만들어보면 아래와 같다.

	let snack = new Array('쿠키','초콜릿','커피');

• 단 () 안에 숫자를 하나 넣으면 아래와 같이 4개의 값이 없는 배열이 생성된다는 점을 주의해야 한다.
• new Array(4) [undefined, undefined, undefined, undefined]

💡 new의 역할
1. 새로운 함수를 생성해준다.
2. 생성자 함수 안의 this를 인스턴트로 바라보게 한다.

(코드 예시)

const snack = new Array('쿠키','초콜릿','커피');

function SnackList(menu){
    this.menu = menu;
    this.select = function(){
        console.log(snack[0]);
    }
}

const eat1 = new SnackList(snack);
const eat2 = new SnackList(snack);

eat1.select(); //쿠키
eat2.select(); //쿠키
SnackList.eat1 == SnackList.eat2 //false

생성자 함수의 issue 발생

• 여러 개의 인스턴스(eat1,eat2)를 만들어 냈고, 출력되는 값이 같지만 false인 이유는 인스턴스를 하나 생성할 때마다 매번 또 다른 함수를 생성하기 떄문이다.
• 만약 실무에서 수 십 개~ 수 백 개 인스턴스를 만들려고 한다면, 메모리를 낭비하는 비효율이 생길 수 있다.

💡 함수 내 this가 가르키는 영역
1. 일반 함수의 this는 소속된 함수를 가르킨다.
2. 생성자 함수 안의 this를 인스턴트로 가르킨다.

📌 프로토타입(prototype)- 메소드 저장공간

프로토타입은 DNA와 비슷하다. 부모 함수를 공유하지만 존재는 다르기 때문이다.

(프로토타입 코드 예시)

const snack = new Array('쿠키','초콜릿','커피');

function SnackList(menu){
    this.menu = menu;
}

SnackList.prototype.select = function(){
    console.log(snack[0]);
}

const eat1 = new SnackList(snack);
const eat2 = new SnackList(snack);

eat1.select(); //쿠키
eat2.select(); //쿠키
SnackList.prototype.eat1 == SnackList.prototype.eat2 
//true

생성자 함수 issue 해결

• 결과값이 같은 두 개의 인스턴스가 true이기 때문에, 두 인스턴스는 같은 프로토타입을 갖는다고 할 수 있다.
• 즉, 부모였던 SanckList의 프로토타입을 함께 공유하고, 하나의 함수만을 생성하기 때문에 효율성 문제를 해결할 수 있다.
• 실무에서는 프로토타입을 사용하는 것이 좋다.

📌객체의 상속(prototype)

1. 부모 함수를 만든다.
2. 자식 함수를 만든다.
3. 부모.call(this)로 부른다.
   --> Child 함수의 this가 Parent 생성자 함수의 this를 바라보게 함
4. 자식.prototype = Object.create(부모.property)로 프로토타입 연결

• 자식은 부모 함수의 메소드 또는 프로퍼티를 받아서 사용할 수 있다.
• 반대로 부모는 자식으로부터 받을 수는 없다.
• 바로 위의 부모가 없다면 더 위로 올라간다.

 function Boss(){
            this.name = '보스태희';
        }
        Boss.prototype.rename = function(name){
            this.name = name;
        }

        Boss.prototype.sayName = function(){
            console.log(this.name);
        }

        const boss = new Boss();

        // boss.name
        // '보스태희'
        // boss.rename('킹보스태희')
        // undefined
        // boss.name
        // '킹보스태희'
        // boss.sayName()
        // 038.html:74 킹보스태희