정보실

웹학교

정보실

javascript JavaScript에서 클래스 이해 - JavaScript guide

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. JavaScript에서 This, Bind, Call 및 Apply 이해

JavaScript에서 클래스 이해 


소개 


JavaScript는 프로토 타입 기반 언어이며 JavaScript의 모든 객체에는 객체 속성과 메서드를 확장하는 데 사용할 수 있는 [[Prototype]]이라는 숨겨진 내부 속성이 있습니다. JavaScript의 프로토 타입 및 상속 이해 자습서에서 프로토 타입에 대한 자세한 내용을 읽을 수 있습니다.


최근까지 부지런한 개발자는 생성자 함수를 사용하여 JavaScript에서 객체 지향 디자인 패턴을 모방했습니다. ES6이라고도 하는 언어 사양 ECMAScript 2015는 JavaScript 언어에 클래스를 도입했습니다. JavaScript의 클래스는 실제로 추가 기능을 제공하지 않으며 프로토 타입 및 상속에 대해 "구문 설탕"을 제공하는 것으로 설명됩니다. 다른 프로그래밍 언어는 클래스를 사용하므로 JavaScript의 클래스 구문을 사용하면 개발자가 언어를 보다 쉽게 ​​이동할 수 있습니다.


https://www.digitalocean.com/community/tutorials/understanding-classes-in-javascript 


클래스는 함수입니다 


JavaScript 클래스는 함수 유형입니다. 클래스는 class 키워드로 선언됩니다. 함수 표현식 구문을 사용하여 함수를 초기화하고 클래스 표현식 구문을 사용하여 클래스를 초기화합니다.


// Initializing a function with a function expression
const x = function() {}
// Initializing a class with a class expression
const y = class {}

Object.getPrototypeOf() 메소드를 사용하여 객체의 [[Prototype]]에 액세스 할 수 있습니다. 이것을 사용하여 빈 함수를 테스트 해 봅시다.

Object.getPrototypeOf(x);
Output
ƒ () { [native code] }

방금 만든 클래스에서 해당 메서드를 사용할 수도 있습니다.


Object.getPrototypeOf(y);
Output
ƒ () { [native code] }

function과 class로 선언 된 코드는 [[Prototype]] 함수를 반환합니다. 프로토 타입을 사용하면 모든 함수가 new 키워드를 사용하여 생성자 인스턴스가 될 수 있습니다.

const x = function() {}

// Initialize a constructor from a function
const constructorFromFunction = new x();

console.log(constructorFromFunction);
Output
x {} constructor: ƒ ()

이것은 class에도 적용됩니다.

const y = class {}

// Initialize a constructor from a class
const constructorFromClass = new y();

console.log(constructorFromClass);
Output
y {} constructor: class

이 프로토 타입 생성자 예제는 그렇지 않으면 비어 있지만 구문 아래에서 두 방법이 동일한 결과를 얻는 방법을 알 수 있습니다.


클래스 정의 


프로토 타입 및 상속 튜토리얼에서는 텍스트 기반 롤 플레잉 게임에서 캐릭터 생성에 관한 예제를 만들었습니다. 이 예제를 계속 진행하여 구문을 함수에서 클래스로 업데이트하십시오.


생성자 함수는 함수 자체를 참조하여 이 속성으로 할당되는 여러 매개 변수로 초기화됩니다. 식별자의 첫 글자는 규칙에 따라 대문자로 표기됩니다.

// Initializing a constructor function
function Hero(name, level) {
    this.name = name;
    this.level = level;
}

이것을 아래와 같이 클래스 구문으로 변환하면 매우 유사하게 구성되어 있음을 알 수 있습니다.


// Initializing a class definition
class Hero {
    constructor(name, level) {
        this.name = name;
        this.level = level;
    }
}

우리는 생성자 함수가 이니셜 라이저의 첫 글자 (선택적임)의 대문자를 사용하고 구문에 익숙해 져서 객체 설계도라는 것을 알고 있습니다. class 키워드는 우리 함수의 목적을 보다 간단한 방식으로 전달합니다.


초기화 구문의 유일한 차이점은 함수 대신 클래스 키워드를 사용하고 constructor() 메서드 내에 속성을 할당하는 것입니다.


정의 방법 


생성자 함수를 사용하는 일반적인 방법은 아래 greet() 메서드에서 볼 수 있듯이 초기화 대신 메서드를 프로토 타입에 직접 할당하는 것입니다.

function Hero(name, level) {
    this.name = name;
    this.level = level;
}

// Adding a method to the constructor
Hero.prototype.greet = function() {
    return `${this.name} says hello.`;
}

클래스를 사용하면 이 구문이 단순화되고 메소드를 클래스에 직접 추가 할 수 있습니다. ES6에 도입 된 메소드 정의 속기를 사용하여 메소드를 정의하는 것이 훨씬 간결한 프로세스입니다.

