Js 객체

prototype 기반의 언어

JS는 prototype 기반의 객체지향 언어입니다.
Class 기반의 객체지향 언어는 class를 정의하고 이를 통해 객체를 생성합니다.
prototype 기반의 객체지향 언어는 class 정의 없이도 객체를 생성할 수 있습니다.
JS는 Class가 없어도 클로저를 통해 캡슐화가 가능하고, prototype을 통해 상속이 가능합니다.
(ES6부터 Class키워드가 추가되었습니다.)

Prototype

JS의 모든 객체는 부모를 갖고 있고, 부모와 연결되어 있습니다.
이로 인해 객체지향 프로그래밍의 상속 개념과 같이 부모의 프로퍼티, 메서드를 물려받아 사용할 수 있습니다.
JS에서 거의 모든 객체는 Object의 인스턴스입니다. 일반적인 객체는 Object.prototype에서 속성과 메서드를 상속받으며, 그 일부는 숨겨질 수 있습니다.
모든 프로토타입 체인의 끝은 항상 Object.prototype입니다.

Prototype Property

• __proto__
  • 모든 객체가 가지고 있는 속성
  • 부모의 prototype 프로퍼티에 대한 정보 참조
• prototype
  • 함수 객체만이 가지는 프로토타입
  • 자신의 prototype 객체

객체 생성 방법

리터럴

가장 일반적인 방법은 중괄호{ } 를 사용하여 객체를 생성하는 방법입니다.

var menu = {
  name : "pizza",
  price : "10000"
}

위와 같이 정의한 menu는 name, price 프로퍼티를 갖는 객체입니다.

Object() 생성자 함수

new 키워드를 이용하여 Object 생성자 함수를 호출하면 비어있는 객체를 얻을 수 있습니다.

var menu = new Object();
console.log (menu.name)
console.log (menu.price)

menu.name = "pizza";
menu.price = "10000";
console.log (menu.name)
console.log (menu.price)

new Object()를 호출하면 비어있는 객체를 생성합니다.
따라서 new Object()로 비어있는 객체를 생성했으면 프로퍼티를 추가해줘야 합니다.

생성자 함수

기존 함수에 new 연산자를 붙여서 호출하면, 해당 함수는 생성자 함수로 동작합니다.
이 때, 생성자 함수의 첫 문자는 대문자로 표기해야 합니다.

function Menu(name,price) {
  this.name = "pizza";
  this.price = "10000"
}
  
 var menu1 = new Menu("salad", "5000");
 var menu2 = new Menu("pasta", "7000");

console.log(menu1.name + "은" + menu1.price + "원 입니다.");
console.log(menu2.name + "은" + menu2.price + "원 입니다.");

생성자 함수를 통해 객체를 생성하면 같은 속성을 가진 객체를 여러 개 생성할 수 있습니다. (Instantiation)
또한 생성자 함수에서 정의한 this는 생성자 함수로 생성된 인스턴스가 됩니다.