객체 생성, Class

객체 생성

1. 객체 리터럴 방식

var obj = {key1: value1, key2: value2, ...}

위의 방식처럼 변수처럼 객체를 생성하는 방법으로 중괄호 안에 key: value 쌍을 쉼표(,)로 구분하여 만든다.

var duck = {name: "duck", height: 180, age: 26};
console.log(duck);

{ name: 'duck', height: 180, age: 26 }

2. 생성자 방식

[1] new Object()

new 연산자를 통해 Object 객체의 생성자 함수 호출.

var duck = new Object();
duck.name = "duck";
duck.height = 180;
duck.age = 26;
console.log(duck);

{ name: 'duck', height: 180, age: 26 }

[1] 사용자 정의 생성자 + new

사용자가 객체의 생성자를 정의할 수 있다.

var person = function(name, height, age){
  this.name = name;
  this.height = height;
  this.age = age;
}

var duck = new person("duck", 180, 26);
console.log(duck);

 

person { name: 'duck', height: 180, age: 26 }

만일 파라미터 넘어지 않는 경우 기본값을 줄 수 있다!

var person = function(name = 'duck', height = '180', age = '26'){
  this.name = name;
  this.height = height;
  this.age = age;
}

var duck = new person();
console.log(duck);

person { name: 'duck', height: '180', age: '26' }

3. class

es5에서 생성자 함수를 이용해서 객체를 생성하는 방법이 es6에서는 class 문법으로 좀더 OOP (Object Oriented Programming)적인 개념으로 객체를 생성할 수 있게 되었다.

Constructor

생성자 함수의 키워드는 constructor이고 this라는 키워드를 함께 써서 멤버 변수들을 초기화 할 수 있다.

class person {
  constructor(name, height, age) {
    this.name = name;
    this.height = height;
    this.age = age;
  }
}

var duck = new person(duck, 180, 26);
console.log(duck);

person { name: 'duck', height: '180', age: '26' }

만약 생성자의 파라미터가 없으면 아래처럼 기본값을 지정해 줄 수 있다.

class person {
  constructor(name = 'duck', height = '180', age = '26') {
    this.name = name;
    this.height = height;
    this.age = age;
  }
}

var duck = new person();
console.log(duck);

person { name: 'duck', height: '180', age: '26' }

상속

extends 키워드를 사용해서 사용한다.

만약 person 클래스를 person2 클래스가 home이라는 속성을 추가해서 상속 받았다고 해보자.

class person {
  constructor(name, height, age) {
    this.name = name;
    this.height = height;
    this.age = age;
  }
}

class person2 extends person{
  constructor(name, height, age, home){
    this.home = home;
  }
}

var duck = new person2("duck", 180, 26, 'Seoul');
console.log(duck);

위와 같이 코드를 작성하면 참조 오류가 발생한다.

파생 클래스에서 constructor 안의 파라미터로 부모의 속성값을 넣어주고 super 함수 안에 같은 파라미터를 넣고

this 키워드를 이용해서 자신의 속성값을 지정해야 한다.

this를 사용하려면 반드시 앞에 super()를 써서 부모의 생성자 함수를 호출해야 한다!!

class person2 extends person{
  constructor(name, height, age, home){

    super(name, height, age);
    this.home = home;
  }
}

var duck = new person2("duck", 180, 26, 'Seoul');
console.log(duck);

person2 { name: 'duck', height: 180, age: 26, home: 'Seoul' }

만약 아래와 같이 super() 안에 파라미터를 넣지 않으면 부모 속성의 값은 모두 undefined로 나온다.

class person2 extends person{
  constructor(home){

    super();
    this.home = home;
  }
}

var duck = new person2("duck", 180, 26);
console.log(duck);

person2 {
  name: undefined,
  height: undefined,
  age: undefined,
  home: 'duck'
}