Instance Variables in Javascript Classes

Question

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;, or var name;, or all of those previous variables and adding = null;, but still get errors in my console. The errors are mostly my-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);
}

You don’t declare properties; just set this._name = name;. — Ry-
– Ry- ♦, Commented Nov 17, 2016 at 14:56
@Ryan How would I then access the instance variable in my event listener? this._name just yields undefined. — aCarella
– aCarella, Commented Nov 17, 2016 at 15:01

Olian04 · Accepted Answer · 2022-02-09 10:27:47Z

20

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.

edited Feb 9, 2022 at 10:27

Olian04

6,9002 gold badges31 silver badges56 bronze badges

answered Nov 17, 2016 at 15:00

Matías Fidemraizer

65.1k19 gold badges132 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ry- · Accepted Answer · 2016-11-17 16:07:36Z

17

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 yields undefined.

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);
  });
}

answered Nov 17, 2016 at 16:07

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

1 Comment

aCarella Over a year ago

Super helpful. Thanks for explaining.

Collectives™ on Stack Overflow

Instance Variables in Javascript Classes

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related