[JS][ES6] 객체

class를 통한 객체 생성

function Health(name){
  this.name = name;
}

Health.prototype.showHealth = function(){
  console.log(this.name + "님 안녕하세요");
}

const h = new Health("crong");
h.showHealth();
>> "crong님 안녕하세요"

javascript에는 class가 없지만 다음과 같이 prototype을 이용해 비슷한 구조를 만들 수 있다.

class Health {
  constructor(name, lastTime){
    this.name = name;
    this.lastTime = lastTime;
  }

  showHealth(){
    console.log("안녕하세요 "+ this.name);
  }
}

const myHealth = new Health("crong");
myHealth.showHealth();
>> "안녕하세요 crong"

ES6부터 생긴 class- constructor를 이용해 class를 생성할 수 있으나 사실 함수 자료형으로 인식을 하기 때문에 겉모습만 class를 흉내냈을 뿐 이전 코드와 같다. 하지만 가독성에 도움이 된다.

---

Object assign으로 JS 객체 만들기

const healthObj = {
  showHealth : function(){
    console.log ("오늘의 운동시간: "+ this.healthTime);
  }
}

const myHealth = Object.create(healthObj);

myHealth.healthTime = "11:20";
myHealth.name = "crong";

기존 방식

const healthObj = {
  showHealth : function(){
    console.log ("오늘의 운동시간: "+ this.healthTime);
  }
}

const myHealth = Object.assign(Object.create(healthObj), {
  name: "crong",
  lastTime: "11:20"
});

새로운 방식

---

Object assign으로 Immutable 객체만들기

const healthObj = {
  showHealth : function(){
    console.log ("오늘의 운동시간: "+ this.healthTime);
  }
}

const previousObj = {
  name: "crong",
  lastTime: "11:20"
}

const myHealth = Object.assign({},previousObj,{
  "name": "honux",
  "age": 99
});

console.log(previousObj, myHealth);
console.log(previousObj === myHealth);

>>
[object Object] {
  lastTime: "11:20",
  name: "crong"
}
[object Object] {
  age: 99,
  lastTime: "11:20",
  name: "honux"
}
false

기존 객체를 assign 메소드를 통해 복제해 사용하면 달라진 부분의 내용만 바꾸어 사용할 수 있고, 이 둘이 아예 다른 객체가 됨을 확인할 수 있다.

---

Object setPrototypeOf로 객체만들기

const healthObj = {
  showHealth : function(){
    console.log ("오늘의 운동시간: "+ this.healthTime);
  },
  setHealth: function(newTime){
  this.healthTime = newTime;
  }
}

const myHealth = {
  name: "crong",
  lastTime: "11:20"
};

Object.setPrototypeOf(myHealth, healthObj);

console.log("myhealth is", myHealth);

>>
"myhealth is"
[object Object] {
  lastTime: "11:20",
  name: "crong",
  setHealth: function(newTime){
  this.healthTime = newTime;
  },
  showHealth: function(){
    window.runnerWindow.proxyConsole.log ("오늘의 운동시간: "+ this.healthTime);
  }
}

Object setPrototypeOf 로 객체간 prototype chain생성하기

//parent
const healthObj = {
  showHealth : function(){
    console.log ("오늘의 운동시간: "+ this.healthTime);
  },
  setHealth: function(newTime){
  this.healthTime = newTime;
  }
}

//child obj
const healthChildObj = {
  getAge: function(){
    return this.age;
  }
}

const lastHealthObj = Object.setPrototypeOf(
  healthChildObj, healthObj);

const childObj = Object.setPrototypeOf({
  age: 22
}, healthChildObj);

childObj.setHealth("11:55");
childObj.showHealth();
>> "오늘의 운동시간: 11:55"