ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 클래스와 인스턴스 이해하기
    Front-end/Javascript 2023. 5. 11. 14:15
    반응형

    이번 글에서는 클래스와 인스턴스에 대해 이해한 내용을 나만의 언어로 자유 형식으로 기록해보겠습니다. ES5와 ES6의 클래스 작성 문법, 생성자 함수, 그리고 new 키워드도 함께 알아보도록 하겠습니다.

    1. 클래스와 인스턴스란?
    클래스는 객체를 만들기 위한 템플릿이라고 생각할 수 있습니다. 객체는 클래스에서 정의된 속성과 메서드를 상속받아 생성됩니다. 이렇게 생성된 객체를 인스턴스라고 부릅니다.

    2. ES5 클래스 작성 문법
    ES5에서는 클래스를 생성자 함수로 작성할 수 있습니다. 생성자 함수는 일반 함수와 동일한 문법을 가지고 있습니다. 예를 들어, 아래와 같은 형태의 생성자 함수를 작성할 수 있습니다.

    function Person(name, age) {
      this.name = name;
      this.age = age;
      this.greet = function() {
        console.log('안녕하세요, 저는 ' + this.name + '입니다.');
      }
    }

    이렇게 작성된 생성자 함수는 new 키워드를 사용해 인스턴스를 생성할 수 있습니다. 예를 들어,

    const person1 = new Person('홍길동', 30);

    이렇게 생성된 person1 객체는 Person 클래스의 속성과 메서드를 상속받아 사용할 수 있습니다.

    3. ES6 클래스 작성 문법
    ES6에서는 클래스를 훨씬 간결하게 작성할 수 있습니다. 예를 들어, 위에서 작성한 Person 클래스는 아래와 같이 작성할 수 있습니다.

    class Person {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
      
      greet() {
        console.log('안녕하세요, 저는 ' + this.name + '입니다.');
      }
    }

    ES6에서는 클래스를 선언할 때 class 키워드를 사용하며, 생성자 함수 대신 constructor 메서드를 사용합니다. 또한, 클래스 내에서 메서드를 정의할 때는 function 키워드를 생략할 수 있습니다.

    4. new 키워드
    new 키워드는 생성자 함수나 클래스를 사용해 인스턴스를 생성할 때 사용됩니다. new 키워드를 사용하면 새로운 객체가 생성되며, 이 객체는 클래스에서 정의된 속성과 메서드를 상속받아 사용할 수 있습니다. 예를 들어, Person 클래스를 생성하고 이를 사용해 인스턴스를 생성해보겠습니다.

    class Person {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
      greet() {
        console.log('안녕하세요, 저는 ' + this.name + '입니다.');
      }
    }
    const person1 = new Person('홍길동', 30);

    이렇게 생성된 person1 객체는 Person 클래스에서 정의된 속성과 메서드를 상속받아 사용할 수 있습니다. new 키워드를 사용하면 객체를 쉽게 생성할 수 있으며, 객체를 생성하고 초기화하는 과정을 간단하게 처리할 수 있습니다.

     

    5. 생성자 함수
    생성자 함수는 객체를 생성할 때 사용되는 함수입니다. 일반 함수와 동일한 문법을 가지고 있으며, new 키워드를 사용해 객체를 생성합니다. 생성자 함수는 클래스와 유사한 역할을 하며, 객체를 생성할 때 속성과 메서드를 초기화할 수 있습니다.
    예를 들어, Person 클래스를 생성하는 생성자 함수를 작성해보겠습니다.

    function Person(name, age) {
      this.name = name;
      this.age = age;
      this.greet = function() {
        console.log('안녕하세요, 저는 ' + this.name + '입니다.');
      }
    }

    이렇게 작성된 생성자 함수는 new 키워드를 사용해 객체를 생성할 수 있습니다.

    const person1 = new Person('홍길동', 30);

    이렇게 생성된 person1 객체는 Person 클래스의 속성과 메서드를 상속받아 사용할 수 있습니다. 생성자 함수를 사용하면 객체를 더욱 효율적으로 생성하고 관리할 수 있습니다.

    반응형

    댓글

Designed by Tistory.