javaScript(ES6 Classes)

ES6 Classes

---

ES6이후 Class가 나오면서 명료하고 간편하게 객체를 생성하고, 상속을 구현할 수 있습니다.
내부적으로 class는 기존의 prototype을 연결하는 속기법일 뿐입니다.
인스턴스가 생성되면 속성과 메서드가 복제되는 것이 아닌, prototype에 대한 연결을 생성합니다.

클래스(Classes) 사용법

1. 기존방법

function User(first, last) {
  this.firstName = first
  this.lastName = last
}
User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`
}

//객체 생성
const gaeng = new User('Go', 'Gaeng')
const amy = new User('Amy', 'Clarke')
const neo = new User('Neo', 'Smith')

console.log(gaeng.getFullName())
console.log(amy.getFullName())
console.log(neo.getFullName())

2. 클래스 선언(Class declarations)

class User {
  constructor(first, last) {
    this.firstName = first
    this.lastName = last
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

//객체 생성
const gaeng = new User('Go', 'Gaeng')
const amy = new User('Amy', 'Clarke')
const neo = new User('Neo', 'Smith')

console.log(gaeng.getFullName())
console.log(amy.getFullName())
console.log(neo.getFullName())

※클래스 선언은 함수 선언과 달리 호이스팅 되지 않습니다.

3. constructor

constructor는 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화하는 역할을 합니다. new User() 코드를 실행하면 People.prototype.constructor가 호출됩니다. 이를 default constructor라고 하며 constructor가 없으면 인스턴스를 생성할 수 없습니다.

const gaeng = new User('Go', 'Gaeng')

new User('Go', 'Gaeng')을 실행하면 User 클래스에 작성한 constructor가 자동으로 호출되고 파라미터 값으로 ('Go', 'Gaeng')을 넘겨 줍니다.

new 연산자가 인스턴스를 생성하는 것처럼 보이지만, 사실 new 연산자는 constructor를 호출하면서 파라미터를 넘겨주는 역할만 합니다. 호출된 constructor가 인스턴스를 생성하여 반환하면 new 연산자가 받아 new를 실행한 곳으로 반환합니다. 과정은 다음과 같습니다.

1. new User('Go', 'Gaeng')을 실행
2. new 연산자가 constructor를 호출하면서 파라미터 전달
3. constructor에 작성한 코드를 실행하기 전에 빈 Object 를 생성
4. constructor 코드를 실행
5. 생성한 Object(인스턴스)에 property 할당 (인스턴스를 먼저 생성했기 때문에 this로 Object 참조 가능
6. 생성한 Object 반환

클래스(Classes) 상속(확장) 사용방법

예제 1

class Vehicle {
  constructor(name, wheel) {
    this.name = name
    this.wheel = wheel
  }
}
const myVehicle = new Vehicle('운송수단', 2)
console.log(myVehicle)

// extends - 확장(상속)
class Bicycle extends Vehicle {
  constructor(name, wheel) {
    super(name, wheel)
  }
}
const myBicycle = new Bicycle('삼천리', 2)
console.log(myBicycle)

class Car extends Vehicle {
  constructor(name, wheel, license) {
    super(name, wheel)
    this.license = license
  }
}

1. Vehicle이라는 운송수단을 최상단에 추가한다.
2. Vehicle을 Bicycle이라는 새로운 class에 extends를 추가하여 확장(상속)을해서 기본적인 내용을 Bicycle내부에서 사용하겠다.
3. Bicycle내부에서 super(name, wheel)라는 함수를 사용할 수 있다.
4. super가 실행되면 super가 있는 자리에서 Vehicle이 실행된다.
5. const myBicycle = new Bicycle('삼천리', 2) name과 wheel값을 넣어주고
6. console.log(myBicycle)호출하면 아래 결과가 출력된다.
   

예제 2

class Vehicle {
  constructor(name, wheel) {
    this.name = name
    this.wheel = wheel
  }
}
const myVehicle = new Vehicle('운송수단', 2)
console.log(myVehicle)

// extends - 확장(상속)
class Car extends Vehicle {
  constructor(name, wheel, license) {
    super(name, wheel)
    this.license = license
  }
}
const myCar = new Car('벤츠', 4, true)
const daughtersCar = new Car('포르쉐', 4, false)
console.log(myCar)
console.log(daughtersCar)

1. Vehicle이라는 운송수단을 최상단에 추가한다.
2. Vehicle을 Car이라는 새로운 class에 extends를 추가하여 확장(상속)을해서 기본적인 내용을 Car내부에서 사용하겠다.
3. Car내부에서 super(name, wheel)라는 함수를 사용할 수 있다.
4. super가 실행되면 super가 있는 자리에서 Vehicle이 실행된다.
5. this.license = license 운전면허 보유 유무를 추가적으로 받을 수 있음
6. const myCar = new Car('벤츠', 4, true) name과 wheel, license 값을 넣어주고
7. console.log(myCar)호출하면 아래 결과가 출력된다.