JavaScript 클래스의 정적 메서드 및 속성

JavaScript 클래스는 ES6에서 가장 논의되는 특징 중 하나입니다.류의 두 가지 재미있는 특성은 정적 방법과 속성이다.이 강좌에서 정적 방법과 속성이 무엇인지, 그리고 그것이 어떻게 작동하는지 이해할 수 있습니다.클래스 계승에 대한 지식과 정적 속성과 방법의 관계도 이해할 수 있습니다.

소개하다.

우리 기초부터 시작합시다.모든 정적 방법과 속성은 static 키워드로 시작해야 합니다.이것은 JavaScript에 이 키워드 뒤에 있는 메서드나 속성을 static으로 정의해야 한다는 것을 알려줍니다.지금, 더 재미있는 문제.정적 방법과 속성은 공공 방법과 속성과 어떤 차이가 있습니까?
정적 방법과 공공 방법과 속성 간의 주요 차이는 두 가지가 있다.우선, 정적 방법을 호출하고 정적 속성에 접근할 수 있으며, instantiate class 정의할 필요가 없습니다.그 다음으로 이러한 방법을 정의하는 클래스의 실례에서 이 방법을 호출하고 이 속성에 접근할 수 없다.
JavaScript 개발자는 일반적으로 실용 함수와 실용 속성 같은 정적 방법과 속성을 사용합니다.예를 들어, 정적 방법으로 방법을 만들 수 있습니다. 이 방법은 클래스의 두 가지 실례를 비교하는 데 도움을 줄 것입니다.정적 속성을 사용하여 할 수 있는 일은 어떤 종류가 얼마나 많은 실례를 가지고 있는지 통계하는 것이다.
주의: 하나의 클래스에 정의된 모든 방법은 기본적으로public로 정의됩니다.이것은 모든 실례가 그것들에 접근할 수 있다는 것을 의미한다.이것 또한 당신이 모든 실례에서 그것들을 상향 조정할 수 있다는 것을 의미한다.그러나 그것들을 실례화하지 않으면, 그것들을 정의하는 클래스에서 호출할 수 없다.

정적 방법

현재 알고 있는 바와 같이 정적 방법을 만드는 것은 매우 빠르다.하나를 만들고 싶을 때 두 가지 방법으로 만들 수 있다.우선, 새로운 종류를 만들고 그 중에서 새로운 방법을 정의할 수 있습니다.이 동작을 실행할 때 방법 앞에 static 키워드를 붙여야 합니다.이것은 방법을 정태적으로 정의할 것이다.

// Create new class
class MyClass {
  // Create static method
  static myStaticMethod() {
    console.log('Call from myStaticMethod.')
  }

  // Create public method
  myPublicMethod() {
    console.log('Call from myPublicMethod.')
  }
}

// Try to call static method "myStaticMethod" on "MyClass"
MyClass.myStaticMethod()
// Output:
// 'Call from myStaticMethod.'

너는 또 다른 일을 할 수 있다.새 클래스를 만들 수 있습니다.그리고 클래스 이외에 점 표현법을 사용하여 클래스에 새로운 방법을 추가할 수 있다.이 예에서는 static 키워드를 사용할 필요가 없습니다.이 방법은 자동으로 정태로 바뀔 것이다.

// Create new class
class MyClass {}

// Add new static method to "MyClass"
MyClass.myStaticMethod = function() {
  console.log('Call from myStaticMethod.')
}

// Try to call static method "myStaticMethod" on "MyClass"
MyClass.myStaticMethod()
// Output:
// 'Call from myStaticMethod.'

정적 방법 및 클래스 인스턴스

정태적인 방법으로 말하자면, 한 가지 일을 기억해 주십시오.이 방법들은 그것들을 정의하는 클래스에서만 호출할 수 있다.클래스의 인스턴스를 만들고 인스턴스에 정적 메서드를 호출하려고 하면 JavaScript는 TypeError로 돌아갑니다.한 클래스에서 퍼블릭 방법을 먼저 실례화하지 않고 사용하려고 하면 같은 상황이 발생할 수 있습니다.

