constructor / prototype / Object.create() / class

object를 확장성있게 사용해보자.

 

constructor

상속

 

constructor 을 생성할 때는 관습적으로 대문자로 짓는다.

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

let human1 = new Human();
let human2 = new Human();

 

function Human(name){
  this.name = name ;
  this.age = 15;
  this.sayHi = function(){
    console.log('안녕하세요' + this.name + ' 입니다');
  }
}
let human1 = new Human('지니');
let human2 = new Human('램프');

human2.sayHi();

 

prototype

원형, 유전자

constructor을 만들면 prototype이 자동이 생김

 

Human.prototype

// {constructor: f}

 

prototype에는 값을 여러개 부여할 수도 있고 심지어 함수도 집어 넣을 수 있음

prototype에 추가된 데이터들은 자식들이 직접 가지는게 아니라 부모만 가지고 있음 

 

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

Human.prototype.gender = '남';
let human1 = new Human();
let human2 = new Human();

console.log(human1.gender); 

//'남'
// human1 을 출력해보면 객체 안에 gender 속성이 없다!

 

내장함수를 쓸 수 있는 이유이기도 함

let arr = [1,2,3];

//이것은

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

//이것과 같다

console.log(Array.prototype);

즉, Array로부터 생성된 자식들은 Array의 prototype에 부여되어있는 함수(메소드), 데이터들을 자유롭게 사용할 수 있음 

sort, push, toString, map, forEach 등 배열에 관한 메소드를 쓸 수 있는 것임

 

 

Q. prototype으로 상속, constructor로 상속의 차이점

A. 자식들이 값을 직접 소유하게 만들고 싶으면 constructor로 상속시키시면 되고

부모만 가지고 있고 그걸 참조해서 쓰게 만들고 싶으면 prototype으로 상속시킨다.

보통은 그래서 상속할 수 있는 함수 같은 것들은 prototype으로 많이 만들어놓습니다. 

 

---

 

1. prototype은 constructor 함수에만 생성됨. human.prototype을 해봤자 undefined 가 나옴.

 

2.  부모 유전자를 찾고 싶다면 __proto__를 같이 써주자

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

let human1 = new Human();

console.log(human1.__proto__);
console.log(Human.prototype);

 3. __proto__를 직접 등록하면 object끼리 상속기능을 구현가능.

let parent = { name : 'Kim' };
let children = {};

children.__proto__ = parent;
console.log(children.name);

//Kim

4. Object.create() 을 사용하면 상속기능을 구현가능.

let parent = { name : 'Kim', age: 50 };
let children = Object.create(parent);

console.log(children.name);

//Kim

children.age = 20;

console.log(children.age);

//20

왜 children age가 50이 아니죠?

 

자바스크립트 오브젝트 자료형에서 특정 자료를 꺼낼 때 children.age를 꺼내주세요 하면 

1. children object가 직접 age를 가지고 있으면 그거 출력

2. 없으면 자식의 부모 prototype을 뒤져서 age가 거기 있으면 그거 출력

3. 거기도 없으면 부모의 부모 prototype을 뒤져서.. 

이런 순서로 age를 출력한다.

 

5. Object.getPrototypeOf(children);

부모의 prototype을 출력한다.

 

---

 

class

class Parent {
	constructor(abc) {
    	this.name = abc;
        this.sayHi = function () {
        	console.log('hello')
        }
    }
    sayHi() {
    	console.log('hello')
    }
}

Parent.prototype.sayHello = function() {~}

let children = new parent(abc);

 

class 에서 함수를 추가하는 방법

1. constructor에 추가한다.

 

2. class 내부에 추가한다.

 - 자식 object를 출력해도 추가가 안 되어있다.

 - 부모의 prototype에 들어 있음

 - 모든 자식이 쓸 수 있는 내장 함수가 생기는 셈

 

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

class Father extends Grandfather{
  constructor(name){
      super(name);
    this.age = 50;
  }
  
      sayHi(){
        console.log('안녕 나는 아버지')
        super.sayHi(); // 부모 프로토타입
  }
}

let Father1 = new Father('찌니');

 

super()

class를 또 상속하게 될 경우, super()을 써준다.

super()는 extends로 상속중인 부모 class의 constructor()를 의미함

 

부모 class의 constructor()에 파라미터가 존재한다면 상속받은 class에도 똑같이 써주어야 부모 class가 가진 모든 속성들을 정확히 상속받을 수 있음