javscript ES6 Classes


ES6 Classes

  • 一般関数nomal: function()normal()羅約
  • const heropy = {
      name: 'Heropy',
      normal() {  // 일반함수인 nomal: function()을 normal()로 축약가능
        console.log(this.name)
      },
      arrow: () => {
        console.log(this.name)
      }
    }
    
    heropy.normal()
    heropy.arrow()
  • prototypeで書かれたコードをes 6 classで略す
  • ////prototype (축약 전)
    
    function User(first, last) {
      this.firstName = first
      this.lastName = last
    }
    
    User.prototype.getFullName = function () {
      return `${this.firstName} ${this.lastName}`
    }
    
    const heropy = new User('Heropy', 'Park') // 생성자 함수 (PascalCase)
    const amy = new User('Amy', 'Clarke') // 생성자 함수
    const neo = new User('Neo', 'Smith') // 생성자 함수
    
    console.log(heropy) // User {firstName: 'Heropy', lastName: 'Park'}
    console.log(amy.getFullName()) // Amy Clarke
    console.log(neo.getFullName()) // Neo Smith
    //class (축약 후)
    
    class User { //생성자 함수
      constructor(first, last) { //contstuctor : function()을 //cunstructor()로 생략
        this.firstName = first
        this.lastName = last
      }
      getFullName() {
        return `${this.firstName} ${this.lastName}`
      }
    }
    
    const heropy = new User('Heropy', 'Park') // 생성자 함수 (PascalCase)
    const amy = new User('Amy', 'Clarke') // 생성자 함수
    const neo = new User('Neo', 'Smith') // 생성자 함수
    
    console.log(heropy) // User {firstName: 'Heropy', lastName: 'Park'}
    console.log(amy.getFullName()) // Amy Clarke
    console.log(neo.getFullName()) // Neo Smith