JavaScript 구문 당류

나의 지난 문장에서

JavaScript 객체에 사용되는 getter 및 setter...어떻게

존슨 오구루・ 2018년 5월 13일・ 2분 읽기

#javascript #tutorial #programming

우리는 자바스크립트의 대상에 응용되는 getter와setter를 연구했습니다. 저는 Es6 클래스에서 getter를 어떻게 사용하는지 보여주겠다고 약속한 것을 기억합니다. 우리는 클래스에 대한 지식을 많이 배울 것입니다.
첫 번째나는 다른 방식으로 그들을 이야기하지 않을 것이다.코드를 작성할 때, getter가 코드에서 어떻게 사용되는지 보여 드리겠습니다.
교과 과정
그것들은 대부분의 개발자들이 유사한 대상을 신속하게 생성하는 데 사용하는 도구이다.

let dog = {
            name: "lucky",
            breed: "American Bulldog.",
            age: 2

          }

위의 코드는 우리가 이미 알고 있는 것처럼 보인다.지금 상상해 보세요. 당신은 개 탁아소를 가지고 탁아소에 속하는 모든 개의 목록을 만들고 싶습니다. 탁아소에 가입한 모든 개에게 위의 문법을 사용하는 것이 아니라 탁아소에 속하는 모든 개의 목록을 만들고 싶습니다. 이것은 의심할 여지없이 매우 번거롭습니다. 우리는 objects을 만들어서 새로운 개 대상을 만드는 모델로 삼을 수 있습니다.특정 개를 위해 작성한 코드를 다시 쓰는 것은 당신의 정력을 절약할 수 있기 때문에, 클래스는 중복 코드와 디버깅 시간을 줄이는 좋은 방법이라고 확신할 수 있습니다.
클래스 구문:

class Dog{
    constructor(){

    }
    method1(){

    }
    method2(){

    }

}

아하...내 머릿속에 문제가 하나 있는데, 무엇이 구조 함수입니까?...하지만 나도 공감한다. 우리 잠깐 얘기 좀 하자.또한 상기 예시의 방법은 우리가 알고 있는 일반 함수이지만, 클래스에서 작성할 때, 그것들은 방법이라고 불리며, 작성할 때 Dog class 키워드가 없다는 것을 주의해야 한다.
시공자
대상과 클래스 사이에 존재하는 현저한 차이는 클래스에서 사용하는 것이다function.JavaScript는 클래스의 새 인스턴스를 만들 때마다 구조 함수 방법을 호출합니다.

class Dog{
    constructor(name,breed){
        this.name = name;
        this.breed = breed;
    }
    method1(){

    }
    method2(){

    }
    get method3(){

    }

}

constructors 방법에서 우리는 constructor() 키워드를 사용한다.클래스의 상하문this에서 이 클래스의 실례를 가리킨다.
그럼, 무엇이 실례입니까?
인스턴스는 클래스의 속성 이름과 방법을 포함하는 객체이지만 고유한 속성 값이 있습니다.
방법이 무엇입니까?
클래스this와 methods 문법은 대상의 문법과 같지만 방법 사이에 쉼표를 포함할 수 없습니다.그러나 우리가 이런 방법을 어떻게 부르는지;
메서드 호출:
방법을 호출하기 전에 클래스의 실례를 만들고 변수에 분배합니다.

const lucky = new Dog('lucky','American Bulldog');

실례적으로 호출하는 방법과 getter의 문법은 대상에 호출하는 방법과 getter의 문법과 같고, 방법은 실례 뒤에 문장을 붙인 다음에 속성이나 방법명을 붙인다.방법에 대해서는 왼쪽 괄호와 오른쪽 괄호를 포함해야 한다.그러나 성취감이 있는 사람에게는 그럴 필요가 없다.아래의 예에서 우리는 이 점을 보여줄 것이다.

lucky.method1() //when we are calling methods
lucky.method3 //when we are calling getters, no parenthesis

다음은 클래스, 구조 함수와 방법 호출의 완전한 예이다.

class Dog{
    constructor(name,breed){
        this._name = name; //when we are using getter and setters we add underscore to our properties.
        this._breed = breed;
        this._behaviour = 0;
    }
    get name(){
        return this._name;
    }
    get breed(){
        return this._breed;
    }
    get behaviour(){
        return this._behaviour;
    }
    incrementBehaviour(){
        this._behaviour++;
    }
}

let lucky = new Dog('lucky','American Bulldog');
console.log(lucky.name)//returns the dogs name
console.log(lucky.breed)//returns the dogs breed
console.log(lucky.behaviour)//return the value of behaviour
lucky.incrementBehaviour(); //increases the count for the behaviour property
console.log(lucky.behaviour)//returns the new value after incrementing.

