2nd/10_Wiki/Topic_JavaScript/JavaScript_Class_Inheritance.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
javascript-class-inheritance	JavaScript Class Inheritance	Frontend	draft	conceptual		extends super getters and setters class hoisting subclass		B	0.89	2026-06-23	2026-06-23			javascript js web frontend w3schools classes inheritance oop	https://www.w3schools.com/js/js_class_inheritance.asp

JavaScript Class Inheritance

🎯 한 줄 통찰 (One-line insight)

Use extends to make one class inherit all methods of another and super() to reach the parent's constructor; classes also support get/set accessors and, unlike functions, are not hoisted. [S1]

🧠 핵심 개념 (Core concepts)

• extends for inheritance — a class created with extends acquires all methods from another class. [S1]
• super() references the parent — calling super() in the constructor accesses parent properties and methods. [S1]
• Inheritance aids reuse — inheritance is useful for code reusability. [S1]
• Getters and setters — classes support get and set keywords for special property handling. [S1]
• Getter access has no parentheses — even though the getter is a method, you do not use parentheses to get the property value. [S1]
• Classes are not hoisted — unlike functions, classes must be declared before use. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Subclass = extends + super(...) — pass parent constructor arguments through super(), then add subclass-specific state. [S1]
• Underscore backing field for accessors — store the value in _carname and expose it via get carname() / set carname(x) to avoid name collision with the accessor. [S1]
• Declare before use — because classes aren't hoisted, place the declaration ahead of any new. [S1]

📖 세부 내용 (Details)

Class Inheritance To create class inheritance, use the extends keyword; the subclass acquires all methods of the parent. super() refers to the parent class, and calling it in the constructor accesses parent properties and methods. Inheritance is useful for code reusability: [S1]

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

Getters and Setters Classes support getters and setters using the get and set keywords: [S1]

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}

const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;

Note: Even if the getter is a method, you do not use parentheses when you want to get the property value. [S1]

Using an underscore backing field so the accessor name matches the property: [S1]

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}

const myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;

Using the setter to change the value: [S1]

class Car {
  constructor(brand) {
    this._carname = brand;
  }
  get carname() {
    return this._carname;
  }
  set carname(x) {
    this._carname = x;
  }
}

const myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;

Hoisting Class declarations are not hoisted; classes must be declared before use: [S1]

//You cannot use the class yet.
//myCar = new Car("Ford") will raise an error.

class Car {
  constructor(brand) {
    this.carname = brand;
  }
}

//Now you can use the class:
const myCar = new Car("Ford")

For other declarations, like functions, you will NOT get an error when you try to use it before it is declared, because the default behavior of JavaScript declarations is hoisting. [S1]

🛠️ 적용 사례 (Applied in summary)

The Car / Model pair is the running applied example for extends and super(); the _carname accessor examples demonstrate getters/setters, and the hoisting snippet shows the declare-before-use requirement. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Subclass with extends and super() (language: JavaScript):

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

Getter/setter with an underscore backing field:

get carname() { return this._carname; }
set carname(x) { this._carname = x; }

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.89
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: JavaScript Tutorial
• 관련 개념: JavaScript Classes, JavaScript Class Static, JavaScript Objects, JavaScript Object Accessors
• 참조 맥락: Builds on JavaScript Classes by adding inheritance (extends/super), accessors, and hoisting behavior.

📚 출처 (Sources)

• [S1] W3Schools — JavaScript Class Inheritance — https://www.w3schools.com/js/js_class_inheritance.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript Class Inheritance" page (Astra wiki-curation, P-Reinforce v3.1 format).