[EST] 240719 JavaScript-11

객체지향 프로그래밍

객체지향 프로그래밍이란?

객체지향

- 프로그래밍 방법론 중 하나

- 프로그램을 작성할 때 객체들을 만들어 서로 소통하도록하는 방법

 

객체

- 자바스크립트 객체: 키, 값 쌍으로 이루어진 데이터의 묶음

- 객체 지향의 객체: 우리가 표현하고자 하는 구체적인 사물을 추상적으로 표현한 것

const me = {
  name: 뽀로로,
  address: '제주도 제주시 성산일출봉',
  phoneNum: '010-1234-1234',
  canWalk: function() {
    console.log('뽀로로가 걷는다.');
  }
}

- 뽀로로를 객체로 표현

- 객체는 행동과 상태를 가짐

- 행동은 메소드, 상태는 프로퍼티

 

const me = {
  name: '뽀로로',
  address: '제주도 제주시 성산일출봉',
  phoneNum: '010-1234-1234',
  canWalk: function() {
    console.log('뽀로로가 걷는다.');
  },
  teaching: function(pengsoo) {
    pengsoo.levelUp();
  }
}

- 새로운 능력을 부여하기

 

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

- 새로운 객체 만들기

 

me.teaching(rabbit);

- 새로운 능력 부여하기

 

객체지향 프로그래밍

-> 객체와 객체가 서로 메소드를 통해 상호작용하게 하는 것

 

생성자 (constructor)

= 객체를 만들 때 new 연산자와 함께 사용하는 함수

let myArr = new Array(1,2,3);

-> 내정 생성자

 

생성자 사용이유

- 생성자를 통해 생성된 객체는 같은 프로퍼티와 메서드를 공유할 수 있음

let myArr = new Array(1,2,3);
let myArr2 = new Array(4,5,6);

myArr2.length
myArr.length

myArr.forEach(item=>{
    console.log(item);
})

myArr2.forEach(item => {
    console.log(item);
})

 

커스텀 생성자 만들기

- 생성자는 함수

- 네이밍 규칙: 대문자로 시작하는 이름을 가짐

- 필요할 때 사용할 수 있는 우리만의 객체를 만들어서 사용할 수 있도록 도와주는 것이 생성자

function Robot() {}

 

- new 키워드를 통해 객체를 생성

function Robot() {
  let 옵티머스프라임 = new Robot();
}

- Factory 생성자 함수는 return값을 따로 가지지 않음

- new 키워드가 앞에 붙게 되면 실행되었을 때 자동적으로 객체를 생성하고 반환

- new 키워드를 붙여 객체를 생성하고 반환되어 만들어진 객체를 인스턴스(instance)라 부름

- 생성자 함수과 객체의 관계는 instanceof으로 확인

옵티머스프라임 instanceof Robot

 

function Robot(name) {
  this.name = name;
  this.sayYourName = function() {
    console.log(`안녕하세요. 제 이름은 ${this.name}입니다. 반가워요.`);
  }
}

- 생성자 함수 앞에 new 연산자가 사용되면 함수 안의 this는 생성자가 만들어낸 객체, 인스턴스를 참조함

 

let robot1 = new Robot('브랜든');

- 객체 (인스턴스)를 생성

 

프로토타입

- 객체를 손쉽게 생산 가능하지만, 객체의 메서드를 등록할 때마다 새로운 함수를 생성하는 것에 대한 번거로움을 해결하기 위해 등장

- 특정 객체에 대한 참조 -> 어떠한 공간을 가리킴

- 모든 인스턴스가 하나의 메서드를 공유하도록 만들어 자원을 더 효율적으로 사용하도록 도와줌

- 생성된 객체끼리 메서드를 비교하여 같은 곳을 참조하는지 살펴봐야 함

 

* 프로토타입 자세히 공부한 후 다시 수정예정