구문 설탕이 아닌 클래스

지난 블로그 게시물에서 클래스와 청사진을 사용하여 객체를 더 쉽게 만드는 방법에 대해 살펴보았습니다. class 키워드는 ES2015/ES6에 도입되었으며 클래스는 거의 구문론적 설탕일 뿐 그 이상도 아니라는 일반적인 오해가 있습니다. 클래스는 객체 지향 프로그래밍의 핵심 기초입니다. 이 블로그 게시물의 목표는 오해를 풀고 클래스가 new 키워드와 쌍을 이루는 함수와 어떻게 약간 다른지 보여 주는 것입니다.

수업은 무엇을 하나요?

class EmployeeRecord {
    name = "New User";
    id = 0;

    constructor(firstName, lastName, id) {
        this.name = `${firstName} ${lastName}`;
        this.id = id;
    }

    reverseName() {
        return this.name.split("").reverse().join("");
    }
}

const employee1 = new EmployeeRecord("Parwinder", "Bhagat", 1);
const employee2 = new EmployeeRecord("Lauren", "L", 2);

console.log(employee1.name); // Parwinder Bhagat
console.log(employee2.name); // Lauren L
console.log(employee1.reverseName()); // tagahB redniwraP

위의 class 예에서:

후드 아래에 EmployeeRecord라는 함수가 생성됩니다. 함수 본문은 클래스의 생성자로 구성됩니다. 생성자가 없으면 함수 본문이 비어 있습니다.

모든 클래스 메소드는 EmployeeRecord 의 프로토타입에 저장됩니다.

그 논리로 우리는 클래스나 class 키워드를 사용하지 않고 위의 클래스를 다시 작성할 수 있습니다.

function EmployeeRecord(firstName, lastName, id) {
    this.name = `${firstName} ${lastName}`;
    this.id = id;
}

EmployeeRecord.prototype.reverseName = function () {
    return this.name.split("").reverse().join("");
}

let employee1 = new EmployeeRecord("Parwinder", "Bhagat", 1);
const employee2 = new EmployeeRecord("Lauren", "L", 2);

console.log(employee1.name); // Parwinder Bhagat
console.log(employee2.name); // Lauren L
console.log(employee1.reverseName()); // tagahB redniwraP

결과는 동일하며 여기에서 class 구문 설탕이 유래합니다.

수업은 어떻게 다른가요?

클래스에 할당된 특정 함수 종류가 있으며 클래스를 인스턴스화할 때마다 가장 중요하게 여러 위치에서 확인됩니다.

class EmployeeRecord {
    constructor() { }
}

console.log(typeof EmployeeRecord); // function
EmployeeRecord(); // Value of type 'typeof EmployeeRecord' is not callable. Did you mean to include 'new'?

기능 상속은 프로토타입을 사용하여 작동합니다. 클래스는 extends 키워드로 더 깔끔한 구문을 사용하여 동일한 작업을 수행합니다.

class Person {
    sayName() {
        console.log("My name is Person");
    }

    sayAge() {
        console.log("I am 30 years old."); // I am 30 years old.
    }
}

class Employee extends Person {
    sayDepartment() {
        console.log("I work for the tech department."); // I work for the tech department.
    }

    sayHello() {
        console.log("Hi, I am the new employee"); // Hi, I am the new employee
    }
}

let employee = new Employee;

employee.sayHello();
employee.sayAge();
employee.sayDepartment();

console.log(employee instanceof Person); // true
console.log(employee instanceof Employee); // true

함수 선언은 호이스팅되지만 클래스 선언은 호이스팅되지 않습니다!

const employee = new Employee(); // ReferenceError or Employee is not a constructor

class Employee {
    constructor() {}
}

클래스는 항상 엄격 모드에서 실행됩니다. 클래스 내의 모든 코드는 자동으로 엄격 모드에 있습니다.

함수 감속 및 표현식은 var와 유사하므로 재정의할 수 있지만 클래스는 재정의되지 않습니다. 그것들은 let 및 const 키워드와 같으며, let은 범위 내에서 동일한 이름을 가진 여러 선언을 허용하지 않습니다.

개체는 해당 개체를 반복할 때 표시되지 않는 (열거 불가능한) 속성을 가질 수 있습니다. 클래스 메서드는 열거할 수 없으며 열거 가능한 속성이 false로 설정되어 있습니다. for..in를 사용하여 클래스의 객체를 반복하면 메서드를 얻을 수 없습니다.