JavaScript의 Super () 란 무엇입니까?
JavaScript에서 super()
이해 :이 안내서는 부모 수업에서 상속하는 데 중점을 둔 JavaScript의 super()
키워드를 탐구합니다. JavaScript의 클래스 시스템은 프로토 타입 상속을 기반으로 구축되지만 super()
친숙한 클래스 기반 상속 구문을 제공합니다.
super()
키워드는 JavaScript에 고유하지 않습니다. Java 및 Python과 같은 언어는 참조 부모 클래스와 유사하게 사용합니다. 그러나 JavaScript의 접근 방식은 다릅니다. 그것은 클래스 기반 상속 동작을 모방하기 위해 프로토 타입 상속을 활용합니다. Mozilla의 문서화는 JavaScript 클래스가 기존 프로토 타입 기반 상속에 대해 "구문 설탕"이라고 강조합니다.
코드 예제로 설명하겠습니다. Fish
(부모)와 Trout
(어린이)의 두 가지 수업을 고려하십시오. Fish
에는 속성 habitat
와 length
있습니다. Trout
Fish
확장하여 variety
속성을 추가합니다.
수업 물고기 { 생성자 (서식지, 길이) { this.habitat = 서식지; 길이 = 길이; } } 클래스 송어는 물고기를 확장합니다 { 생성자 (서식지, 길이, 다양성) { 슈퍼 (서식지, 길이); // 부모의 생성자를 호출합니다 this.variety = 다양성; } }
Trout
의 생성자에서는 super(habitat, length)
중요합니다. 그것은 Trout
대상의 맥락 내에 habitat
와 length
특성을 확립하여 Fish
의 생성자라고 부릅니다. super()
생략하면 참조 오류가 발생합니다. 이것은 super()
부모 클래스의 속성을 어린이 수업에 어떻게 통합하는지 보여줍니다.
중요하게도 JavaScript는 유연성을 제공합니다. 오류를 피하려면 super()
을 호출 해야 하지만 부모의 생성자가 기대하는 정확한 매개 변수를 전달할 필요는 없습니다. 대안 적으로 속성을 직접 할당 할 수 있습니다.
클래스 송어는 물고기를 확장합니다 { 생성자 (서식지, 길이, 다양성) { 감독자(); this.habitat = 서식지; 길이 = 길이; this.variety = 다양성; } }
이 접근법은 덜 명확하지만 동일한 결과를 달성합니다. 매개 변수가없는 super()
속성을 생성하지만 정의되지 않은 상태로 두어 후속 할당을 허용합니다. 이것은 Java와 같은 실제 클래스 상속 모델과의 주요 차이점을 강조합니다.
super()
또한 생성자를 넘어 확장됩니다. 상위 클래스 방법에 액세스 할 수 있습니다. 속성을 표시하기 위해 renderProperties
메소드를 추가하겠습니다.
수업 물고기 { RenderProperties (요소) { 요소 .innerhtml = json.stringify (this); } } 클래스 송어는 물고기를 확장합니다 { renderPropertieswithSuper (요소) { 요소 .className = "Green"; Super.renderproperties (요소); // 부모의 방법을 호출하십시오 } }
Trout
의 renderPropertiesWithSuper
Fish
의 renderProperties
재사용하여 추가 기능을 추가합니다. 이름 지정 ( renderPropertiesWithSuper
)은 의도적입니다. 부모의 방법을 덮어 쓰는 것을 피하여 두 가지 모두에 액세스 할 수 있습니다.
이 클래스 기반 구문은 본질적으로 편리하다는 점에 유의해야합니다. extends
및 super()
없이도 동일한 기능을 달성 할 수 있지만 직접 프로토 타입 조작과 관련된 더 복잡한 코드로 달성 할 수 있습니다. 이것은 "구문 설탕"개념을 강화합니다.
결론적으로, JavaScript 클래스는 프로토 타입 상속을 사용하는 동안 super()
가진 클래스와 같은 구조를 제공합니다. 프로토 타입 상속 기초와 함께이 뉘앙스를 이해하는 것은 JavaScript, 특히 React와 같은 프레임 워크에서 효과적으로 클래스를 사용하는 데 중요합니다.
위 내용은 JavaScript의 Super () 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











최근 Bitcoin의 가격이 20k 달러가 넘는 USD가 최근에 등반되면서 최근 30k를 끊었으므로 Ethereum을 만드는 데 깊이 다이빙을 할 가치가 있다고 생각했습니다.

개발자로서 어느 단계에 있든, 우리가 완료 한 작업은 크든 작든, 개인적이고 전문적인 성장에 큰 영향을 미칩니다.

그것은#039; VUE 팀에게 그것을 끝내는 것을 축하합니다. 나는 그것이 막대한 노력과 오랜 시간이라는 것을 알고 있습니다. 모든 새로운 문서도 있습니다.

나는 누군가이 매우 합법적 인 질문으로 글을 썼습니다. Lea는 브라우저에서 유효한 CSS 속성 자체를 얻는 방법에 대해 블로그를 작성했습니다. 이는 이와 같습니다.

다른 날, 나는 Corey Ginnivan의 웹 사이트에서 스크롤 할 때 카드 모음이 서로 쌓이는 것을 발견했습니다.

목표가 귀하의 사이트를 동시에 다른 크기로 표시하는 이러한 데스크탑 앱이 많이 있습니다. 예를 들어, 글을 쓸 수 있습니다
