While JavaScript doesn't really have classes, the first appendix in Kyle Simpson's "this & OBJECT PROTOTYPES" is on the ES6 class keyword. Utilizing the keyword, I was able to write some code, which I will share with you, which asks three simple questions in three alerts in the name of psychedelic seduction:
- What's your name???
- Who's your daddy???
- Is he rich like me???
Alight, the code which I got working (keep in mind that ES6 isn't available in all modern browsers by any means) I got working in Google Chrome. First let me tell you what it's not. It's not this:
<!DOCTYPE html>
<html>
<head>
<title>Time Of The Season</title>
</head>
<body>
<script type="text/javascript">
class Douchebag {
constructor() {
this.slickness = "?!";
}
breakIce() {
alert("What's your name" + this.slickness);
}
overstep() {
alert("Who's your daddy" + this.slickness);
}
}
class MackDaddy extends Douchebag {
constructor() {
this.slickness = "???";
}
overstep() {
super();
alert("Is he rich like me" + this.slickness);
}
}
var zombie = new MackDaddy();
zombie.breakIce();
zombie.overstep();
</script>
</body>
</html>
What is above is what I hoped it would be and what is below is what I had to settle for in the name of getting it going. Note the changes in green below:
<!DOCTYPE html>
<html>
<head>
<title>Time Of The Season</title>
</head>
<body>
<script type="text/javascript">
'use strict';
class Douchebag {
constructor() {
this.slickness = "?!";
}
breakIce() {
alert("What's your name" + this.slickness);
}
overstep() {
alert("Who's your daddy" + this.slickness);
}
}
class MackDaddy extends Douchebag {
constructor() {
super();
this.slickness = "???";
}
overstep() {
super.overstep();
alert("Is he rich like me" + this.slickness);
}
}
var zombie = new MackDaddy();
zombie.breakIce();
zombie.overstep();
</script>
</body>
</html>
Let's talk through what is happening above and some of the challenges that I bumped into. class as a keyword defines a "class" and extends as a keyword lets one "class" inherit from another so MackDaddy inherits from Douchebag and we may new up a MackDaddy and call out the breakIce function at the thing we newed up which will fall over to the Douchebag implementation as there isn't one on MackDaddy. That's all pretty straightforward right? This is what we expect from inheritance is it not? The first surprise for me was that we have to use strict mode in Chrome or we get this error:
Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
Alright while breakIce just asks the first of our three questions, when we call overstep in the last line of the code above we get the last two alerts, the first of which corresponds to the question built into overstep on Douchebag. How can we possibly call overstep on Douchebag when we are stamping overtop of it with an overstep at MackDaddy? The super keyword allows us to reach up to implementations at the parent. I wish that in overstep I could just use super as is seen at MackDaddy's constructor which, by the way, has to be there or we get this error at Chrome's console:
Uncaught ReferenceError: this is not defined
...but I cannot. I am using the this keyword in Douchebag and unless the constructor on Douchebag is explicitly called it will not have slickness hanging off of it and the error above befalls us. Rats! This is not C# wherein there is a guarantee that the constructor on a parent is going to get run without you doing some extra wire-up. I'd imagine that instead that constructor on MackDaddy is obliterating the constructor on Douchebag. Yes! That is the reality. If you only have a constructor at Douchebag it will get run and otherwise it will be overpowered. (I just tried as I typed this all up.) You don't have to have constructors at all but I wanted to show off that too in this example. Herein our questions are asked with the earnest interested-in-you curiosity of triple question marks and not the try-too-hard interrobang approach of an amateur. Anyways, the lookup from one constructor to another while just using the keyword super standalone is how super is supposed to work, but if I try that to look up from one overstep to another that way I get this error in Chrome:
Uncaught SyntaxError: 'super' keyword unexpected here
One has to explicitly define what on the parent one is reaching for outside constructors??? (interested-in-you) Well, this suggests it's a bug in the V8 engine. I suppose this does show off how to call other squashed things, but you shouldn't have to do it to get at the one thing you yourself are immediately squashing. Whatever.
No comments:
Post a Comment