Javascript류에 대해서 아셔야 할 모든 것들.

본문은 최초로 발표되었다Javascript classes
클래스는 대상을 대상으로 프로그래밍하는 기본 개념으로 많은 프로그래밍 언어에서 사용되지만 자바스크립트에서는 그렇지 않습니다.ECMAScript 2015(ES6) 이전까지 JS에는 클래스가 존재하지 않았습니다.2015년에 갱신류가 기존의 원형 계승 모델인 문법당이 도입되었다.유형과 계승은 더욱 편안하고 읽을 수 있는 문법을 가져왔다.
Javascript의 클래스는 함수의 유형이지만 function 키워드로 초기화하는 것이 아니라 Class 키워드를 사용합니다.
본문에서 나는 종류가 무엇인지, 그리고 그것을 어떻게 사용하는지 소개하려고 한다.다음과 같이 설명합니다.

정의 클래스

구조 방법

정의 방법

확장 클래스 및 하이퍼키워드

명수와 세터.

우리 시작합시다!
* 코드 실행 상태를 확인하려면 브라우저에서 콘솔을 열고 코드를 실행해 보십시오. (Google Chrome을 사용하는 경우 페이지를 마우스 오른쪽 단추로 클릭하고 조사를 선택하십시오.)

1. 클래스 정의

하나의 클래스를 정의하려면,class 키워드로부터 시작해서, 그 클래스의 이름과 그 다음에, 이름 뒤에 큰 괄호를 붙여야 한다.다음에 정의된 클래스에 분배된 속성의 구조 함수를 설정하여 클래스를 초기화할 때마다 호출합니다.코드 예제를 살펴보겠습니다.

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

위의 코드 예시에서, 구조 함수를 사용하여 클래스 Person을 정의했고,name과age 속성을 설정했습니다.이 클래스를 초기화하려면, 새로운 키워드와 클래스 이름을 사용해야 합니다. 이 클래스와 같은 매개 변수는 대상과 함께 작업해야 합니다.코드 예제를 살펴보겠습니다.

var person = new Person('Peter', 25);

위 코드에서, 우리는 두 개의 매개 변수인name=Peter와age=25로 하나의 종류를 초기화하여 변수인person에 분배합니다.
특히 클래스는 함수임에도 불구하고 이런 상황에서 끌어올릴 수 없다.이것은 모든 종류를 먼저 정의한 다음에 초기화해야 한다는 것을 의미한다.그렇지 않으면 참조 오류가 발생합니다.그 밖에 클래스의 코드가'엄격한 모드'에 있다는 것을 기억하는 것이 좋다.그것은 더 많은 오류를 던지고 입력 오류나 문법 오류를 피하는 데 도움을 줄 것이다.

2. 구조 방법

클래스를 정의할 때, 우리는 구조 함수를 사용했다.이제 자바스크립트 클래스의 구조 함수가 무엇인지 설명해 봅시다.이것은 클래스를 정의할 때 반드시 클래스에 포함해야 하는 방법이며, 속성을 클래스의 범위에 분배하는 방법이다.구조 함수는 새로운 키워드가 있어야만 일을 할 수 있다.이것은 우리가 위의 예처럼 이 종류를 초기화하면 구조 함수가 초기화된다는 것을 의미한다.그 밖에 모든 종류는 하나의 구조 함수만 사용할 수 있다.클래스에 구조 함수를 추가하지 않으면 Javascript에서 빈 구조 함수를 사용하여 이 동작을 수행합니다: constructor () {}

3. 방법 정의

클래스 내부에서 우리는 구조 함수와 다른 방법을 정의할 수 있다.코드의 모양을 살펴보겠습니다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  introduceYourself() {
    return 'Hello, my name is ' + this.name;
  }
}
var person = new Person('Mark', 30);
person.introduceYourself(); // returns 'Hello, my name is Mark'

