TIL 07 | JavaScript 클래스, 프로토타입, .this

01. 생성자 함수와 prototype

// heropy 객체
const heropy = { //객체 데이터
  firstName: 'Heropy', //속성 property
  lastName: 'Park',
  getFullName: function(){ //메소드 : 속성에 함수 데이터가 할당되어 있는 것
    return `${this.firstName} ${this.lastName}` //여기서 this는 객체의 이름을 지칭, 객체 이름 변수가 교체될 경우를 대비
  } //속성과 메소드를 합쳐 멤버라고 부르기도 함
}

console.log(heropy) // {firstoName: "Heropy", lastName:"Park", getFullName: f}
console.log(heropy.getFullName()) // Heropy Park

// amy 객체
const amy = { 
  firstName: 'Amy', 
  lastName: 'Clarke',
  getFullName: function(){ 
    return `${this.firstName} ${this.lastName}` 
  } 
}

console.log(amy.getFullName())// Amy Clarke

// neo 객체
const neo = { 
  firstName: 'Neo', 
  lastName: 'Smith',
  getFullName: function(){ 
    return `${this.firstName} ${this.lastName}` 
  } 
}

console.log(neo.getFullName()) // Neo Smith

객체 heropy, amy, neo 모두 로직과 메소드 모두 동일한 상황에서 객체 데이터를 각각 지정해주는 것은 메모리 측면에서 매우 비효율 적이다. 이를 프로토타입을 통해 해결할 수 있다.

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') // 생성자 함수, 객체 데이터 생성
const amy = new User('Amy', 'Clarke')
const neo = new User('Neo', 'Smith')
// 생성자 함수가 할당된 변수들을 인스턴스라고 칭한다. 

console.log(heropy) // User{firstName: "Heropy", lastName: "Park"}
console.log(amy) // 위와 같은 객체 생성 
console.log(nwo) 

console.log(heropy.getFullName()) // Heropy Park

User 라는 함수를 선언하면 User.prototype이라는 Object가 자바스크립트 안에 자동으로 생성된다. User 함수로부터 생성된 객체들은 User.prototype에 들어있는 값을 꺼내쓸 수 있다. User.prototype.getFullName에 함수를 할당하고 이를 User 생성자 함수들이 꺼내쓰는 셈이다. 이를 통해 메모리 할당을 줄여 효율을 높인다.

자바스크립트 프로토타입 더 깊게 이해하기 (클릭)

02. this

this 는 함수를 호출한 객체를 가리키는 키워드이다. 그래서 함수가 호출될 때 호출한 객체에 따라 상대적으로 그 값이 변한다. 일반(Normal) 함수는 호출 위치에 따라 this가 정의된다. 그러나 화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this가 정의된다. 따라서 함수가 선언되기 직전 유효한 this 값과 똑같은 this 값을 갖게된다.

// ex 1)
const heropy = {
  name:'Heropy',
  normal: function () { //:function 삭제 가능 
    console.log(this.name) // 일반 함수
  },
  arrow: () => { // 화살표 함수
    console.log(this.name)
  }
}

heropy.normal() // Heropy
heropy.arrow() // undefined

// ex 2)
const amy = {
  name : 'Amy',
  normal: heropy.normal, // .normal() 호출이 아닌 데이터만 할당
  arrow: heropy.arrow
}

amy.normal() // Amy
amy.arrow() // undefined

// ex 3)
function User(name){
  this.name = name
}
User.prototype.normal = function () {
  console.log(this.name)
}
User.prototype.arrow = ()=> {
  console.log(this.name)
}

const chaein = new User('Chaein')
chaein.normal() // Chaein
chaein.arrow() // undefined

// ex 4)

const timer = {
  name:'Heropy',
  timeout: function(){
    setTimeout(function (){ // 일반 함수
      console.log(this.name)
    }, 2000)
  }
};
 
timer.timeout(); // undefined

const timer = {
  name:'Heropy',
  timeout: function(){ // setTimeout()의 함수 범위
    setTimeout(() => { // 화살표 함수
      console.log(this.name)
    }, 2000)
  }
};
 
timer.timeout(); // Heropy

03. ES6 Classes

이전 자바스크립트에서는 클래스를 지원하지않아 prototype만 활용하였지만 ES6부터 클래스 기능이 추가되었다.

class User{
  constructor(first, last) {
    this.firstName = first
    this.lastName = last
  } 
  getfullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

const heropy = new User('Heropy', 'Park') 
console.log(heropy) // User{firstName: "Heropy", lastName: "Park"}
console.log(heropy.getFullName()) // Heropy Park   

04. 상속 (확장)

//ex 1)
class Vehicle{
  constructor(name, wheel){
    this.name = name
    this.wheel = wheel
  }
}

const myVehicle = new Vehicle('운송수단', 2)
console.log(myVehicle) // Vehicle{name:"운송수단", wheel: 2}

// ex 2)
class Bicycle extends Vehicle {
  constructor(name, wheel){
    super(name, wheel) //Vehicle 매개변수가 실행됨
  }
}

const myBicycle = new Bicycle('삼천리', 2)
const daughterBicycle = new Bicycle('세발', 3)
console.log(myBicycle) // Bicycle {name:"삼천리", wheel: 2}
console.log(daughterBicycle) // Bicycle {name:"세발", wheel: 3}

// ex 3)
class Car extends Vehicle {
  constructor(name, wheel, license){
    super(name, wheel)
    this.license = license
  }
}

const myCar = new Car('벤츠', 4, true)
const daughtersCar = new Car('포르쉐', 4, false)
console.log(myCar) // Car {license: true, name:"벤츠", wheel: 4}
console.log(daughtersCar) // Car {license: false, name:"포르쉐", wheel: 4}