JavaScript (Class, Property & Methods)

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();

'개인적인 공부 > 프론트엔드' 카테고리의 다른 글

JavaScript (Destructuring, 구조분할)  (0) 2023.01.06
JavaScript (Spread & Rest Operators)  (0) 2023.01.06
JavaScript (클래스)  (0) 2023.01.06
JavaScript ( Export & Import)  (0) 2023.01.06
JavaScript (화살표 함수)  (0) 2023.01.05