객체 지향 JavaScript — 클래스 기본 사항

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

JavaScript는 부분적으로 객체 지향 언어입니다.

JavaScript를 배우려면 JavaScript의 객체 지향 부분을 배워야 합니다.

이 기사에서는 클래스의 기본 사항을 살펴보겠습니다.

클래스

ES6은 객체를 더 쉽게 생성하는 데 도움이 되는 많은 유용한 기능을 제공합니다.

Java와 같은 클래스 기반 언어에 익숙하다면 JavaScript 클래스도 친숙해 보일 것입니다.

그러나 JavaScript 클래스는 프로토타입 상속 모델에 비해 구문상의 설탕입니다.

ES6 이전에는 생성자만 만들 수 있었습니다.

function Person(name) {
  if (!(this instanceof Person)) {
    throw new Error("Person is a constructor");
  }
  this.name = name;
};

Person.prototype.eat = function() {
  //...
};

Person 인스턴스 속성이 있는 this.name 압축 프로그램이 있습니다.

그리고 Person.prototype.eat는 인스턴스 메소드입니다.

그런 다음 다음과 같이 작성하여 Person 생성자에서 상속하는 자식 생성자를 만들 수 있습니다.

function Employee(name, job) {
  if (!(this instanceof Employee)) {
    throw new Error("Employee is a constructor");
  }
  Person.call(this, name);
  this.job = job;
};

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;
Employee.prototype.work = function() {
  // ...
};

Employee 인수로 Person 생성자를 호출하는 name 생성자를 만듭니다.

그런 다음 this.job를 job로 설정합니다.

그런 다음 Employee 를 사용하여 Object.create 의 프로토타입을 생성합니다.
Person.prototype를 인수로 사용하여 Object.create 메서드를 사용했기 때문에 Person.prototype의 속성을 상속합니다.

그런 다음 메서드를 만들고 생성자를 Employee로 설정할 수 있으므로 instanceof 인스턴스에서 Employee를 사용하면 true가 반환됩니다.

클래스 구문을 사용하면 삶을 훨씬 쉽게 만들 수 있습니다.

class Person {
  constructor(name) {
    this.name = name;
  }

  eat() {
    //...
  }
}

class Employee extends Person {
  constructor(name, job) {
    super(name);
    this.job = job;
  }

  work() {
    //...
  }
}

Person 클래스를 생성합니다.
constructor 메서드에는 생성자 함수 자체에 있던 것이 있습니다.

프로토타입 메서드는 클래스에 있습니다.

자식 클래스를 생성하기 위해 extends 키워드를 사용한 다음 super를 호출하여 Person 생성자를 호출합니다.

그런 다음 work 인스턴스 메서드가 있습니다.
eat 메서드는 Person 인스턴스에서도 상속됩니다.

클래스 정의

class 키워드로 클래스를 정의할 수 있습니다.

Java 또는 C#과 같은 클래스 기반 언어와 매우 유사합니다.

예를 들어 다음과 같이 작성할 수 있습니다.

class Car {
  constructor(model, year) {
    this.model = model;
    this.year = year;
  }
}

Car 클래스는 여전히 함수입니다.

그래서 우리가 기록한다면:

console.log(typeof Car);

'function'  .

클래스는 일반 함수와 다릅니다.

그들은 게양되지 않습니다.

일반 함수는 범위 내 어디에서나 선언할 수 있으며 사용할 수 있습니다.

그러나 클래스는 정의된 경우에만 액세스할 수 있습니다.

그래서 우리는 다음과 같이 쓸 수 없습니다.

const toyota = new Car();
class Car {}

참조 오류가 발생하기 때문입니다.

Uncaught ReferenceError: Cannot access 'Car' before initialization

클래스의 구성원을 구분할 때 쉼표를 사용할 수 없지만 세미콜론을 추가할 수 있습니다.

그래서 우리는 다음과 같이 쓸 수 없습니다.

class C {
  member,
  method() {}
}

구문 오류가 발생합니다.

그러나 우리는 다음과 같이 쓸 수 있습니다.

class C {
  method2() {};
}

결론

클래스 구문을 사용하면 생성자를 더 쉽게 만들 수 있습니다.
extends 와 super 로 상속을 할 수 있습니다.