[JavaScript] 객체지향문법 - constructor와 prototype 그리고 class에 대한 이해

Constructor

비슷한 object를 쉽게 찍어낼수 있는 문법

constructor안에서 쓰이는 this는 새로생성되는 object를 뜻함

상속(inheritance)이라함

 

- this : 기계에서 새로 생성되는 object (instance)

- 기계 : object생성기(constructor, 생성자)

//var 학생1 = { name : 'Kim', age : 15 };

function 기계(이름,나이){
  this.name = 이름;
  this.age = 나이;
  this.sayHi = function() {
     console.log('안녕하세요'+ this.name +'입니다')
    }
}

var 학생1 = new 기계('park',13); //기계 {name: 'park', age: 13, sayHi: ƒ}
var 학생2 = new 기계('ho',12); //기계 {name: 'ho', age: 12, sayHi: ƒ}

학생1.sayHi() // 안녕하세요Kim입니다

case)쇼핑몰에 쓸 상품데이터 오브젝트가 여러개 필요하다면? 그리고 상품마다 부가세()라는 내부함수를 실행해서 부가세금액을 출력하고싶다면?

var product1 = { name : 'shirts', price : 50000 };
var product2 = { name : 'pants', price : 60000 };

function 기계(상품명, 가격){
  this.name = 상품명;
  this.price = 가격;
  this.부가세 = function() {
  console.log(this.price * 0.1)
  }
}

var product1 = new 기계('shirt',50000); // 기계 {name: 'shirt', price: 50000, 부가세: ƒ}
var product2 = new 기계('pants',60000); // 기계 {name: 'pants', price: 60000, 부가세: ƒ}

product1.부가세() // 5000

---

Prototype

유전자, 원형이라 이해하면됨

function 기계(){
  this.name = 'Kim';
  this.age = 15;
}

기계.prototype.gender = '남';

var 학생1 = new 기계(); // 기계 {name: 'Kim', age: 15} gender라는 키값이 존재하지 않지만
var 학생2 = new 기계();

console.log(학생1.gender); //'남'이 출력됩니다

 

자바스크립트원리

- step1)학생1이 직접 gender를 가지고 있는가?

- step2)학생1에 없다면 부모유전자에 gender가 있는가? 

- step2)부모의 부모유전자에는 있는가?

순서로 실행함 (내장함수가 작동되는 원리와 같음)

 

function 기계(이름,나이) {
 this.name = 이름;
 this.age = 나이;
 this.sayHi = function(){
 console.log('안녕 나는' +this.name+'이야')
 }
}

var 학생1 = new 기계('kim', 20) //안녕 나는Kim이야
var 학생2 = new 기계('Park', 21) //안녕 나는Park이야
var 학생3 = new 기계('Lee', 22) //안녕 나는Lee이야





function Parent(){
  this.name = 'Kim';
}
var a = new Parent();

a.__proto__.name = 'Park';
console.log(a.name) // kim






function Student(이름, 나이){
  this.name = 이름;
  this.age = 나이;
}

Student.prototype.sayHi = () => {
    console.log('안녕 나는 ' + this.name + '이야');
  }
var 학생1 = new Student('Kim', 20);

학생1.sayHi(); //이코드로 타이핑할경우 name이 안나옴 화살표함수는 this를 외부에서 가져옴






var arr = [1,2,3];
arr.remove3();

console.log(arr); //[1,2]


//아래 코드에서의 this라는 키워드는 현재 remove3이라는 함수를 작동시키는 object (여기서는 array) 라는 뜻
Array.prototype.remove3 = function(){
  for (var i = 0; i < this.length; i++) {
    if ( this[i] === 3 ) {
      this.splice(i,1);
    }
  }
};

var arr = [1,2,3,4];
arr.remove3();

console.log(arr); //[1,2,4]

---

ES6 class 키워드로 구현하는 constructor

상속가능한 함수를 추가하는방법