위의 예에서, 나는 Person 클래스에서 새로운 방법을 만들었는데, 이름은Introduction Yourself이다.이 방법은 이게 필요해.문자열의 이름을 지정하고 반환합니다.보시다시피, 창설 방법은 함수를 만드는 것과 유사하지만, function 키워드를 사용하지 않습니다.코드 예시에서, 당신은 이 방법을 어떻게 호출하는지 볼 수 있습니다.
클래스에서 정적 방법을 만들 수도 있습니다.다른 점은 정적 방법은 클래스에서만 접근할 수 있고 클래스가 만든 대상에서만 접근할 수 없다는 것이다.코드 예제를 살펴보고 정적 방법을 정의하는 방법에 대해 알아보겠습니다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  static howAreYou() {
    return 'I am okay, and you?';
  }
}
Person.howAreYou(); // returns 'I am okay, and you?';
var person = new Person('Mark', 30);
person.howAreYou(); // returns an error

클래스가 우리가 정의한 방법이 정적이어야 한다는 것을 알기 위해서, 방법 정의의 시작에static 키워드를 추가해야 합니다.그 다음에 대상을 만들려고 하면 오류가 발생하고, 클래스에서 직접 접근하면 됩니다. 결과는 예상대로 됩니다.

4. 확장 클래스 및 하이퍼키워드

때때로, 우리는 이 종류를 복제하고 새로운 방법이나 파라미터를 추가하기를 희망한다.이런 상황에서 확장 클래스는 매우 편리하다.우리는 부류의 모든 특성에 접근할 수 있고, 새로운 기능도 추가할 수 있다.부모 클래스에서 하위 클래스를 만들기 위해서 extend 키워드를 사용합니다.예제에서 어떻게 작동하는지 살펴보겠습니다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  yourAge() {
    return 'I am ' + this.age;
  }
}
class Kid extends Person {
  howOldAreYou() {
    return super.yourAge() + '. I am a child';
  }
  isAdult() {
    if (this.age >= 18) {
      return true;
    } else {
      return false;
    }
  }
}
var child = new Kid('Mary', 12);
child.howOldAreYou(); // returns 'I am 12. I am a child';
child.isAdult(); // returns false;

위 코드에서, 우리는 Person 클래스를 Kid 클래스로 확장하고, Kid 클래스 howOldAreYou () 에서 yourAge () 방법을 사용합니다. 이 방법은 슈퍼 키워드와 함께 사용합니다. 이 키워드는child 클래스에서 부모 방법을 사용합니다.그리고 이 속성은age isAdult () 함수의 조건을 검사하는 데 사용됩니다.

5. 명수와 세터

클래스의 대상과 마찬가지로 Getter와setter를 사용할 수 있습니다.Getter는 get 키워드로 만들어졌으며 setter는 시작할 때 set 키워드로 만들어졌습니다.대상에게 값을 분배하기 전에 값을 검사하거나 수정하려면 Getter와setter를 사용하는 것이 좋습니다.코드가 어떻게 작동하는지 살펴보겠습니다.

class Person {
  constructor(name) {
    // setter is called
    this._name = name;
  }
  get name() {
    return this._name;
  }
  set name(value) {
    this._name = value;
  }
}
var newPerson = new Person('Mary');
newPerson.name; // returns 'Mary'
newPerson.name = 'Peter';
newPerson.name; // returns 'Peter'

위의 예시에서name 속성의 Getter와setter를 볼 수 있습니다.구조 함수에서 이name을 호출할 때 setter를 호출해서 이름을 설정합니다.Getter와 setter는 설정되거나 가져온 속성과 같은 이름을 가질 수 없습니다.또한 setter를 사용하여 새로운 속성 값을 설정하려면 괄호가 없는 setter를 속성처럼 사용하십시오.

결론

Javascript의 클래스 기능은 상대적으로 새롭지만 클래스의 기능은 원형 계승 모델과 구조 함수 등 줄곧 존재한다.지금은 문법이 더욱 우호적이고 깨끗하고 읽을 수 있는 코드를 만들기 쉽다.본고에서 저는 자바스크립트 클래스에 대한 가장 중요한 정보를 소개했습니다. 정의 클래스부터 구조 함수와 방법, 확장 클래스를 통해 Getter와setter를 사용합니다.나는 본고의 지식이 자바스크립트의 클래스 사용법을 분명히 하고 클래스 문법으로 코드를 실현하는 데 도움을 줄 수 있기를 바랍니다.나는 유형의 실현은 개발자에게 매우 편리하다고 생각하지만, 그것 없이도 같은 기능을 실현할 수 있다.
읽어주셔서 감사합니다.
둠리에서 온 안나