[JS] JS 클래스 (new, this, prototype)

const seo0 = {
  firstName: 'seo0',
  lastName: 'yoon',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`
  }
}

console.log(seo0)

객체데이터가 있고, firstname, lastname은 속성(프로퍼티), 프로퍼티에 함수가 할당되어있으면 '메소드'라고

부르기로 약속했다. `${}` 백틱기호를 활용하여 데이터를 보관하려고 한다.

여기서,

this라는 부분은 바로 우리가 위에서 지정했던 seo0으로 생각하면 된다.

this = seo0

하지만 seo0은 변수에 할당했기때문에 언제든지 바뀔수있는 구조이고 이부분을 염두해둬야하기때문에

this라는것을 통해서 지칭한다. (this에 대한 자세한 이야기는 다음섹션에서 더 설명하도록 하겠다.)

console.log(seo0.getFullName()) //seo0 yoon

잘 출력 된다.

 

예제1)

const seo0 = {
  firstName: 'seo0',
  lastName: 'yoon',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`
  }
}
console.log(seo0.getFullName());

const neo = {
  firstName: 'neo',
  lastName: 'lee',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`
  }
}
console.log(neo.getFullName());

const amy = {
  firstName: 'amy',
  lastName: 'kim',
  getFullName: function () {
    return `${this.firstName} ${this.lastName}`
  }
}
console.log(amy.getFullName());

위에 코드를보면 여러개의 객체테이터가 있다. 간단한 어플리케이션같으면 상관없지만 

더 규모가 큰 서비스를 만들면 효율이 떨어진다. (여기서 효율이란? 메모리를 관리하는 효율!)

객체데이터 메소드의 로직이 똑같기때문에 이럴땐 '자바스크립트 클래스'를 사용해주면 편리하다.

 

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

const seo0 = new user('seo0', 'yoon') //생성자함수

console.log(seo0)

위 코드에서 user라는 함수를 '생성자 함수'라고 부른다. 뭐가 생성되냐면 바로 '객체데이터'가 생성된다.

//리터럴 방식
const seo0 = {} 
const seo0 = []
const seo0 = 'a'

seo0이라는 변수에다가 할당연산자를 통해 {}중괄호를 사용해서 손쉽게 만들어 낼 수 있는데..

이렇게 한번에 만들어내는것을 '리터럴 방식'이라고 한다.  

---

예제2)

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

const seo0 = new User('seo0', 'yoon') //생성자함수
const amy = new User('amy', 'lee') //생성자함수
const neo = new User('neo', 'kim') //생성자함수

console.log(seo0.getFullName())
console.log(amy.getFullName())
console.log(neo.getFullName())

this는 생성자 함수를 통해 그것이 할당되어있는 앞에있는 객체부분의 내용을 지칭하는것이다.

new라는 키워드를 통해서 생성자 함수로 실행한 결과를 반환하여 할당된 그 변수를 생성자 함수의 '인스턴스'라고 

부른다. seo0, amy, neo는 인스턴스!

 

여기서, prototype(속성)은 무엇일까?

퍼스트네임과 라스트네임은 예제1) 을 봤을때 user라는 생성자 함수는 실행할때마다 다른 내용이

들어오기때문에 메모리를 통일해서 관리하기 힘들지만,  getfullname값은 모두 같기때문에 통일화로

메모리를 효율적으로 관리할 수 있다. 

그때 user라는 함수에 숨겨져있는 protoytpe 속성부분에 getfullname을 할당해주면 우리가 몇 개의 객체를 만들던,

함수는 한 번만 만들어지기때문에 getfullname(메소드)들은 한 번만 만들어진 함수를 '참조'하는 개념이다. 

(매우 어렵...ㅜㅜㅜ)

 

결국, 기본적인 내용만 살펴봤지만

protoytpe을 사용해서 new라는 키워드와 함께 생성자 함수로 인스턴스를 만들어내는 이런 개념을

자바스크립트 클래스라고 한다.

(다른 프로그래밍 언어의 클래스와는 개념이 다르다.)

function User(first, last) {
  this.firstName = first
  this.lastName = last
}
User.prototype.getFullName = function () {
  return `${this.firstName} ${this.lastName}`
}
const seo0 = new User('seo0', 'yoon') //생성자함수

console.log(seo0.getFullName())

함수를 사용해서 new라는 키워드로 생성자 함수를 실행했는데,

일반함수와 생성자 함수는 구분이 안된다. 왜?  똑같은 function키워드를 사용했기때문에!!

그래서 암묵적으로 개발자들은 카멜케이스가 아닌, 파스칼케이스로 작성해준다. (맨 앞부분이 대문자)

결국엔 함수이름이 파스칼케이스로 작성되어있으면 "아~ 생성자 함수구나" 하고 알 수 있다.

 

마지막 예제)

new Swiper('.notice-line .swiper-container', {
  direction: 'vertical', 
  autoplay: true,
  loop: true
})

작성된 코드를 이해해보자.
swiper라는 함수가 실행이 되고 있고, 앞에 new라는 키워드가 있고, swiper가 대문자로 작성되어있으니

생성자 함수인 것을 알 수 있다.
이때 생성자 함수를 실행해서 인스턴스로 받아줄 수 있으면 좋지만 안에 내용은 따로 받지 않아도
기본적으로 설정된 내용이 슬라이드를 동작시킬 수 있기 때문에 인스턴스로 받지않아도 된다.
첫 번째 인수로 문자 데이터, 두 번째 인수는 옵션으로 사용할 객체 데이터를 넣어주고 있다.

인수는 두개가 사용되고 있고, 그 인수를 스와이퍼라는 내부에 선언되어있는 함수에서 

특정한 매개변수로 받아 슬라이드를 만들어내는 로직으로 사용하는 것.

 

 

this란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.