자바스크립트 클래스. 2부

extends 키워드는 다른 클래스의 자식 역할을 하는 클래스를 만들기 위해 클래스 선언 및 표현식에 사용됩니다.

class x extends y {
}


여기서 x는 자식 클래스이고 y는 부모 클래스입니다. extend 키워드는 두 클래스 간의 링크 역할을 합니다.
extends 키워드는 클래스를 내장 객체 또는 하위 클래스(다른 클래스 내부의 클래스)에 연결할 수도 있습니다.

첫 번째 클래스는 부모 클래스나 내장 개체가 아닌 자식 클래스여야 합니다.

프로토타입 속성



상위 클래스 프로토타입 속성이 있는 모든 생성자는 상위 속성의 후보로 간주될 수 있습니다.

참고: 프로토타입은 객체이거나 null이 아니어야 합니다.

프로토타입은 JavaScript에서 기본적으로 모든 기능과 내장된 객체가 연결되어 있는 객체를 말하며 쉽게 접근하고 수정할 수 있지만 보이지는 않습니다.

슈퍼() 메소드



실생활에서 자식이 부모의 속성을 물려받는 것처럼 JavaScript에서 부모의 속성도 같은 방식으로 작동합니다.

이 경우 자식 클래스는 부모 클래스의 모든 메서드를 상속합니다.

JavaScript에서 상속이 필요한 이유는 무엇입니까?



코드 반복을 피하기 위해; 상속은 위에서 설명한 것처럼 클래스가 부모 클래스의 메서드를 상속하는 코드의 재사용성에 도움이 됩니다.

super() 메소드와 상속과의 관계



( https://cdn.hashnode.com/res/hashnode/image/upload/v1657913152909/DVSFDHQS1.png 정렬="왼쪽")

super() 메서드는 부모 클래스를 참조합니다. 부모의 속성 및 메서드에 액세스하는 데 도움이 됩니다. 간단히 말해서 상속을 가능하게 하는 데 도움이 됩니다.
자식 클래스 내에서 부모 클래스의 생성자를 호출하여 이를 수행합니다.

superKeyword는 속성에 액세스할 수 있습니다.


  • 개체에, 리터럴
  • 클래스 프로토타입
  • 수퍼클래스 생성자를 호출합니다.



  • super() 메서드와 extend 키워드는 코드에서 정확히 어떻게 작동합니까?




    <body>
    <p id="task"></p>
    <script>
    class Pride {
    constructor(lion) {
    this.name = lion;
    }
    method() { 
    return this.name + "is the king of the savannah and "
    }
    }
    
    // extend keyword
    
    class Cub extends Pride {
    constructor(lion, simba) {
    
    // Note: The super() method must be called before the ‘this’ keyword excluding the super() method or using it after the ‘.this’ keyword will result to a reference error
    super(lion); //refers to the parentClass
    this.cub = simba; 
    }
    answer(){
    return  this.method() + this.cub + " is his son " 
    }
    }
    
    theKing = new Cub("mufasa " , "simba");  
    document.getElementById("task").innerHTML = theKing.answer();
    </script>
    </body>
    </html>
    


    extend 키워드를 사용할 때 주의할 점


  • 오른쪽에서 생성자로 평가되는 모든 식을 사용할 수 있습니다.

  • // Y is the right-hand side in this case.
    
    x extends y {
    
    }
    


  • extends 키워드는 자식 클래스와 해당 프로토타입 모두에 대한 프로토타입을 설정합니다.
    여기서는 정적 속성과 프로토타입 속성의 상속을 허용합니다.
  • 배열, 날짜, 수학 및 문자열과 같은 미리 정의된 객체와 함께 확장을 사용할 수 있습니다.

  • JavaScript 클래스에 대한 전체 이해를 얻으려면 JavaScript classes에 대한 내 첫 번째 기사를 확인하십시오.

    좋은 웹페이지 즐겨찾기