자바스크립트 객체

생성자 함수로 객체 만들기

const obj = new User(1, 2);

function User(data1, data2) {
  this.data1 = data1,
  this.data2 = data2,
  this.func = function() {
    this.data1 += 2;
    this.data2 += 2;
    console.log(this.data1, this.data2);
  }
}

obj.func();

생성자 함수는 new 키워드와 함께 사용되며, 생성자 함수를 통해 만들어진 객체를 변수에 할당하는 것을 인스턴스를 생성했다고 한다. 생성자 함수는 보통 파스칼 케이스로 이름을 작성한다.

프로토타입

프로토타입 객체는 한번만 메모리에 등록되어, 여러개의 객체가 프로토타입에 등록된 함수를 참조하게 된다.

const obj = new User();
const obj2 = new User();

function User() {
  this.func = function() {
    console.log("생성");
  }
}

obj.__proto__.func2 = function() {
  console.log("프로토타입");
}

obj.func();
obj.func2();
obj.__proto__.func2();
obj2.func2();

ES6 클래스 문법

다음과 같이 ES6에서 지원하는 클래스 문법으로 객체와 생성자 함수를 다른 방식으로 표현할 수 있다.

const obj = {
  func() {
    console.log("객체!");
  }
}

class Obj2 {
  constructor(data1, data2) {
    this.data1 = data1;
    this.data2 = data2;
  }
}

const obj2 = new Obj2(1,2);

obj.func();
console.log(obj2.data1, obj2.data2);

상속

class Vehicle {
  constructor(nameData) {
    this.name = nameData;
  }
}

class Car extends Vehicle {
  constructor(nameData, wheelData) {
    super(nameData);
    this.wheel = wheelData;
  }
}

const vehicleObj = new Vehicle("탈것");
const carObj = new Car("자동차", "4개");

console.log(vehicleObj);
console.log(carObj);