[javascript] class 개념

class와 super의 개념이 헷갈려서 정리하고자 한다.

 

1. super는 새로운 객체를 만드는 것이 아니다.

super는 참조하고자 하는 객체에서 가져오는 것이지, 새로운 객체를 만드는 것이 아니다.

 

 

// class로 객체 생성자 만들기.

class User {

  constructor(userId, name) {

    (this.userId = userId), (this.name = name);

  }

}

class UserDouble extends User {

  constructor() {

    super();

  }

}

// FROM 객체 To 배열

const user1 = new UserDouble("1", "새로운 정보 1");

const user2 = new UserDouble("2", "새로운 정보 2");

console.log(user1);

console.log(user2);

 

 

• User는userId, name 속성을 가지고 있는 객체이다.
• UserDouble은 User를 그대로 상속받는다. 그래서 userId와 name 속성을 그대로 가져올 수 있다. 주의할 점은 객체를 새롭게 만드는 것이 아니기 때문에 userId와 name은 User의 인자이다.
• UserDouble에 인스턴스를 만들 때 매개 변수가 없기 때문에 user1, user2의 결과값은 undefined가 나올 수 밖에 없다.

 

 

 

// class로 객체 생성자 만들기.

class User {

  constructor(userId, name) {

    (this.userId = userId), (this.name = name);

  }

}

class UserDouble extends User {

  constructor(newUserId) {

    super(newUserId);

  }

}

// FROM 객체 To 배열

const user1 = new UserDouble("1", "새로운 정보 1");

const user2 = new UserDouble("2", "새로운 정보 2");

console.log(user1);

console.log(user2);

 

 

 

UserDouble에 newUserId라는 매개 변수를 추가하였다. 

• newUserId는 userId 라는 속성의 값으로 들어가게 된다. 
• name에는 들어갈 매개 변수가 없기 때문에  undefined로 출력된다.

 

 

 

// class로 객체 생성자 만들기.

class User {

  constructor(userId, name) {

    (this.userId = userId), (this.name = name);

  }

}

class UserDouble extends User {

  constructor(newUserId, newInfo) {

    super(newUserId);

    // 새로운 정보 추가

    this.newInfo = newInfo;

  }

}

// FROM 객체 To 배열

const user1 = new UserDouble("1", "새로운 정보 1");

const user2 = new UserDouble("2", "새로운 정보 2");

console.log(user1);

console.log(user2);

 

 

 

newInfo 라는 매개 변수를 추가하고, 새로운 속성을 UserDouble에 추가한다.

• 위와 동일하게 newUserId는 userId의 값으로 들어간다.
• newInfo는 새로운 속성인 newInfo의 값으로 들어간다.
• name은 undefined가 들어간다.

 

 

 

 

결론을 말하자면,

 

• constructor에 있는 매개 변수에 의하여 인스턴스를 만들 수 있게 된다. (정보 제공하기.)
• super를 통하여 부모 객체에서 상속 받을 수 있고, 속성에 해당하는 값을 넣어줄 수 있다. 이 때, 속성은 부모의 속성이다. 자식의 속성이 아니다.
• 새로운 객체의 속성과 값을 추가할 수도 있다.

 

 

처음에 새로운 객체를 상속을 통하여 만드려고 시도했었다.

하지만 위와 같은 이유로, 새로운 객체를 만들 때 상속을 이용할 수가 없다.

 

class User {
  constructor(userId, name) {
    (this.userId = userId), (this.name = name);
  }
}
class UserDouble extends User {
  constructor(userId, name) {
    super(userId, name);
    super(userId, name);
  }
}

// FROM 객체 To 배열
const user1 = Object.assign([], new UserDouble("10", "J"));
const user2 = Object.assign([], new UserDouble("11", "M"));
console.log(user1);
console.log(user2);

// 원하는 데이터 형식
[
  { userId: "10", name: "J" },
  { userId: "10", name: "J" },
];
[
  { userId: "11", name: "M" },
  { userId: "11", name: "M" },
];