I am playing with the new stuff in JavaScript/ES6. I get an Uncaught ReferenceError: this is not defined(...) player.js:5
in my code. As far as I see, there are no errors here! Is this a bug? Any workarounds?
index.html
<html>
<head>
<script type="text/javascript" src="js/entity.js"></script>
<script type="text/javascript" src="js/player.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Test</title>
</head>
<body>
<canvas id="screen" width=500 height=500></canvas>
<script type="text/javascript">initialize();</script>
</body>
</html>
entity.js
"use strict";
class Entity {
constructor() {
console.log("Entity");
}
}
player.js
"use strict";
class Player extends Entity {
constructor() {
console.log("Created"); // <- error here
}
}
This is a fact of the new class syntax. Your subclass needs to call
super()
in order for the class to be properly initialized, e.g.with whatever arguments the parent constructor needs.
It is required that, if execution reaches the end of a
constructor
function, the value ofthis
needs to have been initialized to something. You either need to be in a base class (wherethis
is auto-initialized), have calledsuper()
sothis
is initialized, orreturn
ed an alternative object.You can think of it like
constructor
functions kind of have an automaticreturn this
at the end of them.