프로토타입

hoonnotes

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

객체란 요소의 상태와 메소드로 구현

객체지향은 여러개의 객체가 각각의 목적에 의해 존재

서로 상호소통을 하여 하나의 어플리케이션 구성

실제 세상에 존재하는 요소들과 비슷하게 구현

객체 중심 패러다임

객체지향을 모르는 사람의 코드

const cookie = { name: "Chocolate Cookie", price: 2800 }
const milk = { name: "Skim Milk", price: 3200 }

const basket = []
basket.push(cookie);
basket.push(cookie);
basket.push(cookie);
basket.push(milk);
basket.push(milk);

const totalPrice = basket
	.map(product => product.price)
	.reduce((prev, cur) => prev + cur, 0)

객체 중심 패러다임

객체지향을 조금 맛본 사람의 코드

const cookie = { name: "Chocolate Cookie", price: 2800 }
const milk = { name: "Skim Milk", price: 3200 }

const basket = new Basket();

basket.addProduct(cookie, 3);
basket.addProduct(milk, 2)
basket.getShoppingInfo();

객체 중심 패러다임

잘 적용된 객체지향 프로그래밍은

문장을 읽듯이 읽어 내려갈 수 있다!

 

클래스를 템플릿으로!

클래스란? 

 

객체의 모양을 설정해주는  템플릿

클래스로 생성된 객체 = 인스턴스

클래스로 객체를 생성하는 작업 = instantiate

 

클래스를 템플릿으로!

function Product(_name, _price) {
  const name = _name;
  const price = _price;
  
  this.getName = function () {
    return name;
  }

  this.getPrice = function() {
    return price;
  }
}

function Basket() {
  const products = []
  
  this.addProducts = function(product, amount) {
    products.push(...Array(amount).fill(product))
  }

  this.calculateTotal = function() {
    return products
      .map(product => product.getPrice())
      .reduce((a, b) => a + b, 0);
  }

  this.getShoppingInfo = function() {
    console.log('총 결제 금액입니다: ' + this.calculateTotal());
  }
}

encapsulation

const milk = new Product("Skim Milk", 3200)
const cookie = new Product("Chocolate Cookie", 2800)

const basket = new Basket() 

cookie.price = 500;
milk.price = 300;

basket.addProduct(cookie, 3)
basket.addProduct(milk, 2);

inheritance

 

  • 클래스의 확장
  • 기존에 구현된 기능에 새로운 기능 추가

inheritance

function Book(_name, _price, _author) {
  Product.call(this, _name, _price);
  const author = _author;
  
  this.getAuthor = function() {
    return author;
  }
}

const faust = new Book('faust', 12.5, 'Goethe');
basket.addProduct(1, faust);

상속과 프로토타입

자바스크립트에는 class가 없다 !?

생성자 함수 ~== 다른 언어의 class

따라서 상속 비슷하게 동작하게

하기 위해 프로토타입 사용!

상속과 프로토타입

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.getPersonalInfo = function() {
    return `${this.name} 은 ${this.age} 살 입니다.`
  }
}

const hoon = new Person("Hoon", 31);
const jimmy = new Person("Jimmy", 28); 

console.log(hoon.getPersonalInfo === jimmy.getPersonalInfo) // false

상속과 프로토타입

Person 생성자 함수

hoon

jimmy

name

hoon

name

jimmy

getPerson..

function

getPerson..

function

동일한 프로퍼티가 중복 생성 !

상속과 프로토타입

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.getPersonalInfo = function() {
  return `${this.name} 은 ${this.age} 살 입니다.`
}


const hoon = new Person("Hoon", 31);
const jimmy = new Person("Jimmy", 28); 

console.log(hoon.getPersonalInfo === jimmy.getPersonalInfo) // true

상속과 프로토타입

Person 생성자 함수

hoon

jimmy

name

hoon

name

jimmy

Person.prototype

getPerson..

function

prototype

상속

09. 객체지향

By hoonnotes

Made with Slides.com

09. 객체지향

  • 62

More from hoonnotes