[JS] 객체지향 (Constructor, Prototype)

 

 

 

 

---

 

 Prototype ?

 

 

   : Javascript는 흔히 프로토타입 기반언어(prototype-based language)라 불린다.

   모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로 프로토타입 객체(prototype object)를 가진다.

 

   프로토타입 객체는 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수있고 그 상위 프로토타입도 마찬가지이다.

   이를 프로토타입 체인 (prototype chain)이라 부르며,

   한 객체에 정의된 메소드와 속성을  다른 객체에서 사용할 수 있도록하는 근간이다.

 

 

 

 

 

 

 

 

---

Javascript의 자료형

 

 

 

  1. Primitive data type : 자료 자체가 변수에 저장되는 자료들 (문자, 숫자 자료형)

let name = 'kim';
let age = 30;

 

 2. Reference data type : 자료를 변수에 직접 저장하는게 아닌, reference를 저장 (object, array)

let 사람 = { name : 'kim' }

//변수에 저장된 것은 {name:'kim'}이 아닌 이 값을 가리키는 화살표가 저장되었다.

 

 

 

 

 > Reference data가 primitive data랑 다른 점

    : 복사했을 때 reference가 저장된다.

//primitive 자료형
let name1 = 'kim';
let name2 = name1;
name1 = 'park';

console.log(name1) 
// park 출력
console.log(name2)
// kim 출력

//reference data type
var 이름1 = { name : '김' };
var 이름2 = 이름1;
이름1.name = '박';

//둘다 출력하면 {name:'박'}이 출력

var 이름2 = 이름1 은 '이름1'이 복사된 것이 아니라 reference (화살표)가 저장되서 즉, 이름1의 화살표가 이름2에 복사된것!

 

 

 

ex)

var 이름1 = { name : '김' };
var 이름2 = { name : '김' };

  이름1 == 이름2 를 하면 결과는?

false

> 이름1과 이름2에 저장된것은 데이터가 아니라 화살표!

 각각 화살표 1개씩 저장된 것이므로 다른값이다.

 

ex2) 

var 이름1 = { name : '김' };

function 변경(obj){
  obj = { name : 'park' };
}

변경(이름1);

변경(이름1)을 하면 결과는?

이름1은 그대로 { name : '김' } 을 가진다.

obj 이라는 변수는 obj = { name : 'park' } 이라는 화살표를 재할당 한 것이지 실제 이름1이라는 변수는 건드리지 않고 있으므로, 

이름1은 변하지 않는다.

 

 

 

---

 

 

 

 

Constructor

 

: object 생성자 = 생성자 함수

 

 

object는 그냥 변수에 할당하면 reference를 공유하므로 constructor로 복사해야한다.

= constructor가 가진 속성들을 물려받아서 object를 하나 새로 만드는것을 상속(inheritance) 이라고 한다.

 

//이런 object를 여러개 만들고싶다면?
var 학생1 = { name : 'Kim', age : 15 };
var 학생2 = { name : 'Park', age : 15 };

 

 

 

function 만들고 this를 이용하여 만든다.

this는 새로생성되는 object를 뜻하고 이것을 'instance'라고 한다.

 

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

let 사람1 = new constructorName("kim", 15);
console.log(사람1);
// 출력 {name : 'kim', age : 15 }

 

new 라는 키워드를 쓰고 constructorName을 쓰면 새로운 object를 생성할 수 있다.

이것을 변수에 저장하면 자유롭게 오브젝트 뽑아 쓸 수 있다.

 

 

 

object에 함수 추가

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

let 사람1 = new 기계("kim", 15);
console.log(사람1.sayHi());
// 출력 : 안녕하세요. kim 입니다.

 

 

 

 

 

 

 

---

 

Prototype

 

 

 : Javascript에서는 객체를 상속하기 위하여 prototype이라는 방식을 사용한다.

   javascript에서 자신을 만들어낸 객체의 원형을 뜻한다. ( '유전자'라고 생각 )

 

 

: prototype은 constructor 함수에 생성된다. 

  일반 obeject, array에는 없으므로 상속하고 싶으면 consturctor함수, Object.create(), Class 중 하나 만든다.

  

 

 

function con() {
  this.name = "kim";
  this.age = 15;
}

let student = new con();

console.log(con.prototype)

 

console에 출력 / 부모의 prototype

 

 

Object.prototype.(key) = (value)

생성자에 생성된 키값은 자식객체에서도 사용가능하다.

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

 

function con() {
  this.name = "kim";
  this.age = 15;
}
con.prototype.gender = "male";
let student = new con();

console.log(student.gender);
// 출력 : male

 

 

 

 

🤷🏻‍♀️ 왜 부모꺼 자유롭게 쓸수있음 ?

    : prototype Chain (위임)

     프로토타입 체인에서 한객체의 메소드와 속성이 다른객체로 복사되는 것이아니라 체인을 타고 올라가서 접근하는것!

 

:   javascript는 object에서 값을 출력할 때 확인순서가 있다.

1. 해당 object에 값이 있나?

2. 없으면 부모한테 있나?

3. 또 없으면 부모의 부모 ( ..반복..) 에 있나?

 

  때문에 위의 예제에서 student는 gender라는 값이 없지만, 부모의 con.prototype에 있는 gender값이 출력되었다.

 

 

 

 

 

 

🤷🏻‍♀️ 내장함수의 원리 ?

 

  :  javascript의 array, object 내장함수 사용 원리도 같다.

     우리가 array를 만들 때 [ ] 대괄호안에 간단하게 넣어서 만드는 것이,

     new Array랑 같은 의미이다.

 

var arr = [1,2,3];
var arr = new Array(1,2,3);

console.log(Array.prototype);

 

Array.prototype을 해보면 평소에쓰던 sort, map 등의 함수들이 다 나온다.

Array나 object 자료형도 똑같이 new Object() 이런식으로 만들어주어서, 부모의 prototype에 있던 함수들을 사용가능하다.

 

 

 

 

🔻 prototype으로 상속하는거랑 constructor로 상속시키는것의 차이는 ?

 

  : 자식들이 값을 직접 소유하게 만들고 싶으면 constructor

    부모만 가지고 있고 참조해서 쓰게 만들고 싶으면 prototype

 

 

---

 

 

 

Prototype 특징 : __proto__

 

 

 

🔻 부모를 찾고싶으면 __proto__를 출력한다.

   : 자식 object에는 __proto__라는 속성이 있다. 부모의 prototype과 같은 의미이다.

function con() {
  this.name = "kim";
}

let student = new con();

console.log(student.__proto__);

출력

 

 

 

🔻   어떤 object에다가 __proto__를 강제로 설정하면 상속강제로 가능하다.

let 부모 = { name: "kim" };
let 자식 = {};

자식.__proto__ = 부모;
console.log(자식.name);
// 출력 : kim

 

 

 

 

🔻 Javascript는 모든게 다 Object

function con() {
  this.name = "Kim";
}
con.prototype.gender = "남";

var student = new con();
console.log(student);

 

자식(student)를 출력해보면 부모(con)의 prototype : object까지 나온다.

탐색해보면 모든 object 자료형의 조상은 Object( ) 이며 ( = Object.prototype )

모든 array 자료형의 조상도 Object( ) 이다.

 

따라서 자바스크립트는 모든게 다 Object라고 말한다.