Questions tagged [class-fields]
29 questions
188
votes
4 answers
How to use arrow functions (public class fields) as class methods?
I'm new to using ES6 classes with React, previously I've been binding my methods to the current object (show in first example), but does ES6 allow me to permanently bind a class function to a class instance with arrows? (Useful when passing as a…
![](../../users/profiles/2232367.webp)
Ben
- 4,595
- 7
- 30
- 42
88
votes
5 answers
How do I make a "public static field" in an ES6 class?
I'm making a Javascript class and I'd like to have a public static field like in Java. This is the relevant code:
export default class Agent {
CIRCLE: 1,
SQUARE: 2,
...
This is the error I get:
line 2, col 11, Class properties must be…
![](../../users/profiles/2993478.webp)
aebabis
- 3,392
- 3
- 18
- 39
52
votes
5 answers
Correct use of arrow functions in React
I am using ReactJS with Babel and Webpack and using ES6 as well as the proposed class fields for arrow functions. I understand that arrow functions make things more efficient by not recreating the functions each render similar to how binding in the…
![](../../users/profiles/4698242.webp)
kojow7
- 7,165
- 11
- 60
- 109
33
votes
4 answers
How to avoid bind or inline arrow functions inside render method
We should avoid method binding inside render because during re-rendering it will create the new methods instead of using the old one, that will affect the performance.
So for the scenarios like this:
![](../../users/profiles/5185595.webp)
Mayank Shukla
- 80,295
- 14
- 134
- 129
24
votes
2 answers
Why are derived class property values not seen in the base class constructor?
I wrote some code:
class Base {
// Default value
myColor = 'blue';
constructor() {
console.log(this.myColor);
}
}
class Derived extends Base {
myColor = 'red';
}
// Prints "blue", expected "red"
const x = new…
![](../../users/profiles/1704166.webp)
Ryan Cavanaugh
- 164,706
- 43
- 239
- 219
21
votes
2 answers
Declare a class property outside of a class method
See how x and y are declared in constructor:
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
is there an way to declare properties outside of functions for…
![](../../users/profiles/1368430.webp)
Cisum Inas
- 6,390
- 9
- 30
- 50
17
votes
3 answers
Eslint does not allow static class properties
I'm current developing an API on Node 12.14.1 and using Eslint to help me write the code.
Unfortunately it does not allow me to set static class properties as shown below:
class AuthManager {
static PROP = 'value'
}
The following error is given:…
![](../../users/profiles/9859016.webp)
Lucas Fabre
- 948
- 1
- 7
- 20
17
votes
2 answers
unexpected token = for class properties in node 8.4
running the following code in node (v8.4)
class TodoStore {
todos = [];
get completedTodosCount() {
return this.todos.filter(
todo => todo.completed === true
).length;
}
report() {
if…
![](../../users/profiles/465401.webp)
Elad Katz
- 7,159
- 4
- 33
- 65
14
votes
2 answers
What is the difference between class method vs property function vs property arrow function in typescript?
I was wondering - what is the difference between class method, class property which is a function and class property which is an arrow function? Does the 'this' keyword behave differently in the different variants of the method?
class Greeter {
…
![](../../users/profiles/2979938.webp)
Combine
- 2,868
- 23
- 28
11
votes
1 answer
How to use private class fields in nodejs 12?
In the current release of nodejs i.e. 12.x.x, we can declare private class fields by the #some_varible notation. The # notation would make the variable private field for that particular class.
class Foo {
#some_varible = 10;
}
I have the…
![](../../users/profiles/6524970.webp)
Rajan Sharma
- 1,821
- 3
- 16
- 29
10
votes
3 answers
When using React Is it preferable to use fat arrow functions or bind functions in constructor?
When creating a React class, which is preferable?
export default class Foo extends React.Component {
constructor (props) {
super(props)
this.doSomething = this.doSomething.bind(this)
}
doSomething () { ... }
}
or
export default class…
![](../../users/profiles/2105338.webp)
davegri
- 1,836
- 2
- 21
- 43
8
votes
1 answer
Why are arrow functions as static members values not lexically scoped?
class Foo {
static v = 123;
static bar = () => this.v;
}
console.log(Foo.bar());
I expect this code to return undefined, because arrow functions are lexically scoped, hence this must be eagerly bound to the outer scope.
Yet, it returns…
![](../../users/profiles/251311.webp)
zerkms
- 230,357
- 57
- 408
- 498
6
votes
1 answer
Arrow vs classic method in ES6 class
Is there any reason to write classic syntax of ES6 methods?
class MyClass {
myMethod() {
this.myVariable++;
}
}
When I use myMethod() as callback on some event, I must write something like this (in JSX):
// Anonymous…
![](../../users/profiles/7839521.webp)
Vesmy
- 842
- 2
- 10
- 23
5
votes
1 answer
What is the difference between class fields and properties in Javascript
I'm reading class fields proposal for JavaScript. I don't understand why the authors call it 'fields' and not properties.
MDN docs in class article speak about instance properties declared inside constructor and in next section about field…
![](../../users/profiles/2001878.webp)
bifi
- 73
- 4
4
votes
3 answers
What are "class fields" in JavaScript?
I was reading about JavaScript classes, and came across this term "public class fields syntax". On digging a bit deeper into it I came across this Babel's documentation on class properties.
Can someone please explain - implementation-wise what are…
![](../../users/profiles/1406322.webp)
Aaditya Sharma
- 2,125
- 1
- 19
- 34