1. 함수를 this.sayHi 이렇게 constructor 안에 추가 (자식이 직접함수를 가짐)

2. prototype에 추가 (부모 prototype에 추가)

//1번
class 부모 {
  constructor(){
    this.name = 'Kim';
    this.sayHi = function(){ console.log('hello') }
  }
}

var 자식 = new 부모();

//2번
class 부모 {
  constructor(){
    this.name = 'Kim';
  }
  sayHi(){ 
    console.log('hello') 
  }
}

var 자식 = new 부모();

 

Object.getPrototypeOf()

자식.__proto__;
Object.getPrototypeOf(자식); // 부모의prototype을 출력

---

class를 상속한 class를 만들고 싶을 때 쓰는 extends / super

class 할아버지{
  constructor(name, name2){
    this.성 = 'Kim';
    this.이름 = name;
    this.가명 = name2;
  }
}


class 아버지 extends 할아버지{
	constructor(name){
    super(name)
    this.나이 = 50}
}

var 아버지1 =new 아버지('멍','빙'); //{성: 'Kim', 이름: '멍', 가명: undefined, 나이: 50}

 

 

 할아버지라는 class를 그대로 복붙한 아버지라는 class가 생성 

class 아버지 extends 할아버지{
	constructor(name){
    super(name)
    this.나이 = 50
    }
}

var 아버지1 =new 아버지(); //{성: 'Kim', 이름: undefined, 나이: 50}
var 아버지1 =new 아버지('부왁'); //{성: 'Kim', 이름: '부왁', 나이: 50}

extends 해서 만든 class에는 this그냥은 못쓰고 super()다음에 써야함

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
  sayHi(){
    console.log('안녕 나는 할아버지')
  }
}

class 아버지 extends 할아버지{
  constructor(name){
    super(name); // 부모 class의 constructor를 의미
    this.나이 = 50;
  }
  sayHi2(){
    console.log('안녕 나는 아버지');
    super.sayHi(); //안녕 나는 할아버지 (부모 class의 prototype을 의미)
  }
}

var a = new 아버지('만수');
a.sayHi2(); // 안녕나는아버지 안녕나는할아버지

함수를 만들어서 object데이터를 다루는 이유

- object 안의 데이터가 복잡할때 편리함

- 내부에 있는 변수를 건드리지 않아서 실수방지

 

class에서 사용하는 get/set

class 안에서 함수 만들 때 get/set 키워드를 이용해서 getter/setter 식으로 함수를 만들 수 있음

- get : 데이터를 뽑아주는, 가져와주는, get 해주는 함수( 파라미터가 꼭 존재해야함)

- set : 데이터를 입력해주는, 수정해주는, set 해주는 함수 (파라미터가 있으면 안됨)

class 사람 {
  constructor(){
    this.name = 'Park';
    this.age = 20;
  }
  get nextAge(){
    return this.age + 1
  }
  set setAge(나이){
    this.age = 나이;
  }
}

var 사람1 = new 사람();

사람1.nextAge; // 21
사람1.setAge = 50; // 50

case) Class 구조

//강아지 오브젝트 뽑아내는 함수
class Dog{
	constructor(타입,색상){
	this.type = 타입;
    this.color = 색상;
	}
}

var 강아지1 = new Dog('말티즈','white');


//강아지 함수를 이어받아 나이를 추가하는 함수
class Cat extends Dog{
 constructor(타입,색상,나이){
	super(타입,색상)
   	this.age = 나이;
 }
}

var 고양이1 = new Cat('동네고양이', 'white', 5)


//한살먹기라는 함수를 입력했을때 부모는 에러로 자식은 나이가 증가하는 코드
class Dog {
  constructor(타입, 칼라){
    this.type = 타입;
    this.color = 칼라;
  }
  한살먹기(){
    if( this instanceof Cat) {
    this.age++
    }
  }
}

class Cat extends Dog {
  constructor(타입, 칼라, 나이){
    super(타입, 칼라);
    this.age = 나이;
  }
}