Constructor Pattern

📌 목차

• Object Creation
• Constructor in es5 fucntion
• Constructor in prototype
• Constructor in Class

📌 Object Creation

빈 Object를 생성하는 3가지 방법

// 1.
const object1 = {};
// 2.
const object2 = Object.create(Object.prototype);
// 3.
const object3 = new Object();

Object에 key와 value를 할당하는 4가지 방법

• Dot Syntax

  newObject.key = "value";

• Square Syntax

  newObject["key"] = "value";

• Object.defineProperty Syntax

  Object.defineProperty(newObject, "key", {
    value: "value",
      writable: true,
      enumerable: true,
      configuarable: true,
  });

• Object.defineProperties Syntax

  Object.defineProperties(newObject, {
    key: {
        value: "value",
          writable: true,
          enumerable: true,
          configuarable: true,
    }
  });

🚨여기서 잠깐!

writable, enumerable, configuarable은 무엇일까요?

writable: true일 경우 이 속성에 설전된 값을 할당 연산자로 수정할 수 있다.
enumerable: true일 경우 해당 객체의 속성을 열거할 때 이 속성이 열거된다.
configurable: true일 경우 이 속성 서술자의 형태를 변경하거나, 속성을 해당 객체에서 삭제할 수 있다.

// newObject의 형태
const newObject = { key: "value" };

// enumberable이 false 일때:
console.log(newObject); // output: {}

// writable이 false 일때:
newObject.key = "hello";
console.log(newObject); // output: { key: "value" }

// configuarable이 false 일때:
delete newObject.key;
console.log(newObject); // output: { key: "value" }

Object 상속

// function that made object inherit
const defineProp = (obj, key, value) => {
    const config = {
        value,
          writable: true,
        enumerable: true,
        configurable: true,
    };
      Object.defineProperty(obj, key, config);
}

const person = Object.create(Object.prototype);
defineProp(person, "car", "BMW");
defineProp(person, "name", "Eddie");
defineProp(person, "age", 20);

console.log(person); // { car: 'BMW', name: 'Eddie', age: 20 }

const driver = Object.create(person);
defineProp(driver, "topSpeed", "100mh");
console.log(driver); // { topSpeed: '100mh' }
console.log(driver.car); // BMW

delete person.car;
console.log(person); // { name: 'Eddie', age: 20 }
console.log(driver.car); // undefined

📌 Constructor in es5 function

es5에서는 class가 존재하지 않았기때문에 다음과 같이 작성을 하였었습니다.

// es5
function Car(model, year, miles) {
  this.model = model;
  this.year = year;
  this.miles = miles;

  this.toString = function () {
    return `${this.model} has done ${this.miles} miles.`;
  };
}

const car = new Car("BMW", 2013, 1000);
console.log(car.toString()); // BMW has done 1000 miles.

하지만 이방법은 toString()이 매번 새롭게 정의가 된다는 점입니다. 그래서 prototype을 사용하여 해결을 할수 있습니다.

📌 Constructor in prototype

function Car(model, year, miles) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}

Car.prototype.toString = function () {
  return `${this.model} has done ${this.miles} miles`;
};

const car = new Car("BMW", 2013, 10000);
console.log(car.toString()); // BMW has done 10000 miles

📌 Constructor in Class

es6에서 class를 사용하면 어떻게 될까요?

class Car {
  constructor(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
  }

  toString() {
    return `${this.model} has done ${this.miles} miles.`;
  }
}

const car = new Car("BMW", 2013, 1000);
console.log(car.toString()); // BMW has done 1000 miles.