// Create class
class MyClass {
  // Add new static method to "MyClass"
  static myStaticMethod() {
    console.log('Call from myStaticMethod.')
  }

  // Create public method
  myPublicMethod() {
    console.log('Call from myPublicMethod.')
  }
}

// Try to call static method "myStaticMethod" on "MyClass"
MyClass.myStaticMethod()
// Output:
// 'Call from myStaticMethod.'

// Try to call public method "myPublicMethod" on "MyClass"
MyClass.myPublicMethod()
// Output:
// TypeError: MyClass.myPublicMethod is not a function


// Create instance of "MyClass"
const myClassInstance = new MyClass()

// Try to call static method "myStaticMethod" on "myClassInstance"
myClassInstance.myStaticMethod()
// Output:
// TypeError: myClassInstance.myStaticMethod is not a function

// Try to call public method "myPublicMethod" on "myClassInstance"
myClassInstance.myPublicMethod()
// Output:
// 'Call from myPublicMethod.'

정적 방법과 이거.

클래스에서 정적 방법을 정의할 때 값this은 항상 클래스 자체입니다.정적 방법은 실례에서 접근할 수 없기 때문에 this 수시로 바뀔 수 있으니 걱정하지 마십시오.

// Create class
class MyClass {
  static myStaticMethod () {
    console.log(this)
    console.log(this === MyClass)
  }
}

// Try to call static method "myStaticMethod" on "MyClass"
MyClass.myStaticMethod()
// Output:
// [Function: MyClass]
// true

정적 특성

네가 정적 방법을 가질 수 있는 것처럼 너도 정적 속성을 가질 수 있다.정적 속성의 작업 방식은 정적 방법과 유사하다.너는 두 가지 방식으로 그것들을 정의할 수 있다.우선, 직접 교실에서.이 경우 속성 앞에 static 키워드를 붙여야 합니다.점 기호를 사용하여 클래스 외부에서 속성을 정의할 수도 있습니다.

// Create class
class MyClass {
  // Define static property
  static myStaticProperty = 'Hello'
}

// Or, define static property outside the class
MyClass.myStaticPropertyTwo = 'World'

// Try to access static property "myStaticProperty" on "MyClass"
console.log(MyClass.myStaticProperty)
// Output:
// 'Hello'

// Try to access static property "myStaticPropertyTwo" on "MyClass"
console.log(MyClass.myStaticPropertyTwo)
// Output:
// 'World'

정적 속성 및 클래스 인스턴스

정적 속성은 클래스 내에서만 접근할 수 있습니다.그것들은 이 종류의 실례에 대해 볼 수 없다.클래스 인스턴스에서 정적 속성에 액세스하려는 경우 JavaScript가 반환undefined됩니다.

// Create class
class MyClass {
  // Create static property
  static myStaticProperty = 'Hello'
}

// Try to access static property "myStaticProperty" on "MyClass"
console.log(MyClass.myStaticProperty)
// Output:
// 'Hello'


// Create instance of "MyClass"
const myClassInstance = new MyClass()

// Try to access static property "myStaticProperty" on "myClassInstance"
console.log(myClassInstance.myStaticProperty)
// Output:
// undefined

방법에서 정적 속성 액세스

우리가 토론한 바와 같이 정적 속성은 클래스 실례에서 접근할 수 없습니다.또한 JavaScript에서는 클래스를 먼저 인스턴스화하지 않고 클래스에 대해 공개 메서드를 호출할 수 없습니다.이것은 퍼블릭 방법으로 클래스에 접근할 수도 없고, 실례의 정적 속성에 접근할 수도 없다는 것을 의미합니다.
이것은 우리에게 두 가지 접근 클래스의 정적 속성을 제공하는 방법을 제공했다.첫 번째는 정태법이다.이것은 일리가 있는 것이다.너는 하나의 방법이 필요하다. 너는 그것의 실례가 아닌 종류를 직접 호출할 수 있다.정적 방법만이 이 조건을 만족시킬 수 있다.따라서 정적 속성에 접근하는 방법의 하나는 정적 방법을 사용하는 것이다.

