[JavaScript] 생성자 함수 / this / es6 class / 상속 / 확장

• 생성자 함수 - 일반적으로 사용하는 function이 내용이 같을 땐 효율이 좋지 않으므로 생성자 함수를 만들어서 작성한다.

const solyi = {
  firstName: 'Solyi',
  lastName: 'Choi',
  getFullName: function (){
    return `${this.firstName} ${this.lastName}`
  }
}
console.log(solyi.getFullName())

// 위가 일반적으로 사용하는 함수
// 아래가 생성자 함수
function User(first, last) {			//생성자 함수는 첫글자를 대문자로 작성하는 암묵적인 룰!
  this.firstName = first
  this.lastName = last
}

const person1 =  new user('solyi', 'choi') 	//person1 을 인스턴스 라고 부른다.

console.log(person1.getFullName())

 

• this 
  
  • 일반 함수는 호출 위치에따라  this를 정의하고
  • 화살표 함수는 자신이 선언된 함수 범위에서 this를 정의한다.

  • const solyi = {
      name: 'solyi',
      normal: function() {
        console.log(this.name)
      },
      arrow: () => {
        console.log(this.name)
      }
    }
    
    solyi.normal()    //정상적으로 solyi가 출력된다
    solyi.arrow()     //선언된 함수 내에서 무엇인지 알수 없어서 출력되지않음.
    
    const carol = {
      name: 'carol',
      normal: solyi.normal,
      arrow: solyi.arrow
    }
    carol.normal()    //carol출력
    carol.arrow()     // 아무것도 출력되지 않음

• 생성자 함수에서의 this

• unction User(name) {
    this.name = name
  }
  
  User.prototype.normal = function() {
    console.log(this.name)
  }
  User.prototype.arrow = () => {
    console.log(this.name)
  }
  const choi = new User('choi')
  choi.normal()   //choi 출력
  choi.arrow()    //아무것도 출력되지 않음

 

• 화살표 함수로 this 출력하기

• const timer = { 
    name: 'SoL',
    timeout: function() {
      setTimeout( () => {
        console.log(this.name)      
      } ,3000)
    }
  }
  
  timer.timeout()   //일반함수는 아무것도 출력되지 않지만, 화살표 함수를 쓸경우 Sol 출력

 

• ES6의 클래스

• class User {
    constructor(first, last) {
      this.firstName = first,
      this.lastName = last
    }
    getFullName(){			//클래스 내부에서 선언. User.prototype.getFullName 을 대체해서 간단하게 쓸수있음!
      return `${this.firstName} ${this.lastName}`
    }
  }
  
  const fullName = new User('solyi', 'choi')
  console.log(fullName)
  console.log(fullName.getFullName())

 

• extends 상속, 확장

• 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)    //Super부분에서 Vehicle이 실행된다
    }
  }
  const myBicycle = new Bicycle('세발', 3)
  console.log(myBicycle)
  
  
  //extends 더 확장해서 license 추가해서 사용 가능
  class Car extends Vehicle {
    constructor(name, wheel, license) {
      super(name, wheel)
      this.license = license
    }
  }
  const myCar = new Car("자동차", 4, false)
  const sisCar = new Car("레이", 4, true)
  console.log(myCar)
  console.log(sisCar)