admin管理员组

文章数量:1331849

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"

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"

• javascript
• ecmascript-2016

Share Improve this question Follow edited Jan 20, 2016 at 13:54 Paolo Moretti 56k2323 gold badges103103 silver badges9393 bronze badges asked Jan 20, 2016 at 8:25 M. Walker WellsM. Walker Wells 15122 silver badges77 bronze badges 9

• 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." wiki.ecmascript/… – M. Walker Wells Commented Jan 20, 2016 at 8: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 : babeljs.io/docs/learn-es2015/#classes there is no property definition outside the constructor method, as well if you try your ES6 code here : babeljs.io/repl you will see that the ES6 transpiler produces an error for the property defnitition outside the constructor method. – KodeFor.Me Commented Jan 20, 2016 at 8:31
• In case you like to have some private properties outsite the class construction then, maybe it's fine to read this question : goo.gl/qzau3o that has several good answers. – KodeFor.Me Commented Jan 20, 2016 at 8:37
• @merianos-nikos: I'm transpiling with Babel 6, which doesn't throw an error, interestingly enough. – M. Walker Wells Commented Jan 20, 2016 at 8:42
• 1 @merianos-nikos: The Babel REPL hasn't been upgraded to Babel 6 yet. – M. Walker Wells Commented Jan 20, 2016 at 8:48

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 5

Answer in ments 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

本文标签： javascriptES7 Classes Declaring Properties Outside of ConstructorStack Overflow