// Create class
class MyClass {
  // Create static property
  static myStaticPropertyOne = 'Hello'

  // Create static method
  static updateStaticProp() {
    // Update "myStaticPropertyOne"
    this.myStaticPropertyOne = 'Bye'
  }

  // Create public method
  myPublicMethod() {
    // Try to update "myStaticPropertyOne"
    this.myStaticPropertyOne = 'Come again?'
  }
}

// Log the value of "myStaticPropertyOne"
console.log(MyClass.myStaticPropertyOne)
// Output:
// 'Hello'

// Call static method "updateStaticProp" to change "myStaticPropertyOne"
MyClass.updateStaticProp()

// Log the value of "myStaticPropertyOne" again
console.log(MyClass.myStaticPropertyOne)
// Output:
// 'Bye'


// Create instance of "MyClass"
const myClassInstance = new MyClass()

// Call "myPublicMethod" on "myClassInstance" to change "myStaticPropertyOne"
// This will NOT work
myClassInstance.myPublicMethod()

// Log the value of "myStaticPropertyOne" again
console.log(MyClass.myStaticPropertyOne)
// Output:
// 'Bye'

// Log the value of "myStaticPropertyOne" again
console.log(MyClass.myStaticPropertyOne)
// Output:
// 'Bye'

두 번째 옵션은 사용 클래스constructor method입니다.구조 함수는 클래스를 만들 때마다 호출되는 특수한 방법이다.공통 방법과 달리 이 특수 방법은 정적 속성에 접근할 수 있습니다.정적 속성을 자동으로 업데이트하려면 constructor 좋은 선택이 될 수 있습니다.
정적 속성에 액세스하려면 constructor를 사용합니다.그것을 사용할 때, 클래스 이름으로 정적 속성에 접근해야 합니다. this구조 함수 중this은 클래스 자체가 아니라 현재의 실례를 가리킨다.그래서 사용this은 instance.property처럼 사용하지 않는다class.property.

// Create class
class MyClass {
  // Create another static property
  static myStaticPropertyOne = 0

  // Create constructor method
  constructor() {
    // Update "myStaticPropertyOne" when new instance
    // of "MyClass" class is created
    // Notice we are using the name of the class, "MyClass",
    // not "this" to access the "myStaticPropertyOne"
    MyClass.myStaticPropertyOne += 1

    // NOTE:
    // This will NOT work
    // this here refers to specific instance of "MyClass"
    // not "MyClass" class itself
    // this.myStaticPropertyOne += 1
  }
}

// Log the value of "myStaticPropertyOne"
console.log(MyClass.myStaticPropertyOne)
// Output:
// 0


// Create instance of "MyClass"
const myClassInstanceOne = new MyClass()

// Log the value of "myStaticPropertyOne"
console.log(MyClass.myStaticPropertyOne)
// Output:
// 1


// Create another instance of "MyClass"
const myClassInstanceTwo = new MyClass()

// Log the value of "myStaticPropertyOne"
console.log(MyClass.myStaticPropertyOne)
// Output:
// 2

이외에도 정적 속성에 직접 접근할 수 있다는 것을 기억하십시오.클래스 이름, 속성 이름, 점 기호를 사용하여 이 점을 실현할 수 있습니다.

class MyClass {
  // Create another static property
  static myStaticProperty = 'Hello'
}

// Access the "myStaticProperty"
console.log(MyClass.myStaticProperty)
// Output:
// 'Hello'

정적 속성, 방법 및 클래스 상속

