let user = {
  name: "marvel",
  age: 27,
};

console.log(user.name);                    // marvel
console.log(user.hasOwnProperty("email")); // false

hasOwnProperty 는 어디서 나왔나요 ?

현재 user 객체 변수에는 두 개의 속성(name, age)만 있는데 hasOwnProperty는 어디서 나온 것일까요?

모든 객체는 global Object prototype을 가진다.

그러면 이 Prototype 은 무엇인가요 ?

프로토타입은 자바스크립트 객체가 다른 객체로부터 메서드와 속성을 상속받는 메커니즘을 말합니다. 이것을 **프로토타입 체인(prototype chain)**이라고도 말합니다. 위에서 보듯이 prototype object 안에 있는 hasOwnProperty 를 상속받아서 사용하고 있습니다.  이렇게 하므로 인해서 더 적은 메모리를 사용할 수가 있고 코드를 재사용 할수 있습니다.

예를 통해 prototype 알아보기

function Person(name, email, birthday) {
  this.name = name;
  this.email = email;
  this.birthday = new Date(birthday);

  this.calculateAge = function () {
    const diff = Date.now() - this.birthday.getTime();
    const ageDate = new Date(diff);

    return Math.abs(ageDate.getUTCFullYear() - 1970);
  };
}

const marvel = new Person("marvel", "[email protected]", "11/25/1997");
const windfall = new Person("windfall", "[email protected]", "11/12/1982");

console.log(marvel);
console.log(windfall);

// Person Constructor
function Person(name, email, birthday) {
  this.name = name;
  this.email = email;
  this.birthday = new Date(birthday);
}

Person.prototype.calculateAge = function () {
  const diff = Date.now() - this.birthday.getTime();
  const ageDate = new Date(diff);

  return Math.abs(ageDate.getUTCFullYear() - 1970);
};

const marvel = new Person("marvel", "[email protected]", "11/25/1997");
const windfall = new Person("windfall", "[email protected]", "11/12/1982");

console.log(marvel);
console.log(windfall);

<aside> 💡 Object.create()을 이용해서도 객체의 propotype을 지정해줄 수 있습니다.

</aside>

Object.create()

메서드는 지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 만듭니다.

function Person(name, email, birthday) {
  let person = Object.create(personPrototype);
  person.name = name;
  person.email = email;
  person.birthday = new Date(birthday);

  return person;
}

const personPrototype = {
  calculateAge() {
    const diff = Date.now() - this.birthday.getTime();
    const ageDate = new Date(diff);

    return Math.abs(ageDate.getUTCFullYear() - 1970);
  },
};

const marvel = new Person("marvel", "[email protected]", "11/25/1997");
const windfall = new Person("windfall", "[email protected]", "11/12/1982");

console.log(marvel);
console.log(windfall);