개인적인 공부/프론트엔드

JavaScript (Class, Property & Methods)

karatejin 2023. 1. 6. 18:51

Property(속성) : 클래스와 객체에 추가되는 변수

//ES6
constructor(){
  this.myProperty ='value'
}

//ES7
myProperty = 'value'

Method: 클래스와 객체에 추가되는 함수

//ES6
myMethod(){...}

//ES7
myMethod = () => {...}

myMethod = () => {...} 의 장점은 property 값으로 화살표 함수를 사용하기 때문에 this 키워드를 사용하지 않아도 된다.

 

저번에 했던것

예시

class Human{
  constructor(){
    this.gender = 'male';
  }
  printGender(){
    console.log(this.gender);
  }
}

class Person extends Human{
  constructor(){
    super();
    this.name = 'karatejin';
    this.gender = 'female';
  }
  
  printMyName(){
    console.log(this.name);
  }
}
const person = new Person();
person.printMyName();
person.printGender();

 

ES6 / Babel

class Human{ 
    gender = 'male'; //constructor() 삭제 , this. 삭제

  printGender = () => { // 화살표 함수 추가
    console.log(this.gender);
  }
}

class Person extends Human{ //constructor() ,super() 삭제
    name = 'karatejin';
    gender = 'female';
  
  printMyName = () => { // 화살표 함수 추가
    console.log(this.name);
  }
}
const person = new Person();
person.printMyName();
person.printGender();