JavaScript_6

Class

ECMA6부터 적용된 문법

생성자

1. 객체를 생성한다.
2. 값을 초기화한다.

1. 클래스 정의

class Person{
  
}

var kim = new Person();

console.log(kim);
// 출력 
// kim :  Person {}
// 객체가 생성되었음을 알 수 있다.

클래스 안에서 메서드를 만드려면 ?

class Person{
  function sum(){
    
  }
}

// XXXXXXXX

---> 틀림

class 안에서 function 키워드를 쓰지 않음

class Person(){
  sum(){
    
  }
}

2. Constructor

객체가 만들어지기 바로 직전에 실행되는 함수 constructor

class Person(){
  constructor(){
    console.log('constructor');
  }
}

var kim = new Person();
console.log('kim : ', kim);
// 출력 
// constructor
// kim : Person{}

인자를 넣으면?

class Person(){
  constructor(name, first, second){
		this.name = name;
    this.first = first;
    this.second = second;
  }
}

var kim = new Person('kim', 10,20);
console.log('kim : ', kim);
// 출력
// kim :  Person { name: 'kim', first: 10, second: 20 }

3. Method

1. 전통적인 방식의 메서드 구현 (prototype)

   class Person(){
     constructor(name, first, second){
   		this.name = name;
       this.first = first;
       this.second = second;
     }
   }
   
   Person.prototype.sum() = function(){
     return 'this' + (this.first + this.second);
   };
   let kim = new Person("kim", 10, 20);
   console.log("kim", kim.sum());
   
   // 출력
   // kim prototype : 30

   잘 나온다. 클래스는 완전히 새로운 개념이 아니라 조금 보완된것이기 때문

2. Class 안에 메서드 정의

   class Person {
     constructor(name, first, second) {
       this.name = name;
       this.first = first;
       this.second = second;
     }
   
     sum() {
       return "method in Class : " + (this.first + this.second);
     }
   }
   
   let kim = new Person("kim", 10, 20);
   var lee = new Person("lee", 20, 23);
   console.log("kim", kim.sum());
   console.log("lee", lee.sum());
   
   // 출력 
   // kim method in Class : 30
   // lee method in Class : 43

   kim만 다르게 동작하는 메서드를 구현하려면 ?

   kim.sum = function () {
     return "only kim : " + this.first * this.second;
   };
   
   console.log("kim", kim.sum());
   
   // 출력
   // kim only kim : 200

상속

1. extends

모두가 사용하는 라이브러리나 최소한으로 클래스를 유지하면서 기능을 추가하기 위해 상속을 사용한다.

상속을 사용하지 않고 추가하는 방법 --> 클래스를 하나 더 만든다.

class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }

  sum() {
    return "prototype : " + (this.first + this.second);
  }
}



 class PersonPlus {
   constructor(name, first, second) {
     this.name = name;
     this.first = first;
     this.second = second;
   }

   sum() {
     return "prototype : " + (this.first + this.second);
   }

   avg() {
     return (this.first + this.second) / 2;
   }
 }

avg메서드 이전까지 모두 중복되는 코드로 비효율적임..

생산성을 높이기 위해 상속하는 의미의 extends 를 사용한다.

class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }

  sum() {
    return "prototype : " + (this.first + this.second);
  }
}



 class PersonPlus extends Person{
   avg() {
     return (this.first + this.second) / 2;
   }
 }

var kim = new Person('kim', 10,20);
var lee = new PersonPlus('lee', 30,20);
console.log('kim : ', kim.sum());
console.log('lee : '   , lee.avg());

// 출력
// kim sum() :  prototype : 30
// lee sum() :  10

2. super

생성자에 인자를 하나 더 추가하고 싶을 때

class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }

  sum() {
    return this.first + this.second;
  }
}

class PersonPlus extends Person {
  
  avg() {
    return (this.first + this.second) / 2;
  }
  
}

-- > 부모 클래스를 건드려야 하는데... 고민임,

그럼 자식클래스에 인자를 추가한 생성자를 만들어보자

class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }

  sum() {
    return this.first + this.second;
  }
}

class PersonPlus extends Person {
   constructor(name, first, second, third) {
    // this.name = name;
    // this.first = first;
    // this.second = second;
		// this.third= third;
  }

  sum() {
    return this.first + this.second + this.third;
  }

  avg() {
    return (this.first + this.second + this.third) / 3;
  }
  
}

이러면 상속의 의미가 전혀 없어진다...

이럴때 super 키워드를 활용하자

super 적용

// ECMA6부터 적용된 문법
// 상속 도입시 겪게 되는 자잘한 문제들
// 1. 생성자에 인자를 하나 더 추가하고 싶을 때
class Person {
  constructor(name, first, second) {
    this.name = name;
    this.first = first;
    this.second = second;
  }

  sum() {
    return this.first + this.second;
  }
}

class PersonPlus extends Person {
  constructor(name, first, second, third) {
    // 중복부분 제거하고 super()
    // this.name = name; -- 제거대상
    // this.first = first; -- 제거대상
    // this.second = second; -- 제거대상
    super(name, first, second);
    //super() //괄호가 있으면 부모생성자
    //                없으면 class자체를 의미
    this.third = third;
  }

  sum() {
    return super.sum() + this.third;
  }
  avg() {
    return (super.sum() + this.third) / 3;
  }
}

var kim = new PersonPlus("kim", 10, 20, 30);
console.log("kim.sum() : ", kim.sum()); 
console.log("kim.avg() : ", kim.avg()); 

// 출력
// kim.sum() :  60
// kim.avg() :  20

super() : 괄호가 있으면 부모생성자, 없으면 class자체를 의미