ES6 클래스 소개

ES6에서 내가 가장 좋아하는 새로운 기능 중 하나는 클래스를 구현하는 새로운 방법입니다. 클래스를 인스턴스화하는 새로운 방법을 이해하려면 먼저 생성자와 프로토타입이 작동하는 방식을 이해해야 합니다. 이는 ES6 클래스가 구문 설탕이기 때문입니다. 당신은 생각할 수 있습니다 : 통사적 설탕이 정확히 무엇입니까?

음, Techopedia는 구문 설탕을 다음과 같이 정의합니다.

"a term for syntax changes in computer programming which make it easier for humans to code."

즉, 코드를 읽기 쉽고 이해하기 쉽게 만듭니다.

저에게 좋은 것 같습니다. 캔디 문법에 등록하세요!

프로토타입 및 생성자 설명

그렇다면 프로토타입은 무엇일까요? 간단히 말해서 프로토타입은 다른 개체가 공유 속성을 사용할 수 있도록 하는 개체입니다. 대부분의 개체는 개체의 인스턴스입니다. 혼란스럽게 들릴 수 있으므로 다음은 예입니다.

const student = {
name: 'A name',
lastName: 'A last name',
coder: true
}

console.log(student.valueOf()) // {name: 'A name', lastName: 'A last name', coder: true}

잠깐, .valueOf의 메서드가 학생 객체에 존재하지 않는 경우 어떻게 호출했습니까? 여기에서 프로토타입 체인이 작동합니다. 브라우저는 처음에 학생 개체에 valueOf라는 메서드가 있는지 확인합니다. 그렇지 않은 경우 상위 프로토타입을 찾고 이 경우에는 Object 클래스입니다. 개체에 valueOf 메서드가 없는 경우 콘솔에 undefined가 인쇄됩니다.

생성자는 어떻습니까?

생성자는 클래스의 인스턴스를 생성하는 함수입니다.

function User(name, email){
this.name = name
this.email = email
}

const UserA = new User('Sally' '[email protected]')
console.log(UserA) // User {name: 'Sally', email: '[email protected]'}

생성자가 호출될 때:

빈 개체가 생성됨

생성된 객체가 암시적으로 생성자의 값으로 반환됩니다. return 키워드가 사용되지 않습니다.

this 키워드는 새로 생성된 객체를 참조합니다.

상속, 프로토타입 및 생성자의 개념을 처음 접하고 위의 예를 본 후에도 여전히 혼란스러워하는 경우; Udemy 또는 coderwall을 사용하여 ES6 클래스가 작동하는 방식을 이해하는 데 매우 중요하므로 더 잘 알기 위해 사용하는 것이 좋습니다.


후드 아래에서 일어나는 일에 대해 충분히 알겠습니다.

ES6 클래스가 매우 훌륭하다고 생각하는 이유는 다음과 같습니다.

class 키워드

class 키워드는 선택한 이름으로 새 클래스를 만듭니다. 클래스를 선언할 때 대문자를 사용하는 것이 가장 좋습니다(예: class Student{} ). 이 기능이 마음에 드는 이유는 새 클래스를 생성한다고 명시적으로 명시되어 있기 때문입니다. 추측이나 두 번째 생각이 필요하지 않습니다.

Static 메서드

MDN은 정적 메서드를 "클래스를 인스턴스화하지 않고 호출되며 클래스가 인스턴스화될 때 호출할 수 없는 메서드로 정의합니다. 정적 메서드는 종종 응용 프로그램에 대한 유틸리티 함수를 만드는 데 사용됩니다."평신도의 관점에서 정적 메서드는 특정 개체에 저장된 데이터에 액세스할 수 없습니다. ES6를 사용하면 이제 부모 클래스에서 정적 메서드를 선언하고 하위 클래스에서도 사용할 수 있습니다.

Super 및 Extends 키워드

super 키워드는 두 가지 방법으로 사용할 수 있습니다.

함수: super는 하위 또는 하위 클래스에 전달된 매개변수를 사용하여 상위 클래스를 호출하는 함수로 사용할 수 있습니다. 이렇게 하면 하위 클래스가 사실상 상위 클래스instanceof가 됩니다.

객체로: super 키워드는 자식 클래스가 부모 클래스의 메서드를 명시적으로 호출할 수 있도록 객체로 사용할 수도 있습니다.

시작 방법

이것은 클래스가 ES6 이전에 선언되고 수정되는 방법입니다.

function Person(name, age){
this.name = name
this.grade = grade
}

Person.prototype.greeting = function(){
return 'Hi, my name is' + this.name + 'nice to meet you.'
}

Person.prototype.extraInfo = function(){
return 'I am' + this.age + 'and my favorite thing to do is...'
}

이러한 속성을 하위 클래스로 확장하려면 다음과 같습니다.

function Child(name, age){
   Person.call(this, name, age)
}

Child.prototype = Object.create(Person.protoype)
Child.prototype.constructor = Child;

Child.prototype.chores = function(){
return 'My name is' + this.name 'I am' + this.age +
'and I have to mop the floor, wash the dishes, and do the laundry'  
}

어떻게 지내요

이것이 클래스 인스턴스화 및 상속이 이제 보이는 방식입니다.

class Person {
 constructor(name, age){
   this.name = name
   this.age = age
}

greeting() {
  return `Hi my name is ${this.name}, nice to meet you!
}

extraInfo() {
  return `I am ${this.age} and my favorite thing to do is...`
}
}

class Child extends Person {
 constructor(name, age){
    super(name, age)
}

chores() {
  return `My name is ${this.name}, I am ${this.age} 
and I have to mop the floor, wash the dishes, and do the laundry`
}
}

const Mary = new Child('Mary', '7')
console.log(Amelia.greeting()) // Hi my name is Mary, nice to meet you

ES6 버전이 읽고 이해하기가 얼마나 쉬운지 보십니까?

It's important to note that the underlying functionality hasn't changed, but the new syntax provides a nice style to classes that make it much more readable and developer friendly.

이제 당신의 차례입니다

ES6 클래스 인스턴스화 패턴 및 기능을 사용해 보세요.
절대 돌아서지 않겠다고 약속합니다.