Javascript

[모자딥]Class

2023. 12. 2. 00:02
목차
  1. 예제 25.01
  2. IIFE함수
  3. 파스칼 케이스
  4. 예제 25.04

예제 25.01

  • Person 변수를 선언하고 즉시실행되는 IIFE함수 실행
  • 생성자와 프로토타입 메서드를 캡슐화함
// ES5 생성자 함수
// Person변수 선언, 즉시 실행되는 함수인 IIFE, 함수는 생성자와 프로토타입 메서드를 캡슐화
var Person = (function () {
    // 생성자 함수 Person, name이라는 매개변수를 받아 새로 생성된 객체의 name 속성에 할당함
    function Person(name, age) {
        this.name = name;
        this.age = age
    }

    // 프로토타입 메서드
    // Person 생성자의 프로토타입 sayHi라는 메서드 추가
    // 이 메서드는 콘솔에 메세지를 로깅하는데, 메세지 안에 name 속성이 포함됨
    Person.prototype.sayHi = function () {
        console.log('Hi! My name is ' + this.name);
        console.log('im' + this.age + 'age');
    };

    // 생성자 함수 반환
    //전체 IIFE가 Person 생성자를 반환
    return Person;

}());

//new Person 객체생성
var me = new Person('Lee', 18);
me.sayHi(); // Hi! My name is Lee\


//IIFE : Immediately Invoked Function Expression
//자바스크립트에서 함수를 정의하고 즉시 실행되는 함수 표현식
(function () {
    const 현재시간 = new Date
    console.log(현재시간.toLocaleString())
})();

IIFE함수

  • IIFE는 "Immediately Invoked Function Expression"의 약어로, 즉시 실행되는 함수 표현식
  • 함수의 선언과 동시에 호출됨
(function() {
    return 1+1
})();


(() => {
  return 1+1
})();

(async () => {
 return await 1+1
})();

파스칼 케이스

  • 단어의 앞글자만 대문자로 표현하는 방법
  • class의 선언시 맨앞글자만 대문자로 표기하는 파스칼 케이스를 사용함
class Person{

}

class Color{

}

 

예제 25.04

  • class 문법으로 Person 클래스 선언
  • constructor로 인스턴스 생성 및 초기화
  • sayHi라는 프로토타입 메서드 선언
// 클래스 선언문
class Person {
    // 생성자
    constructor(name) {
        // 인스턴스 생성 및 초기화
        this.name = name; // name 프로퍼티는 public하다.
    }

    // 프로토타입 메서드
    // 클래스의 인스턴스에 속하는 메서드
    // 각 인스턴스에 대해 별도의 메모리르 차지하지 않고 클래스의 프로토타입에 저의됨
    // 인스턴스의 상태를 조작하거나 인스턴스와 관련된 동작을 수행
    // 클래스로 생성된 모든 인스턴스에서 공유됨
    // sayHi메서드는 프로토타입 메서드로 Person 인스턴스에서 공통으로 사용됨
    sayHi() {
        console.log(`Hi! My name is ${this.name}`);
    }

    // 정적 메서드
    // 클래스 자체에 속하는 메서드
    // 클래스의 인스턴스와는 관련 x 클래스 수준의 동작을 수행하는데 사용됨
    // 인스턴스를 생성하지 않고도 클래스 이름을 통해 직접호출 가능
    static sayHello() {
        console.log('Hello!');
    }
}

// 인스턴스 생성
const me = new Person('Lee');

// 인스턴스의 프로퍼티 참조
console.log(me.name); // Lee
// 프로토타입 메서드 호출
me.sayHi(); // Hi! My name is Lee
// 정적 메서드 호출
Person.sayHello(); // Hello!

'Javascript' 카테고리의 다른 글

옵셔널 체이닝  (1) 2024.01.01
[모자딥]Class  (0) 2023.12.02
[모자딥]Math  (0) 2023.11.28
[모자딥]Number  (1) 2023.11.28
[모자딥]Number  (1) 2023.11.27
  1. 예제 25.01
  2. IIFE함수
  3. 파스칼 케이스
  4. 예제 25.04
'Javascript' 카테고리의 다른 글
  • 옵셔널 체이닝
  • [모자딥]Class
  • [모자딥]Math
  • [모자딥]Number
index.ys
index.ys
머리속에 떠도는 코드조각들을 맞추는 공간입니다.
index.ys
코린이 개발일지
index.ys
전체
오늘
어제

공지사항

블로그 메뉴

  • 홈
  • 방명록
  • Github
  • Notion
  • Figma
  • 타닥타닥 (235)
    • 개발일지 (124)
    • html , css (0)
    • Javascript (30)
    • Node.js (8)
    • React (2)
    • 네트워크 (1)
    • DB, SQL (5)
    • AWS (11)
    • CS (21)
    • 면접 (13)
    • 사진 (4)
    • 북로그 (3)
    • 머릿속 (5)

인기 글

최근 글

최근 댓글

hELLO · Designed By 정상우.
index.ys
[모자딥]Class
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.