class Hero {
    constructor(name, level) {
        this.name = name;
        this.level = level;
    }

    // Adding a method to the constructor
    greet() {
        return `${this.name} says hello.`;
    }
}

이러한 속성과 방법을 살펴 보겠습니다. 새 키워드를 사용하여 새로운 Hero 인스턴스를 만들고 일부 값을 할당합니다.

const hero1 = new Hero('Varg', 1);

console.log(hero1)을 사용하여 새 객체에 대한 자세한 정보를 인쇄하면 클래스 초기화에서 발생하는 일에 대한 자세한 내용을 볼 수 있습니다.

Output
Hero {name: "Varg", level: 1} __proto__: ▶ constructor: class Hero ▶ greet: ƒ greet()

출력에서 constructor() 및 greet() 함수가 hero1 객체의 메서드가 아니라 hero1의 __proto__ 또는 [[Prototype]]에 적용되었음을 알 수 있습니다. 생성자 함수를 만들 때 이것은 분명하지만 클래스를 만드는 동안 분명하지 않습니다. 클래스는보다 단순하고 간결한 구문을 허용하지만 프로세스에서 일부 명확성을 희생합니다.


Extending a Class 


생성자 함수와 클래스의 장점은 부모를 기반으로 새로운 객체 설계도로 확장 될 수 있다는 것입니다. 이렇게 하면 유사하지만 추가 기능이나 특정 기능이 필요한 객체에 대한 코드 반복을 방지 할 수 있습니다.


call() 메소드를 사용하여 상위에서 새 생성자 함수를 작성할 수 있습니다. 아래 예에서는 Mage라는 보다 구체적인 캐릭터 클래스를 만들고 call()을 사용하여 속성을 추가하고 속성을 추가합니다.


// Creating a new constructor from the parent
function Mage(name, level, spell) {
    // Chain constructor with call
    Hero.call(this, name, level);

    this.spell = spell;
}

이제 Hero와 동일한 속성과 추가 한 새로운 속성을 사용하여 새로운 Mage 인스턴스를 만들 수 있습니다.

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

hero2를 콘솔에 보내면 생성자를 기반으로 새로운 마법사를 만들었습니다.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"} __proto__: ▶ constructor: ƒ Mage(name, level, spell)

ES6 클래스에서는 상위 키워드가 호출 대신 상위 기능에 액세스하는 데 사용됩니다. 부모 클래스를 참조하기 위해 extends를 사용할 것입니다.


// Creating a new class from the parent
class Mage extends Hero {
    constructor(name, level, spell) {
        // Chain constructor with super
        super(name, level);

        // Add a new property
        this.spell = spell;
    }
}

이제 동일한 방식으로 새로운 Mage 인스턴스를 만들 수 있습니다.

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

우리는 hero2를 콘솔에 출력하고 출력을 볼 것입니다.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"} __proto__: Hero ▶ constructor: class Mage

클래스 구성에서 [[Prototype]]이 부모 (이 경우 Hero)에 연결되어 있다는 점을 제외하면 결과는 거의 동일합니다.


아래는 전체 초기화 프로세스, 메소드 추가 및 생성자 함수 및 클래스의 상속 프로세스를 나란히 비교 한 것입니다.

function Hero(name, level) {
    this.name = name;
    this.level = level;
}

// Adding a method to the constructor
Hero.prototype.greet = function() {
    return `${this.name} says hello.`;
}

// Creating a new constructor from the parent
function Mage(name, level, spell) {
    // Chain constructor with call
    Hero.call(this, name, level);

    this.spell = spell;
}
// Initializing a class
class Hero {
    constructor(name, level) {
        this.name = name;
        this.level = level;
    }

    // Adding a method to the constructor
    greet() {
        return `${this.name} says hello.`;
    }
}

// Creating a new class from the parent
class Mage extends Hero {
    constructor(name, level, spell) {
        // Chain constructor with super
        super(name, level);

        // Add a new property
        this.spell = spell;
    }
}

구문은 상당히 다르지만 기본 결과는 두 방법간에 거의 동일합니다. 클래스는 오브젝트 블루 프린트를 생성하는 보다 간결한 방법을 제공하며 생성자 함수는 후드에서 발생하는 상황을 보다 정확하게 설명합니다.


결론 


이 튜토리얼에서는 JavaScript 생성자 함수와 ES6 클래스의 유사점과 차이점에 대해 배웠습니다. 클래스와 생성자 모두 객체 지향 상속 모델을 프로토 타입 기반 상속 언어 인 JavaScript로 모방합니다.


효과적인 JavaScript 개발자가 되기 위해서는 프로토 타입 상속을 이해하는 것이 무엇보다 중요합니다. React와 같은 널리 사용되는 JavaScript 라이브러리는 클래스 구문을 자주 사용하므로 클래스에 익숙해지는 것이 매우 유용합니다.


  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 35회 ]  작성일19-10-28 16:34

웹학교