[{"data":1,"prerenderedAt":1424},["ShallowReactive",2],{"blog-\u002Fblog\u002Fjavascript-class-inheritance-extends-super":3},{"id":4,"title":5,"body":6,"description":1409,"difficulty":1410,"extension":1411,"framework":1412,"frameworkSlug":1413,"meta":1414,"navigation":124,"order":57,"path":1415,"qaPath":1416,"seo":1417,"stem":1418,"subtopic":1419,"topic":1420,"topicSlug":1421,"updated":1422,"__hash__":1423},"blog\u002Fblog\u002Fjavascript-class-inheritance-extends-super.md","JavaScript Class Inheritance — extends, super, and Method Overriding Explained",{"type":7,"value":8,"toc":1393},"minimark",[9,18,29,232,245,252,257,287,341,347,354,375,505,508,566,575,579,582,621,624,630,646,765,780,784,789,942,961,965,974,1061,1079,1083,1096,1201,1207,1211,1214,1304,1324,1328,1382,1389],[10,11,13,14],"h2",{"id":12},"inheritance-with-extends","Inheritance with ",[15,16,17],"code",{},"extends",[19,20,21,22,24,25,28],"p",{},"The ",[15,23,17],{}," keyword lets one class build on another, inheriting its methods and adding or\noverriding behavior. Under the hood it wires up the same prototype chain you'd construct by\nhand with constructor functions — but cleanly and correctly, removing the manual steps that\nused to cause bugs. If you've read how prototypal inheritance works, ",[15,26,27],{},"class ... extends"," is\nsimply the ergonomic, standardized version of it.",[30,31,36],"pre",{"className":32,"code":33,"language":34,"meta":35,"style":35},"language-js shiki shiki-themes github-light github-dark","class Animal {\n  constructor(name) { this.name = name }\n  speak() { return `${this.name} makes a sound` }\n}\n\nclass Dog extends Animal {\n  speak() { return `${this.name} barks` }   \u002F\u002F override\n}\n\nconst d = new Dog('Rex')\nd.speak()            \u002F\u002F 'Rex barks'\nd instanceof Animal  \u002F\u002F true\n","js","",[15,37,38,55,84,113,119,126,141,168,173,178,203,218],{"__ignoreMap":35},[39,40,43,47,51],"span",{"class":41,"line":42},"line",1,[39,44,46],{"class":45},"szBVR","class",[39,48,50],{"class":49},"sScJk"," Animal",[39,52,54],{"class":53},"sVt8B"," {\n",[39,56,58,61,64,68,71,75,78,81],{"class":41,"line":57},2,[39,59,60],{"class":45},"  constructor",[39,62,63],{"class":53},"(",[39,65,67],{"class":66},"s4XuR","name",[39,69,70],{"class":53},") { ",[39,72,74],{"class":73},"sj4cs","this",[39,76,77],{"class":53},".name ",[39,79,80],{"class":45},"=",[39,82,83],{"class":53}," name }\n",[39,85,87,90,93,96,100,102,105,107,110],{"class":41,"line":86},3,[39,88,89],{"class":49},"  speak",[39,91,92],{"class":53},"() { ",[39,94,95],{"class":45},"return",[39,97,99],{"class":98},"sZZnC"," `${",[39,101,74],{"class":73},[39,103,104],{"class":98},".",[39,106,67],{"class":53},[39,108,109],{"class":98},"} makes a sound`",[39,111,112],{"class":53}," }\n",[39,114,116],{"class":41,"line":115},4,[39,117,118],{"class":53},"}\n",[39,120,122],{"class":41,"line":121},5,[39,123,125],{"emptyLinePlaceholder":124},true,"\n",[39,127,129,131,134,137,139],{"class":41,"line":128},6,[39,130,46],{"class":45},[39,132,133],{"class":49}," Dog",[39,135,136],{"class":45}," extends",[39,138,50],{"class":49},[39,140,54],{"class":53},[39,142,144,146,148,150,152,154,156,158,161,164],{"class":41,"line":143},7,[39,145,89],{"class":49},[39,147,92],{"class":53},[39,149,95],{"class":45},[39,151,99],{"class":98},[39,153,74],{"class":73},[39,155,104],{"class":98},[39,157,67],{"class":53},[39,159,160],{"class":98},"} barks`",[39,162,163],{"class":53}," }   ",[39,165,167],{"class":166},"sJ8bj","\u002F\u002F override\n",[39,169,171],{"class":41,"line":170},8,[39,172,118],{"class":53},[39,174,176],{"class":41,"line":175},9,[39,177,125],{"emptyLinePlaceholder":124},[39,179,181,184,187,190,193,195,197,200],{"class":41,"line":180},10,[39,182,183],{"class":45},"const",[39,185,186],{"class":73}," d",[39,188,189],{"class":45}," =",[39,191,192],{"class":45}," new",[39,194,133],{"class":49},[39,196,63],{"class":53},[39,198,199],{"class":98},"'Rex'",[39,201,202],{"class":53},")\n",[39,204,206,209,212,215],{"class":41,"line":205},11,[39,207,208],{"class":53},"d.",[39,210,211],{"class":49},"speak",[39,213,214],{"class":53},"()            ",[39,216,217],{"class":166},"\u002F\u002F 'Rex barks'\n",[39,219,221,224,227,229],{"class":41,"line":220},12,[39,222,223],{"class":53},"d ",[39,225,226],{"class":45},"instanceof",[39,228,50],{"class":49},[39,230,231],{"class":166},"  \u002F\u002F true\n",[19,233,234,237,238,241,242,104],{},[15,235,236],{},"Dog"," inherits ",[15,239,240],{},"Animal","'s constructor behavior and any methods it doesn't override. The\nchain is ",[15,243,244],{},"d -> Dog.prototype -> Animal.prototype -> Object.prototype -> null",[10,246,248,249,251],{"id":247},"what-extends-sets-up","What ",[15,250,17],{}," sets up",[19,253,254,256],{},[15,255,17],{}," does two pieces of prototype wiring that you'd otherwise write manually:",[258,259,260,277],"ul",{},[261,262,263,264,268,269,272,273,276],"li",{},"It links the ",[265,266,267],"strong",{},"instance"," chain: ",[15,270,271],{},"Dog.prototype","'s prototype becomes ",[15,274,275],{},"Animal.prototype",",\nso instances inherit instance methods.",[261,278,263,279,268,282,272,284,286],{},[265,280,281],{},"static",[15,283,236],{},[15,285,240],{},", so static methods are\ninherited too (more on that below).",[30,288,290],{"className":32,"code":289,"language":34,"meta":35,"style":35},"Object.getPrototypeOf(Dog.prototype) === Animal.prototype   \u002F\u002F true (instance methods)\nObject.getPrototypeOf(Dog) === Animal                       \u002F\u002F true (static methods)\n",[15,291,292,324],{"__ignoreMap":35},[39,293,294,297,300,302,304,306,309,312,315,317,319,321],{"class":41,"line":42},[39,295,296],{"class":53},"Object.",[39,298,299],{"class":49},"getPrototypeOf",[39,301,63],{"class":53},[39,303,236],{"class":73},[39,305,104],{"class":53},[39,307,308],{"class":73},"prototype",[39,310,311],{"class":53},") ",[39,313,314],{"class":45},"===",[39,316,50],{"class":73},[39,318,104],{"class":53},[39,320,308],{"class":73},[39,322,323],{"class":166},"   \u002F\u002F true (instance methods)\n",[39,325,326,328,330,333,335,338],{"class":41,"line":57},[39,327,296],{"class":53},[39,329,299],{"class":49},[39,331,332],{"class":53},"(Dog) ",[39,334,314],{"class":45},[39,336,337],{"class":53}," Animal                       ",[39,339,340],{"class":166},"\u002F\u002F true (static methods)\n",[19,342,343,344,346],{},"This dual linkage is something the old constructor pattern handled awkwardly; ",[15,345,17],{}," does\nboth correctly every time.",[10,348,350,353],{"id":349},"super-in-the-constructor",[15,351,352],{},"super"," in the constructor",[19,355,356,357,360,361,364,365,367,368,371,372,374],{},"When a subclass defines its own constructor, it ",[265,358,359],{},"must"," call ",[15,362,363],{},"super(...)"," before using\n",[15,366,74],{},". ",[15,369,370],{},"super()"," invokes the parent constructor, which is what actually creates and\ninitializes ",[15,373,74],{}," for a derived class.",[30,376,378],{"className":32,"code":377,"language":34,"meta":35,"style":35},"class Animal {\n  constructor(name) { this.name = name }\n}\n\nclass Dog extends Animal {\n  constructor(name, breed) {\n    super(name)          \u002F\u002F must come first\n    this.breed = breed   \u002F\u002F now `this` is available\n  }\n}\n\nnew Dog('Rex', 'Lab')   \u002F\u002F { name: 'Rex', breed: 'Lab' }\n",[15,379,380,388,406,410,414,426,443,454,470,475,479,483],{"__ignoreMap":35},[39,381,382,384,386],{"class":41,"line":42},[39,383,46],{"class":45},[39,385,50],{"class":49},[39,387,54],{"class":53},[39,389,390,392,394,396,398,400,402,404],{"class":41,"line":57},[39,391,60],{"class":45},[39,393,63],{"class":53},[39,395,67],{"class":66},[39,397,70],{"class":53},[39,399,74],{"class":73},[39,401,77],{"class":53},[39,403,80],{"class":45},[39,405,83],{"class":53},[39,407,408],{"class":41,"line":86},[39,409,118],{"class":53},[39,411,412],{"class":41,"line":115},[39,413,125],{"emptyLinePlaceholder":124},[39,415,416,418,420,422,424],{"class":41,"line":121},[39,417,46],{"class":45},[39,419,133],{"class":49},[39,421,136],{"class":45},[39,423,50],{"class":49},[39,425,54],{"class":53},[39,427,428,430,432,434,437,440],{"class":41,"line":128},[39,429,60],{"class":45},[39,431,63],{"class":53},[39,433,67],{"class":66},[39,435,436],{"class":53},", ",[39,438,439],{"class":66},"breed",[39,441,442],{"class":53},") {\n",[39,444,445,448,451],{"class":41,"line":143},[39,446,447],{"class":73},"    super",[39,449,450],{"class":53},"(name)          ",[39,452,453],{"class":166},"\u002F\u002F must come first\n",[39,455,456,459,462,464,467],{"class":41,"line":170},[39,457,458],{"class":73},"    this",[39,460,461],{"class":53},".breed ",[39,463,80],{"class":45},[39,465,466],{"class":53}," breed   ",[39,468,469],{"class":166},"\u002F\u002F now `this` is available\n",[39,471,472],{"class":41,"line":175},[39,473,474],{"class":53},"  }\n",[39,476,477],{"class":41,"line":180},[39,478,118],{"class":53},[39,480,481],{"class":41,"line":205},[39,482,125],{"emptyLinePlaceholder":124},[39,484,485,488,490,492,494,496,499,502],{"class":41,"line":220},[39,486,487],{"class":45},"new",[39,489,133],{"class":49},[39,491,63],{"class":53},[39,493,199],{"class":98},[39,495,436],{"class":53},[39,497,498],{"class":98},"'Lab'",[39,500,501],{"class":53},")   ",[39,503,504],{"class":166},"\u002F\u002F { name: 'Rex', breed: 'Lab' }\n",[19,506,507],{},"The ordering rule is strict and enforced:",[30,509,511],{"className":32,"code":510,"language":34,"meta":35,"style":35},"class Bad extends Animal {\n  constructor(name) {\n    this.x = 1    \u002F\u002F ReferenceError — `this` before super()\n    super(name)\n  }\n}\n",[15,512,513,526,536,551,558,562],{"__ignoreMap":35},[39,514,515,517,520,522,524],{"class":41,"line":42},[39,516,46],{"class":45},[39,518,519],{"class":49}," Bad",[39,521,136],{"class":45},[39,523,50],{"class":49},[39,525,54],{"class":53},[39,527,528,530,532,534],{"class":41,"line":57},[39,529,60],{"class":45},[39,531,63],{"class":53},[39,533,67],{"class":66},[39,535,442],{"class":53},[39,537,538,540,543,545,548],{"class":41,"line":86},[39,539,458],{"class":73},[39,541,542],{"class":53},".x ",[39,544,80],{"class":45},[39,546,547],{"class":73}," 1",[39,549,550],{"class":166},"    \u002F\u002F ReferenceError — `this` before super()\n",[39,552,553,555],{"class":41,"line":115},[39,554,447],{"class":73},[39,556,557],{"class":53},"(name)\n",[39,559,560],{"class":41,"line":121},[39,561,474],{"class":53},[39,563,564],{"class":41,"line":128},[39,565,118],{"class":53},[19,567,568,569,571,572,574],{},"This is because, in a derived class, ",[15,570,74],{}," literally doesn't exist until the parent\nconstructor produces it. Always call ",[15,573,352],{}," first.",[10,576,578],{"id":577},"the-implicit-constructor","The implicit constructor",[19,580,581],{},"If a subclass doesn't define a constructor, JavaScript inserts a default one that forwards\nall arguments to the parent:",[30,583,585],{"className":32,"code":584,"language":34,"meta":35,"style":35},"class Cat extends Animal {}   \u002F\u002F implicitly: constructor(...args){ super(...args) }\nnew Cat('Whiskers').name      \u002F\u002F 'Whiskers' forwarded automatically\n",[15,586,587,604],{"__ignoreMap":35},[39,588,589,591,594,596,598,601],{"class":41,"line":42},[39,590,46],{"class":45},[39,592,593],{"class":49}," Cat",[39,595,136],{"class":45},[39,597,50],{"class":49},[39,599,600],{"class":53}," {}   ",[39,602,603],{"class":166},"\u002F\u002F implicitly: constructor(...args){ super(...args) }\n",[39,605,606,608,610,612,615,618],{"class":41,"line":57},[39,607,487],{"class":45},[39,609,593],{"class":49},[39,611,63],{"class":53},[39,613,614],{"class":98},"'Whiskers'",[39,616,617],{"class":53},").name      ",[39,619,620],{"class":166},"\u002F\u002F 'Whiskers' forwarded automatically\n",[19,622,623],{},"So you only need to write a constructor in the subclass when you want to add parameters or\nextra initialization. If you don't, inheritance \"just works.\"",[10,625,627,629],{"id":626},"super-in-methods",[15,628,352],{}," in methods",[19,631,632,633,636,637,640,641,645],{},"Inside a method, ",[15,634,635],{},"super.methodName()"," calls the parent's version of that method — the clean\nreplacement for the old ",[15,638,639],{},"Parent.prototype.method.call(this)"," idiom. This lets you ",[642,643,644],"em",{},"extend","\nrather than fully replace inherited behavior.",[30,647,649],{"className":32,"code":648,"language":34,"meta":35,"style":35},"class Animal {\n  describe() { return `I am ${this.name}` }\n}\n\nclass Dog extends Animal {\n  describe() {\n    return `${super.describe()} and I bark`   \u002F\u002F build on the parent\n  }\n}\n\nnew Dog('Rex').describe()   \u002F\u002F 'I am Rex and I bark'\n",[15,650,651,659,682,686,690,702,709,732,736,740,744],{"__ignoreMap":35},[39,652,653,655,657],{"class":41,"line":42},[39,654,46],{"class":45},[39,656,50],{"class":49},[39,658,54],{"class":53},[39,660,661,664,666,668,671,673,675,677,680],{"class":41,"line":57},[39,662,663],{"class":49},"  describe",[39,665,92],{"class":53},[39,667,95],{"class":45},[39,669,670],{"class":98}," `I am ${",[39,672,74],{"class":73},[39,674,104],{"class":98},[39,676,67],{"class":53},[39,678,679],{"class":98},"}`",[39,681,112],{"class":53},[39,683,684],{"class":41,"line":86},[39,685,118],{"class":53},[39,687,688],{"class":41,"line":115},[39,689,125],{"emptyLinePlaceholder":124},[39,691,692,694,696,698,700],{"class":41,"line":121},[39,693,46],{"class":45},[39,695,133],{"class":49},[39,697,136],{"class":45},[39,699,50],{"class":49},[39,701,54],{"class":53},[39,703,704,706],{"class":41,"line":128},[39,705,663],{"class":49},[39,707,708],{"class":53},"() {\n",[39,710,711,714,716,718,720,723,726,729],{"class":41,"line":143},[39,712,713],{"class":45},"    return",[39,715,99],{"class":98},[39,717,352],{"class":73},[39,719,104],{"class":98},[39,721,722],{"class":49},"describe",[39,724,725],{"class":98},"()",[39,727,728],{"class":98},"} and I bark`",[39,730,731],{"class":166},"   \u002F\u002F build on the parent\n",[39,733,734],{"class":41,"line":170},[39,735,474],{"class":53},[39,737,738],{"class":41,"line":175},[39,739,118],{"class":53},[39,741,742],{"class":41,"line":180},[39,743,125],{"emptyLinePlaceholder":124},[39,745,746,748,750,752,754,757,759,762],{"class":41,"line":205},[39,747,487],{"class":45},[39,749,133],{"class":49},[39,751,63],{"class":53},[39,753,199],{"class":98},[39,755,756],{"class":53},").",[39,758,722],{"class":49},[39,760,761],{"class":53},"()   ",[39,763,764],{"class":166},"\u002F\u002F 'I am Rex and I bark'\n",[19,766,767,769,770,772,773,776,777,779],{},[15,768,352],{}," in a method resolves to the parent prototype but keeps ",[15,771,74],{}," bound to the current\ninstance — so ",[15,774,775],{},"super.describe()"," runs ",[15,778,240],{},"'s method with the dog's data.",[10,781,783],{"id":782},"overriding-methods","Overriding methods",[19,785,786,787,104],{},"Overriding is just defining a method with the same name in the subclass; it shadows the\nparent's version for instances of the subclass. You can fully replace or partially extend\nwith ",[15,788,352],{},[30,790,792],{"className":32,"code":791,"language":34,"meta":35,"style":35},"class Shape {\n  area() { return 0 }\n  toString() { return `Shape with area ${this.area()}` }\n}\n\nclass Square extends Shape {\n  constructor(side) { super(); this.side = side }\n  area() { return this.side ** 2 }   \u002F\u002F override — toString() now uses THIS area()\n}\n\nnew Square(4).toString()   \u002F\u002F 'Shape with area 16' polymorphism\n",[15,793,794,803,817,842,846,850,863,889,913,917,921],{"__ignoreMap":35},[39,795,796,798,801],{"class":41,"line":42},[39,797,46],{"class":45},[39,799,800],{"class":49}," Shape",[39,802,54],{"class":53},[39,804,805,808,810,812,815],{"class":41,"line":57},[39,806,807],{"class":49},"  area",[39,809,92],{"class":53},[39,811,95],{"class":45},[39,813,814],{"class":73}," 0",[39,816,112],{"class":53},[39,818,819,822,824,826,829,831,833,836,838,840],{"class":41,"line":86},[39,820,821],{"class":49},"  toString",[39,823,92],{"class":53},[39,825,95],{"class":45},[39,827,828],{"class":98}," `Shape with area ${",[39,830,74],{"class":73},[39,832,104],{"class":98},[39,834,835],{"class":49},"area",[39,837,725],{"class":98},[39,839,679],{"class":98},[39,841,112],{"class":53},[39,843,844],{"class":41,"line":115},[39,845,118],{"class":53},[39,847,848],{"class":41,"line":121},[39,849,125],{"emptyLinePlaceholder":124},[39,851,852,854,857,859,861],{"class":41,"line":128},[39,853,46],{"class":45},[39,855,856],{"class":49}," Square",[39,858,136],{"class":45},[39,860,800],{"class":49},[39,862,54],{"class":53},[39,864,865,867,869,872,874,876,879,881,884,886],{"class":41,"line":143},[39,866,60],{"class":45},[39,868,63],{"class":53},[39,870,871],{"class":66},"side",[39,873,70],{"class":53},[39,875,352],{"class":73},[39,877,878],{"class":53},"(); ",[39,880,74],{"class":73},[39,882,883],{"class":53},".side ",[39,885,80],{"class":45},[39,887,888],{"class":53}," side }\n",[39,890,891,893,895,897,900,902,905,908,910],{"class":41,"line":170},[39,892,807],{"class":49},[39,894,92],{"class":53},[39,896,95],{"class":45},[39,898,899],{"class":73}," this",[39,901,883],{"class":53},[39,903,904],{"class":45},"**",[39,906,907],{"class":73}," 2",[39,909,163],{"class":53},[39,911,912],{"class":166},"\u002F\u002F override — toString() now uses THIS area()\n",[39,914,915],{"class":41,"line":175},[39,916,118],{"class":53},[39,918,919],{"class":41,"line":180},[39,920,125],{"emptyLinePlaceholder":124},[39,922,923,925,927,929,932,934,937,939],{"class":41,"line":205},[39,924,487],{"class":45},[39,926,856],{"class":49},[39,928,63],{"class":53},[39,930,931],{"class":73},"4",[39,933,756],{"class":53},[39,935,936],{"class":49},"toString",[39,938,761],{"class":53},[39,940,941],{"class":166},"\u002F\u002F 'Shape with area 16' polymorphism\n",[19,943,944,945,948,949,952,953,956,957,960],{},"Notice ",[15,946,947],{},"Shape.toString"," calls ",[15,950,951],{},"this.area()",", which resolves to ",[15,954,955],{},"Square","'s override — that's\n",[265,958,959],{},"polymorphism",": the inherited method automatically uses the subclass's behavior.",[10,962,964],{"id":963},"inheriting-static-methods","Inheriting static methods",[19,966,967,968,970,971,973],{},"Static methods are inherited too, thanks to the static side of the chain that ",[15,969,17],{}," sets\nup. A subclass can call its parent's static methods, and ",[15,972,352],{}," works in static methods as\nwell.",[30,975,977],{"className":32,"code":976,"language":34,"meta":35,"style":35},"class Model {\n  static create(data) { return new this(data) }   \u002F\u002F `this` is the calling class\n}\nclass User extends Model {}\n\nUser.create({ name: 'Ada' }) instanceof User   \u002F\u002F true `this` is User\n",[15,978,979,988,1015,1019,1033,1037],{"__ignoreMap":35},[39,980,981,983,986],{"class":41,"line":42},[39,982,46],{"class":45},[39,984,985],{"class":49}," Model",[39,987,54],{"class":53},[39,989,990,993,996,998,1001,1003,1005,1007,1009,1012],{"class":41,"line":57},[39,991,992],{"class":45},"  static",[39,994,995],{"class":49}," create",[39,997,63],{"class":53},[39,999,1000],{"class":66},"data",[39,1002,70],{"class":53},[39,1004,95],{"class":45},[39,1006,192],{"class":45},[39,1008,899],{"class":73},[39,1010,1011],{"class":53},"(data) }   ",[39,1013,1014],{"class":166},"\u002F\u002F `this` is the calling class\n",[39,1016,1017],{"class":41,"line":86},[39,1018,118],{"class":53},[39,1020,1021,1023,1026,1028,1030],{"class":41,"line":115},[39,1022,46],{"class":45},[39,1024,1025],{"class":49}," User",[39,1027,136],{"class":45},[39,1029,985],{"class":49},[39,1031,1032],{"class":53}," {}\n",[39,1034,1035],{"class":41,"line":121},[39,1036,125],{"emptyLinePlaceholder":124},[39,1038,1039,1042,1045,1048,1051,1054,1056,1058],{"class":41,"line":128},[39,1040,1041],{"class":53},"User.",[39,1043,1044],{"class":49},"create",[39,1046,1047],{"class":53},"({ name: ",[39,1049,1050],{"class":98},"'Ada'",[39,1052,1053],{"class":53}," }) ",[39,1055,226],{"class":45},[39,1057,1025],{"class":49},[39,1059,1060],{"class":166},"   \u002F\u002F true `this` is User\n",[19,1062,1063,1064,1066,1067,1070,1071,1074,1075,1078],{},"Because ",[15,1065,74],{}," in a static method is the class it was called on, ",[15,1068,1069],{},"Model.create"," builds a\n",[15,1072,1073],{},"User"," when invoked as ",[15,1076,1077],{},"User.create"," — a powerful pattern for factory methods.",[10,1080,1082],{"id":1081},"extending-built-ins","Extending built-ins",[19,1084,1085,1086,436,1089,1092,1093,104],{},"You can extend built-in classes like ",[15,1087,1088],{},"Array",[15,1090,1091],{},"Error",", or ",[15,1094,1095],{},"Map",[30,1097,1099],{"className":32,"code":1098,"language":34,"meta":35,"style":35},"class Stack extends Array {\n  peek() { return this[this.length - 1] }\n}\nconst s = new Stack()\ns.push(1, 2, 3)\ns.peek()   \u002F\u002F 3\n",[15,1100,1101,1115,1144,1148,1164,1189],{"__ignoreMap":35},[39,1102,1103,1105,1108,1110,1113],{"class":41,"line":42},[39,1104,46],{"class":45},[39,1106,1107],{"class":49}," Stack",[39,1109,136],{"class":45},[39,1111,1112],{"class":49}," Array",[39,1114,54],{"class":53},[39,1116,1117,1120,1122,1124,1126,1129,1131,1133,1136,1139,1141],{"class":41,"line":57},[39,1118,1119],{"class":49},"  peek",[39,1121,92],{"class":53},[39,1123,95],{"class":45},[39,1125,899],{"class":73},[39,1127,1128],{"class":53},"[",[39,1130,74],{"class":73},[39,1132,104],{"class":53},[39,1134,1135],{"class":73},"length",[39,1137,1138],{"class":45}," -",[39,1140,547],{"class":73},[39,1142,1143],{"class":53},"] }\n",[39,1145,1146],{"class":41,"line":86},[39,1147,118],{"class":53},[39,1149,1150,1152,1155,1157,1159,1161],{"class":41,"line":115},[39,1151,183],{"class":45},[39,1153,1154],{"class":73}," s",[39,1156,189],{"class":45},[39,1158,192],{"class":45},[39,1160,1107],{"class":49},[39,1162,1163],{"class":53},"()\n",[39,1165,1166,1169,1172,1174,1177,1179,1182,1184,1187],{"class":41,"line":121},[39,1167,1168],{"class":53},"s.",[39,1170,1171],{"class":49},"push",[39,1173,63],{"class":53},[39,1175,1176],{"class":73},"1",[39,1178,436],{"class":53},[39,1180,1181],{"class":73},"2",[39,1183,436],{"class":53},[39,1185,1186],{"class":73},"3",[39,1188,202],{"class":53},[39,1190,1191,1193,1196,1198],{"class":41,"line":128},[39,1192,1168],{"class":53},[39,1194,1195],{"class":49},"peek",[39,1197,761],{"class":53},[39,1199,1200],{"class":166},"\u002F\u002F 3\n",[19,1202,1203,1204,1206],{},"Custom ",[15,1205,1091],{}," subclasses are especially common for typed error handling. One caveat:\nextending some built-ins has historical quirks when transpiled to ES5, but in modern\nenvironments it works as expected.",[10,1208,1210],{"id":1209},"common-pitfalls","Common pitfalls",[19,1212,1213],{},"A few mistakes recur with class inheritance:",[30,1215,1217],{"className":32,"code":1216,"language":34,"meta":35,"style":35},"\u002F\u002F using this before super()\nclass A extends Base { constructor() { this.x = 1; super() } }\n\n\u002F\u002F forgetting super() entirely in a derived constructor\nclass B extends Base { constructor() { \u002F* no super *\u002F } }  \u002F\u002F ReferenceError on use\n\n\u002F\u002F assuming super refers to the parent INSTANCE — it refers to the parent PROTOTYPE\n",[15,1218,1219,1224,1260,1264,1269,1295,1299],{"__ignoreMap":35},[39,1220,1221],{"class":41,"line":42},[39,1222,1223],{"class":166},"\u002F\u002F using this before super()\n",[39,1225,1226,1228,1231,1233,1236,1239,1242,1244,1246,1248,1250,1252,1255,1257],{"class":41,"line":57},[39,1227,46],{"class":45},[39,1229,1230],{"class":49}," A",[39,1232,136],{"class":45},[39,1234,1235],{"class":49}," Base",[39,1237,1238],{"class":53}," { ",[39,1240,1241],{"class":45},"constructor",[39,1243,92],{"class":53},[39,1245,74],{"class":73},[39,1247,542],{"class":53},[39,1249,80],{"class":45},[39,1251,547],{"class":73},[39,1253,1254],{"class":53},"; ",[39,1256,352],{"class":73},[39,1258,1259],{"class":53},"() } }\n",[39,1261,1262],{"class":41,"line":86},[39,1263,125],{"emptyLinePlaceholder":124},[39,1265,1266],{"class":41,"line":115},[39,1267,1268],{"class":166},"\u002F\u002F forgetting super() entirely in a derived constructor\n",[39,1270,1271,1273,1276,1278,1280,1282,1284,1286,1289,1292],{"class":41,"line":121},[39,1272,46],{"class":45},[39,1274,1275],{"class":49}," B",[39,1277,136],{"class":45},[39,1279,1235],{"class":49},[39,1281,1238],{"class":53},[39,1283,1241],{"class":45},[39,1285,92],{"class":53},[39,1287,1288],{"class":166},"\u002F* no super *\u002F",[39,1290,1291],{"class":53}," } }  ",[39,1293,1294],{"class":166},"\u002F\u002F ReferenceError on use\n",[39,1296,1297],{"class":41,"line":128},[39,1298,125],{"emptyLinePlaceholder":124},[39,1300,1301],{"class":41,"line":143},[39,1302,1303],{"class":166},"\u002F\u002F assuming super refers to the parent INSTANCE — it refers to the parent PROTOTYPE\n",[19,1305,1306,1307,1309,1310,1313,1314,1316,1317,1320,1321,1323],{},"The mental model that prevents all three: in a derived class, ",[15,1308,74],{}," is ",[642,1311,1312],{},"manufactured"," by\n",[15,1315,370],{},", so it can't precede it; and ",[15,1318,1319],{},"super.x()"," means \"the parent's method, run with my\n",[15,1322,74],{},",\" not \"a separate parent object.\"",[10,1325,1327],{"id":1326},"key-takeaways","Key takeaways",[258,1329,1330,1335,1348,1357,1364,1370],{},[261,1331,1332,1334],{},[15,1333,17],{}," links both the instance prototype chain and the static chain — full inheritance,\ncorrectly wired.",[261,1336,1337,1338,1340,1341,1344,1345,1347],{},"A derived constructor must call ",[15,1339,363],{}," ",[265,1342,1343],{},"before"," touching ",[15,1346,74],{},"; omit the\nconstructor entirely to auto-forward arguments.",[261,1349,1350,1353,1354,1356],{},[15,1351,1352],{},"super.method()"," calls the parent's method with the current ",[15,1355,74],{},", enabling extend-not-\nreplace overrides.",[261,1358,1359,1360,1363],{},"Overriding plus methods that call ",[15,1361,1362],{},"this.other()"," give you polymorphism for free.",[261,1365,1366,1367,1369],{},"Static methods are inherited; ",[15,1368,74],{}," in a static method is the calling class, enabling\nfactory patterns.",[261,1371,1372,1373,1375,1376,1378,1379,1381],{},"You can extend built-ins like ",[15,1374,1088],{}," and ",[15,1377,1091],{},"; just call ",[15,1380,370],{}," correctly.",[19,1383,1384,1375,1386,1388],{},[15,1385,17],{},[15,1387,352],{}," are the polished front-end of prototypal inheritance. Knowing what they\ncompile to keeps every edge case predictable.",[1390,1391,1392],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":35,"searchDepth":57,"depth":57,"links":1394},[1395,1397,1399,1401,1402,1404,1405,1406,1407,1408],{"id":12,"depth":57,"text":1396},"Inheritance with extends",{"id":247,"depth":57,"text":1398},"What extends sets up",{"id":349,"depth":57,"text":1400},"super in the constructor",{"id":577,"depth":57,"text":578},{"id":626,"depth":57,"text":1403},"super in methods",{"id":782,"depth":57,"text":783},{"id":963,"depth":57,"text":964},{"id":1081,"depth":57,"text":1082},{"id":1209,"depth":57,"text":1210},{"id":1326,"depth":57,"text":1327},"Master class inheritance in JavaScript — how extends builds the prototype chain, what super does in constructors and methods, overriding, and the rules you must follow.","medium","md","JavaScript","javascript",{},"\u002Fblog\u002Fjavascript-class-inheritance-extends-super","\u002Fjavascript\u002Fclasses\u002Fclass-inheritance",{"title":5,"description":1409},"blog\u002Fjavascript-class-inheritance-extends-super","Inheritance with extends & super","Classes & OOP","classes","2026-06-18","2a0f1YDIhFthS4_Q249oH1KMUzTbh86MhRWwVmuTszs",1781808673080]