자바스크립트 생성자함수

2022.05.17

생성자 함수 new Function()

생성자 함수를 PascalCase(파스칼케이스)로 써줌
생성자함수임을 쉽게 알아보기 위해 관행적으로 사용되어지고 있음

function User(first, last) {
  this.firstName = first
  this.lastName = last

  // 메서드. 객체 리터럴 안에 함수표현식
  // 객체의 프로퍼티(속성)에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줌
  this.getFullName = function () {
     return `${this.firstName} ${this.lastName}`
   }
  // 속성과 메서드를 합해 *맴버*라 부름
}


// 자바스크립트 = 프로토탑입기반의 프로그래밍언어
// firstName, lastName은 user라는 생성자 함수가 만들어질때마다
// 다른 내용이 들어오기때문에 통일해서 메모리를 관리하기 어렵다
// getFullName 로직은 같기 때문에 통일화 해서 메모리는 좀 더 효율적으로 관리해줄 수 있다
// user함수에 숨어져있는 프로토타입속성에 getFullName을 할당해주면
// 몇개의 객체를 만들더라도 getFullName의 함수는 메모리에 딱 한번만 만들어짐
// 그래서 getFullName()메소드는 위에 함수를 참조한다

// 위와같은 기능을 자바스크립트의 클래스라 부른다
// 생성자함수로 인스턴스를 만들어내는 기능을 자바스크립트의 클래스라 부른다

User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`
}


// sunny라는 변수에 인스턴스(instance)로 정보가 들어가지고 그 인스턴스틑 하나의 객체데이터
// 생성자함수로 실행한 결과를 반환해서 할당된 그 변수를 생성자 함수의 인스턴스라 부름
// 생성자 함수. 객체데이터 생성
// sunny, amy, jessi => 인스턴스
const sunny = new User('Sunny', 'Yu');
const amy = new User('Amy', 'Park');
const jessi = new User('Jessi', 'Kim');

// .과 []는 동일하게 동작
// .getFullName() 메소드 실행
console.log(sunny['getFullName']()) //Sunny Yu
console.log(amy.getFullName()) //Amy Park
console.log(jessi.getFullName()) //Jessi Kim

this

일반(Normal)함수는 _호출 위치_에 따라 this정의
화살표(Arrow)함수는 자신이 선언된 _함수 범위_에서 this정의

const sunny = {
  name: 'Sunny',
  //익명함수 메소드
  normal: function () {
    console.log(this.name)
  },
  // 화살표 함수 메소드
  // 화살표 함수가 선언된 범위 주변에 함수가 보이지 않아서 undefined가 출력
  arrow: () => {
    console.log(this.name)
  }
}
// sunny객체의 nromal, arrow 메소드 실행
sunny.normal()
sunny.arrow()

const jessi = {
  name: 'Jessi',
  //normal이라는 함수데이터가 normal에 할당되고 있다.
  //뒤에 소괄호()가 없기떄문에 호출이 아니다
  normal: sunny.normal,
  arrow: sunny.arrow
}

jessi.normal()
jessi.arrow()

//파스칼케이스로 작성된 것만 봐도 생성자 함수라는걸 눈치채주기
function User(name) {
  this.name = name
}
// User함수에 프로토타입 normal메소드 
User.prototype.normal = function () {
  console.log(this.name)
}
User.prototype.arrow = () => {
  console.log(this.name)
}

//sunny라는 인스턴스 생성. 즉, 변수
const sunny = new User('Sunny')

sunny.normal()
sunny.arrow()

//name과 timeout이라는 속성값, 메소드가 작성되있음
const timer = {
  name: 'Coffee',
  timeout: function () {
    // setTimeout(함수, 시간)
    setTimeout(() => {
      console.log(this.name)
    }, 2000)
  }
}
timer.timeout()

const timer = {
  name: 'Coffee',
  timeout: function () {
    // setTimeout(함수, 시간)
    setTimeout(function () {
      console.log(this.name)
    }, 2000)
  }
}
timer.timeout() //undefined
// 일반 함수는 호출 위치에 따라서 this 정의되기때문에
// setTimeout로직 어딘가에서 실행이되기때문에

ES6 Classes

const sunny = {
  name: 'Sunny',
  //익명함수 메소드 function키워드로 만들어진 일반함수와 개념이 같다
  //소괄호와 함께 중괄호가 있으면 
  normal() {
    console.log(this.name)
  },

  arrow: () => {
    console.log(this.name)
  }
}

sunny.normal()
sunny.arrow()

function User(first, last) {
  this.firstName = first
  this.lastName = last

}
User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`
}

class User {
  //내부함수
  // constructor: function () {} 와 같음
  constructor(first, last) {
    this.firstName = first
    this.lastName = last
  }
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
}


const sunny = new User('Sunny', 'Yu');
const amy = new User('Amy', 'Park');
const jessi = new User('Jessi', 'Kim');


console.log(sunny)
console.log(amy.getFullName()) 
console.log(jessi.getFullName())

클래스 확장(상속)

class Vehicle {
  //constructor: function () {}
  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는 확장된 Vehicle을 의미
    super(name, wheel)
  }
}
const myBicycle = new Bicycle('삼천리', 2)
const daughterBicylce = new Bicycle('세발', 3)
console.log(myBicycle)
console.log(daughterBicylce)

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)
console.log(daughtersCar)