10

Is there any difference between declaring variables inside the constructor vs. outside?

For functions, 'this' is bound differently, but for variables, I cannot figure out if there is a difference.

class Widget {
    constructor(constructorName) {
    this.constructorName = constructorName;
  }
  nonConstructorName = "nonConstructorName1";
}



var myWidget = new Widget("myConstructorName1");

console.log(myWidget.constructorName); // "myConstructorName1"
console.log(myWidget.nonConstructorName); // "nonConstructorName1"

myWidget.constructorName = "myConstructorName2";
myWidget.nonConstructorName = "nonConstructorName2";

console.log(myWidget.constructorName); // "myConstructorName2"
console.log(myWidget.nonConstructorName); // "nonConstructorName2"

console.log(myWidget.prototype.constructorName); // "undefined"
console.log(myWidget.prototype.nonConstructorName); // "undefined"

console.log(myWidget.__proto__.constructorName); // "undefined"
console.log(myWidget.__proto__.nonConstructorName); // "undefined"

var myNewWidget = new Widget("myConstructorName3");

console.log(myNewWidget.nonConstructorName); // "nonConstructorName1"
Paolo Moretti
  • 54,162
  • 23
  • 101
  • 92
M. Walker Wells
  • 151
  • 2
  • 7
  • **Is this referencing my scenario?** "There is (intentionally) no direct declarative way to define either prototype data properties (other than methods) class properties, or instance property." http://wiki.ecmascript.org/doku.php?id=strawman:maximally_minimal_classes – M. Walker Wells Jan 20 '16 at 08:30
  • 1
    I am not sure if you can have properties inside the class definition in the way you are going to define it. Based on this : https://babeljs.io/docs/learn-es2015/#classes there is no property definition outside the `constructor` method, as well if you try your ES6 code here : https://babeljs.io/repl/ you will see that the ES6 transpiler produces an error for the property defnitition outside the `constructor` method. – KodeFor.Me Jan 20 '16 at 08:31
  • In case you like to have some private properties outsite the class construction then, maybe it's fine to read this question : http://goo.gl/qzau3o that has several good answers. – KodeFor.Me Jan 20 '16 at 08:37
  • @merianos-nikos: I'm transpiling with Babel 6, which doesn't throw an error, interestingly enough. – M. Walker Wells Jan 20 '16 at 08:42
  • I just copy and paste your code into babeljs.io/repl and I ge the following: ` repl: Unexpected token (5:21) 3 | this.constructorName = constructorName; 4 | } > 5 | nonConstructorName = "nonConstructorName1"; | ^ 6 | }` – KodeFor.Me Jan 20 '16 at 08:45
  • @merianos-nikos: Thanks for the link—this bit was helpful: "The approach here is to use the scope of the constructor function, which is private, to store private data. For methods to have access to this private data they must be created within the constructor as well, meaning you're recreating them with every instance. This is a performance and memory penalty, but some believe the penalty is acceptable." http://stackoverflow.com/questions/22156326/private-properties-in-javascript-es6-classes – M. Walker Wells Jan 20 '16 at 08:45
  • 1
    @merianos-nikos: The Babel REPL hasn't been upgraded to Babel 6 yet. – M. Walker Wells Jan 20 '16 at 08:48
  • nice to know about it :) Thanks ;) – KodeFor.Me Jan 20 '16 at 08:50
  • This is not ES6 / ES2015. It's an [experimental proposal](https://github.com/jeffmo/es-class-fields-and-static-properties) that can be enabled with the [class properties transform](http://babeljs.io/docs/plugins/transform-class-properties/) or by enabling stage 1. See https://github.com/tc39/ecma262 for more details. – Paolo Moretti Jan 20 '16 at 13:54

1 Answers1

5

Answer in comments by @merianos-nikos...

"The approach here is to use the scope of the constructor function, which is private, to store private data. For methods to have access to this private data they must be created within the constructor as well, meaning you're recreating them with every instance. This is a performance and memory penalty, but some believe the penalty is acceptable."

Private properties in JavaScript ES6 classes

Community
  • 1
  • 1
M. Walker Wells
  • 151
  • 2
  • 7