정적 속성과 방법은 클래스 실례에 보이지 않으며 접근할 수 없습니다.하위 클래스나 하위 클래스에 대해서는 그렇지 않습니다.정적 속성이나 방법을 가진 클래스가 있다고 가정하십시오.다음에 우리는 이 종류를 자류로 나누기로 결정했다.이 클래스를 extend 다른 클래스에 사용하기로 결정했습니다.
만약 이렇게 한다면, 모든 이 하위 클래스도 초류나 부류의 모든 정적 속성과 방법을 계승할 것이다.이것은 이 하위 클래스의 정적 속성과 방법에 접근할 수 있음을 의미합니다.그러나 정적 속성과 방법은 여전히 접근할 수 없습니다. 예를 들어 이 하위 클래스와 같습니다.

class MyClass {
  // Create another static property
  static myStaticProperty = 'Hello'
}


// Create subclass of "MyClass"
class MyClassSubclassOne extends MyClass {}

// Try to access the "myStaticProperty" on "MyClassSubclassOne"
console.log(MyClassSubclassOne.myStaticProperty)
// Output:
// 'Hello'


// Create another subclass of "MyClass"
class MyClassSubclassTwo extends MyClass {}

// Try to access the "myStaticProperty" also on "MyClassSubclassTwo"
console.log(MyClassSubclassOne.myStaticProperty)
// Output:
// 'Hello'


// Create instance of "MyClassSubclassOne"
const MyClassSubclassOneInstance = new MyClassSubclassTwo()

// Try to access the "myStaticProperty" on "MyClassSubclassOneInstance"
console.log(MyClassSubclassOneInstance.myStaticProperty)
// Output:
// undefined


// Create instance of "MyClassSubclassTwo"
const myClassSubclassTwoInstance = new MyClassSubclassTwo()

// Try to access the "myStaticProperty" on "myClassSubclassTwoInstance"
console.log(myClassSubclassTwoInstance.myStaticProperty)
// Output:
// undefined

정적 속성, 방법과 클래스 계승을 해석했다

이렇게 한 것은prototypal inheritance 때문이고, 더 구체적인 이유는Prototype property 때문이다.새 클래스를 만들 때, 클래스가 있습니다 [[Prototype]].예를 들어 새 클래스'MyClass'를 만들 때 이 클래스의 원형은'MyClass'가 됩니다.이 클래스를 사용하여 다른 클래스를 확장하면 하위 클래스를 만들 때 어떤 일이 일어납니까?
이 클래스를 사용하여 다른 클래스를 확장할 때, 이 새 클래스의 원형은 초클래스 원형을 인용합니다."MyClass"클래스의 원형은 "MyClass"를 참조합니다.하위 클래스의 등록 정보나 메서드에 액세스하려고 하면 JavaScript에서 먼저 해당 하위 클래스에서 해당 등록 정보나 메서드를 찾습니다.
하위 클래스에서 속성이나 방법을 찾으면 접근합니다.만약 하위 클래스가 원형이 아니라면, 그것이 무엇인지 보십시오.그리고 원형, 초류, 부류를 연구하여 이 부류를 확장하는 데 사용할 것입니다.만약 그것이 슈퍼클래스에서 속성이나 방법을 찾게 된다면, 그것은 거기에서 그것을 방문할 것이다.

class MyClass {
  // Create another static property
  static myStaticProperty = 'Hello'
}


// Create subclass of "MyClass"
class MyClassSubclassOne extends MyClass {}

// Check if prototype of "MyClassSubclassOne" is "MyClass"
console.log(MyClassSubclassOne.__proto__ === MyClass)
// Output:
// true

// Log the prototype of "MyClassSubclassOne"
console.log(MyClassSubclassOne.__proto__)
// Output:
// [Function: MyClass] { myStaticProperty: 'Hello' }


// Create another subclass of "MyClass"
class MyClassSubclassTwo extends MyClass {}

