JS 객체지향 프로그래밍 1

참고: 생활코딩 Javascript 객체 지향 프로그래밍

객체란?

서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인것

let memberObject={
	manager:'egoing',
    	developer:'graphittie',
        designer:'leezce'
}

console.log(memberObject.designer);
console.log(memberObject['designer']); //둘 다 같은말임

프로퍼티의 값을 업데이트 할 땐

memberObject.designer='leezche';

삭제할땐

delete memberObject.manager

그래서, 객체는 언제 쓰나요?

Math.PI, Math.floor(), Math.random() 등등 우리는 이미 객체를 사용하며 프로그래밍 하고있다.
객체이름: Math
변수,함수: PI, floor(), random()

사실상 이미 만들어진 객체를 사용하지 않고 JS 프로그램을 만들기는 불가능하다.

---

this

• 나, me, 자기자신을 가리키는 표현
• this가 속해있는 메소드가 속해있는 객체를 가리키도록 약속된 특수한 예약어, 약속

example)

let kim={
	name:'kim';
    	first:10;
    	second:20;
    	sum:function(f,s){
    	return kim.first+kim.second
        	}
	}

위 코드도 물론 가능하다. 정상적으로 작동도 한다. 하지만.. 사실 나의 성이 kim이 아니라 lee라서 이름을 다 바꿔줘야한다면?
kim.first => lee.first
kim.second => lee.second
등등.. 당장은 2개만 바꾸면되지만 1억개를 하나씩 일일이 바꿔야한다고 생각해보자...
유연성 zero

그래서 this 를 쓴다.

let kim={
	name:'kim';
    	first:10;
    	second:20;
    	sum:function(f,s){
    	return this.first+this.second
        	}
	}
    

---

constructor의 필요성

위에 설명까지는 하나씩 수작업으로 만든 느낌이다. 하지만 JS에는 객체를 찍어내는 공장 역할을 하는 게 있다. 같은 형태의 객체들을 다 하나씩 수정하기는 힘들다.

객체를 양산해보자,

Date d1= new Date('2019-04-10');
d1.getFullYear();//2019
d1.getMonth();//3 (0부터 카운트)
console.log(Date); // function Date(){[native code]}
//native code = 우리가 만든 게 아닌 내장된 함수

이런식으로 Javascript에서 이미 만들어진 Date객체를 양산할수도 있다.

Constructor function을 만들어보자.

function Person(name,first,second,third){
	this.first=first;
    	this.second=second;
        this.third=third;
        this.sum=function(){
        	return this.first+this.second
       	 }
}
let p1= new Person('Jenny',20,30,40);
//함수 앞에 new가 붙으면 Person()은 더이상 그냥 함수가 아닌 생성자 함수가 된다.

Constructor function을 쓰면 뭐가 좋을까?

constructor function을 수정하면 그 함수를 사용하는 모든 객체가 한번에 바뀐다.

---

Prototype

위의 코드를 다시 가져와보면,

function Person(name,first,second,third){
	this.first=first;
    	this.second=second;
        this.third=third;
        this.sum=function(){
        	return this.first+this.second
       	 }
}

sum함수를 살펴보자.
생성자가 실행될 때마다, 즉 우리가 생성하려고 하는 객체의 sum이라는 이름의 함수가 생성될 때마다 만들어지고 있다. => 메모리낭비
1억개의 객체 => 1억개의 함수, 메모리 => 성능저하

function Person(name,first,second,third){
	this.first=first;
    	this.second=second;
        this.third=third;

}

Person.prototype.sum=function(){

	return this.first+this.second;
}

정의하는 곳 안에 함수가 만들어지지 않았기 때문에 객체를 만들 때마다 실행되지 않는다. 한 번만 정의하면 성능 절약, 메모리 절약 가능.

let kim = new Person('kim',10,20,30);
kim.sum=function(){
	return this.first+this.third;
	}
    

이런식으로 kim만 수정 가능하다

총 정리

prototype은 단어적 의미로 원형이라는 뜻인데 생성자 함수의 밖에서 함수를 정의해 주지만, 생성자 함수로 만든 모든 객체가 접근 가능하다.
prototype이 아니면 생성자 함수 안에 함수를 정의해야 하는데, 새로운 객체를 생성할 때마다 함수를 정의해야 하므로 메모리가 낭비된다.
객체가 개별적으로 동일한 이름의 함수를 정의해서 사용한다면 해당 객체가 가진 함수를 먼저 확인하고 실행하기 때문에 prototype으로 만든 함수와 함수를 사용하는 다른 객체에 영향을 주지 않는다.