객체지향 프로그래밍 ?
객체지향은 프로그래밍 방법론중에 하나로 객체들을 서로 소통할 수 있게만든 방법!
객체 지향의 객체는 우리가 표현하고자 하는 구체적인 사물을 추상적으로 표현한 것,
추상적이란 최소한의 정보로 대상을 표현 한 것이다
-> 나를 추상적으로 표현해보자
const me = {
name: 'jeein',
age: '10',
height: '200',
toDoList: function () {
console.log('Do It!');
},
checkList: function (study) {
study.levelUp();
},
};
const up = {
level: 1,
levelUp: function () {
this.level++;
},
};
console.log(me.checkList(up));
console.log(up); // 호출 될때 마다 level: 2 -> level: 3... 1씩 늘어난다
이처럼 me 객체와 up 객체가 다르지만
서로 다른 객체가 소통하여 같은 프로퍼티와 메서드를 공유 할수있다
👉 하지만 객체는 한번 생성하면 끝난다
반복적으로 객체를 만들수 밖에 없는데 좀 더 효율적으로 만들어보자
여기서 반드시 알아야 하는 개념인 생성자 함수를 알아보자
생성자 함수는 객체를 만들 때 new 연산자와 함께 사용하는 함수이다
❓ 도대체 생성자 함수를 통해 왜 만들어야 하는가?
생성자를 통해 생성된 객체는 같은 프로퍼티와 메서드를 공유할 수 있다는 것
function Factory() {}
let result1 = Factory(); // undefined
let result2 = new Factory(); // Factory {}
result1은 Factory 함수를 실행시켜주어 return 값이 없기 때문에 undefined 출력,
result2는 new 키워드를 붙여 새로운 Factory{} 함수를 생성, 반환 했다
-> 이것을 ✨ 인스턴스(instance) 라고 불린다
result2 instanceof Factory; // true
result1 instanceof Factory; // false
// result1는 Factory 반환일뿐 인스턴스는 아니기때문
✅✨
- 생성자 함수 앞에 new 연산자가 사용되면 함수안의 this는 생성자가 만들어낸 객
체 즉, 인스턴스를 참조
- this가 sayHi를 sayHi2를 sayHi3를 ... 이런식으로 대상이 바뀌면서 가르키게 된다
- sayHi,sayHi2 변수는 NewFactory의 인스턴스 이다!
function NewFactory(name) {
this.name = name; // this - window, NewFactory는 전역공간에 있기 때문
this.sayYourName = function () { // 마찬가지로 this - window
console.log(`나의 이름은 ${this.name}입니다 만나서 반가워요😉`);
};
}
const sayHi = new NewFactory('지인');
console.log(sayHi.name); // 지인
console.log(sayHi.sayYourName()); // 나의 이름은 지인입니다 만나서 반가워요😉
const sayHi2 = new NewFactory('김코드');
console.log(sayHi2.name); // 김코드
하지만 이렇듯 객체를 생성할때 마다 새로운 함수를 만들어야 한다
프로토 타입을 사용하여 효율적으로 객체를 생성해보자
프로토타입(prototype)은 특정 객체에 대한 참조이다
__proto__
프로퍼티는 자신을 만든 생성자 함수의 prototype을 참조하는 역할.
즉, new 키워드를 통해 생성자 함수의 prototype과 인스턴스의 __proto__
가 연결된다
👉 음식 메뉴를 랜덤으로 뽑아내는 기능을 가진 객체의 생성자를 만들어 콘솔로 출력해보자
function FoodPicker(foodNames) {
this.name = foodNames;
// this가 인스턴스를 가르키게 되어 name 이라는 프로퍼티를 가지게 된다
this.sayMenu = function () {
console.log(
`오늘의 메뉴는 ${
this.name[Math.floor(Math.random() * this.name.length)]
// 배열의 갯수를 곱함
} 입니다`
); // this.name은 foodNames이기 때문에 []로 접근한다.
};
}
const robot1 = new FoodPicker(['짜장면', '청국장', '김치찌개']);
// 인스턴스가 새로 생길때마다 새로운 함수가 생겨난다
const robot2 = new FoodPicker(['짜장면', '청국장', '김치찌개']);
robot1.sayMenu(); // 오늘의 메뉴는 김치찌개 입니다
robot1.sayMenu(); // 오늘의 메뉴는 짜장면 입니다
robot1 == robot2 -> // false // 같지 않다
robot1을 만든 생성자 함수는 FoodPicker 이기때문에
{constructor: ƒ} === FoodPicker.prototype 은 true 가 된다
✨✅ prototype는 함수에 있고 프로토 프로퍼티
__proto__
는 인스턴스에 있다
생성자함수랑 같이 호출되면 this랑 인스턴스를 연결된다