// Check if prototype of "MyClassSubclassTwo" is "MyClass"
console.log(MyClassSubclassTwo.__proto__ === MyClass)
// Output:
// true

// Log the prototype of "MyClassSubclassOne"
console.log(MyClassSubclassTwo.__proto__)
// Output:
// [Function: MyClass] { myStaticProperty: 'Hello' }

한 가지 방법은 모든 초류와 자류가 하나의 체인으로 연결되어 있다고 상상하는 것이다.이 사슬은 원형 유전이다.한쪽은 자류이고, 다른 한쪽은 초류다.하위 클래스에 존재하지 않는 속성이나 메서드에 액세스하려고 하면 JavaScript는 체인을 따라 연결된 수퍼 클래스로 이동합니다.
그것이 여행할 때, 그것은 두 가지 일을 할 것이다.우선, 연결된 슈퍼클래스에 요청한 속성이나 방법이 있는지 확인합니다.만약 그것이 존재하지 않는다면, 그것은 두 번째 일을 할 것이다.그것은 다른 슈퍼클래스에 연결된 다른 체인을 찾을 것이다.만약 그것이 발견된다면, 그것은 다시 여행할 것이다.그렇지 않으면 이 속성이나 방법이 존재하지 않는다는 것을 알려 줍니다.

class MyClass {
  // Create another static property
  static myStaticProperty = 'Hello'
}


// Create subclass of "MyClass"
// "MyClassSubclass" will now be connected to "MyClass"
class MyClassSubclass extends MyClass {}


// Create subclass of "MyClassSubclass"
// "MyClassSubSubclass" will now be connected to "MyClassSubclass"
class MyClassSubSubclass extends MyClassSubclass {}


// Create subclass of "MyClassSubSubclass"
// "MyClassSubSubSubclass" will now be connected to "MyClassSubSubclass"
class MyClassSubSubSubclass extends MyClassSubSubclass {}


// Create subclass of "MyClassSubSubSubclass"
// "MyClassSubSubSubSubclass" will now be connected to "MyClassSubSubSubclass"
class MyClassSubSubSubSubclass extends MyClassSubSubSubclass {}


// The prototypal chain looks like:
// MyClassSubSubSubclass -> MyClassSubSubclass -> MyClassSubclass -> MyClass


// Try to access "myStaticProperty" on "MyClassSubSubSubSubclass"
console.log(MyClassSubSubSubSubclass.myStaticProperty)
// Output:
// 'Hello'


// Translated to how JavaScript travels
// along the chain of prototypes:
console.log(MyClassSubSubSubSubclass.__proto__.__proto__.__proto__.__proto__.myStaticProperty)
// Output:
// 'Hello'


// Notes:
// from left to right:
// The first __proto__ is "MyClassSubSubSubclass"
// The second __proto__ is "MyClassSubSubclass"
// The third __proto__ is "MyClassSubclass"
// The fourth and last __proto__ is "MyClass"

// So, this:
console.log(MyClassSubSubSubSubclass.__proto__.__proto__.__proto__.__proto__.myStaticProperty)

// Will end up as, theoretically speaking:
// Only if the "myStaticProperty" exists on "MyClass"
// Otherwise, JavaScript can stop with any other superclass
// or return undefined if the property doesn't exist on ony class in the chain
console.log(MyClass.myStaticProperty)

결론: JavaScript 클래스의 정적 메서드 및 속성

정적 속성과 방법은 보기만 해도 두려울 수 있다.그것들을 공공 속성과 방법과 혼동하기 쉽다.이런 상황이 발생할 때, 작용하지 않는 방식으로 그것들을 사용하기 쉽다.나는 이 강좌가 당신이 정적 속성과 방법이 무엇인지, 그들이 어떻게 일을 하는지, 그리고 그것을 어떻게 사용하는지 이해하는 데 도움을 줄 수 있기를 바랍니다.
[xyz ihs snippet = "댓글 감사합니다"]