Instance Variables in Javascript Classes
Solution 1
This is still a proposal and it would look as follows:
class A {
property = "value";
}
BTW, when you want to access a class property (i.e. an own object property) you'll still need to use this.property
:
class A {
property = "value";
constructor() {
console.log(this.property);
}
}
If you want to use this syntax today, you'll need to use a transpiler like Babel.
Solution 2
You don’t declare properties; just set this._name = name
.
@Ryan How would I then access the instance variable in my event listener?
this._name
just yieldsundefined
.
Each function call* runs with its own this
; your event listener is a function. You can assign var that = this;
outside the event listener and access that
inside it:
myFunction() {
var that = this;
document.getElementById("myElement").addEventListener("click", function() {
console.log(that._name);
});
}
Or create a new function that always calls yours with the same this
using Function.prototype.bind
:
myFunction() {
document.getElementById("myElement").addEventListener("click", function() {
console.log(this._name);
}.bind(this));
}
Or use ES6’s arrow functions, which use the value of this
where they were defined (lexical this
):
myFunction() {
document.getElementById("myElement").addEventListener("click", () => {
console.log(this._name);
});
}
aCarella
I work in logistics, and use databases as well as Office products to make efficient and effective applications for the operation that I am a part of. StackOverflow has really helped me so far, and I will continue to use it as a resource as well as contribute as much as I can to create a better understanding of what I know for other people. user:2664815
Updated on July 09, 2022Comments
-
aCarella almost 2 years
I mostly code in PHP and Java, but I will occasionally work on the front end of a project and use JavaScript. I usually create objects differently than below, but I came across this and it caught my interest being that the syntax is similar to what I usually program in.
I was poking around, trying to figure out how to use instance variables in JavaScript classes using the syntax below. I've tried declaring the instance variables by
name;
, or_name;
, orvar name;
, or all of those previous variables and adding= null;
, but still get errors in my console. The errors are mostlymy-file.js:2 Uncaught SyntaxError: Unexpected identifier
. I'm just trying to set my instance variable through my constructor.How do I use instance variables in JavaScript, using the syntax below?
class MyClass { var _name; constructor(name) { _name = name; alert("Hello world, from OO JS!"); this.myFunction(); } myFunction() { document.getElementById("myElement").addEventListener("click", function() { console.log("Ant's function runs. Hello!"); }); } } window.onload = function() { var person = "John Smith"; var myClass = new MyClass(person); }