그러나 만약에 당신의 일탁센터가 성장하기 시작한다면 우리는 다른 애완동물, 예를 들어 고양이 등을 받아들이기 시작할 것입니다. 우리는 그들 모두를 위해 다른 과정을 만들 수 있습니까?

class Cat{
    constructor(name,breed){
        this._name = name; //when we are using getter and setters we add underscore to our properties.
        this._breed = breed;
        this._behaviour = 0;
    }
    get name(){
        return this._name;
    }
    get breed(){
        return this._breed;
    }
    get behaviour(){
        return this._behaviour;
    }
    incrementBehaviour(){
        this._behaviour++;
    }
}

let kitty = new Dog('Kiity','American Bulldog');
console.log(kitty.name)//returns the dogs name
console.log(kitty.breed)//returns the dogs breed
console.log(kitty.behaviour)//return the value of behaviour
kitty.incrementBehaviour(); //increases the count for the behaviour property
console.log(kitty.behaviour)//returns the new value after incrementing.

이것은 우리가 코드를 중복한다는 것을 의미한다. 이것은 우리가 처음에 피한 것이지만, 우리가 이 문제를 어떻게 해결하는지, 이것이 바로 우리가 Es6류에서 계승이라는 개념을 사용하는 곳이다.
상속:
여러 클래스가 속성이나 방법을 공유할 때 그들은 후보가 된다getter.개발자는 작성해야 할 코드의 양을 줄이는 도구를 사용한다.
계승을 통해 inheritanceparent classSuper Class공유된 여러 속성과 방법을 만들 수 있습니다.child classes 부류로부터 속성과 방법을 계승한다.

우리의 예시에서 우리는 부류sub classes를 만들어야 한다. 다른 류child classes와 Animal는 그 중에서 계승될 것이다.

class Animal{
    constructor(name,breed){
        this._name = name; //when we are using getter and setters we add underscore to our properties.
        this._breed = breed;
        this._behaviour = 0;
    }
    get name(){
        return this._name;
    }
    get breed(){
        return this._breed;
    }
    get behaviour(){
        return this._behaviour;
    }
    incrementBehaviour(){
        this._behaviour++;
    }
}

현재 cat류를 생성하여 부류dog로부터 계승합니다.

class Dog extends Animal{
    constructor(name,breed,sound){
        super(name,breed);
        this._sound = sound;
    }
    get sound(){
        return this._sound;
    }
}

class Cat extends Animal{
    constructor(name,breed,size){
        super(name,breed);
        this._size = size;
    }
    get size(){
        return this._size;
    }
}

let lucky = new Dog('lucky','Caucasian','barks');
console.log(lucky.name); //logs lucky
console.log(lucky.breed); //logs caucasian
console.log(lucky.sound); //logs bark
console.log(lucky.behaviour); //logs current value
lucky.incrementBehaviour(); //increments behaviour
console.log(lucky.behaviour); //logs new value

let kitty = new Cat('kitty','dontknow','4kg');
console.log(kitty.name); //logs kitty
console.log(kitty.breed); //logs dontknow
console.log(kitty.size); //logs 4kg
console.log(kitty.behaviour); //logs current value
kitty.incrementBehaviour(); //increments behaviour
console.log(kitty.behaviour); //logs new value

위의 예에서 우리는 Dog류의 새로운 종류Animal류를 만들었고 우리의 새로운 키워드extends와Animal에 특히 주의하도록 했다.

Extends 키워드는 동물류의 방법을cat이나dog류에서 사용할 수 있도록 합니다.

새로운 고양이나 개 대상을 만들 때 호출되는 구조 함수는 세 개의 매개 변수(명칭, 품종, 소리 또는 크기)를 받아들인다.

슈퍼 키워드는 부류의 구조 함수를 호출합니다.이런 상황에서 extendscat류의 새로운 파라미터를 animal류의 구조 함수에 전달한다.동물구조기가 그것을 운행할 때, 그것은 각각 super 와 super(name,breed) = this._name 과 this._breed 을 설정한다.새로운 고양이나 개에 대한 예.

name과breed는 각각dog와cat 특유의 새로운 속성이기 때문에 우리는 구조 함수에 그것을 설정했다.

주:
호출 sound 을 하기 전에, 우리는 JavaScript의 인용 오류를 피하기 위해 함수의 첫 번째 줄 호출 size 을 구성합니다.
클래스 성명에서 super 를 호출할 때, 모든 부모 방법은 하위 클래스에 사용할 수 있습니다.
요약:

this 객체의 템플릿

클래스의 새 인스턴스를 만들 때 JavaScript는 구조 함수 방법을 호출합니다.