Question regarding ES6 class, constructors and prototype

I am using a class to define object constructor and i wonder is there a different approach to define a variable similar to how prototype works, which wont be directly created in child objects, but if called would return the value from constructor…I hope that made sense.

I’m not 100% on what you mean. Like this?

class Example () {
  constructor (foo) {
    this.foo = foo;
  }
}

So

const example = new Example("hello");
// example is { foo: "hello" }
example.foo // "hello"

Or if you aren’t interested in having a class instantiated:

function createExample (foo) {
  return { foo }
};

So

const example = createExample("hello");
// example is { foo: "hello" }
example.foo // "hello"

ok the first two snippets of code you suggest. Thats what i use. I have a class and using its constructor im able to create new objects and every new object has the same properties within itself. But then i want to have a variable, which is part of the constructor, but not created within instances of every new object, similar to how prototype work, but im able to call it. Ill try to use your code to give an example. So you created the new object: example={ foo: "hello" } . And if you make new object, lets say const another = new Example('bye') will have a different value of foo within itself. I also want both example and another to be able to call an identical property, lets say example.boo and another.boo which refer to the same value, but are not part of their object body, but its part of the class Example and they access it. Did that make more sense?
In this case the behavior will be as follow: lets say boo will have value of 'welcome' and when i call console.log(example.boo) it will return welcome, but when i call console.log(example), it will return {foo: 'hello'} without the boo property

class Example () {
  foo = "I'm always here";

  constructor (foo) {
    this.bar = bar;
  }
}

So

const example = new Example("hello");
// example is { foo: "I'm always here", bar: "hello" }
example.foo // "I'm always here"
example.bar // "hello"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#field_declarations

And scroll up a few lines if you want to directly attach static properties

Ah I just read the last paragraph again. Why? I think you can do this with private properties and getters (note not tested), but I’m not sure I can see any benefit here

class Example () {
  #privateFoo = "I'm always here";

  constructor (bar) {
    this.bar = bar;
  }

  get foo() {
    return this.#privateFoo;
  }
}

thanks, but i want the foo prop not to be part of the object, yet accessed when calling obj.foo similar to how prototype works

the idea is the prop doesnt take space in every new object created ebcause its shared by all of them with the same value so there is only need of 1 instance accessed by all

Yeah, it’s just a static property you’re talking about – scroll up a few lines from the field declarations section, it shows how to directly attach static properties. What is the usecase here?

since im using the ES6 class syntax, instead of prototype i wanted to see if there is any more ‘contemporary’ approach
Im using the class to make a handful of objects which hold the properties for the different buttons in my app. They all share the same html class tag, so i wanted to assign it to them, without making copy of it, of each and every button object

You’re not using it instead of prototypes, it’s exactly the same thing. The prototype is for functions (you can attach arbitrary data, but usecases for doing that are rare),

class Example {
  method() {
    // This is attached to the prototype
  }
}

Is literally the same as

function Example () {}

Example.prototype.method = function () {
  // This is attached to the prototype
}

but is it the same with regular variables? i dont want to attach a method to the prototype, but a simple variable which holds a string

class Example {
  method() {
    // This is attached to the prototype
  }
}

Example.foo = "I'm a static data property attached to the class";

(for comparison, same as)

function Example () {}

Example.prototype.method = function () {
  // This is attached to the prototype
}

Example.foo = "I'm a static data property attached to the class";

(Note class syntax is functionally identical, but generally always prefer the newer syntax because the introduction of it meant that a few common sources of programmer error were able to be removed. In particular class will error if you don’t use new when instantiating, whereas it won’t with the function version)

oh nevermind, it doesnt function the way im anticipating…i think ill just use prototype for this. Thanks for the time you invested. I dont think static property is what im looking for

Can you give an example of the code and what you’re trying to do? I think we’ve covered all possible permutations of what it could be, but I’m just not sure putting the effort in here is worth it. Why can’t you just set it as a property? What do you gain by hiding it?

ok this is a snippet of the code i have in mind:

class Example{
  constructor (id){
    this.id=id
  }
}

Example.prototype.myclass='buttons'

let buttons=['add', 'divide', 'multiply'] //my buttons Id's

buttons=buttons.map(id=>new Example(id))  //i turn them into objects with prop id

console.log(buttons)  // logs: [ { id: 'add' }, { id: 'divide' }, { id: 'multiply' } ]

console.log(buttons[0].myclass) //logs: 'buttons'

Is there a new ES6 approach to let my buttons object access myclass prop? In the example above i use prototype. Isnt there some other way to declare the prototype inside the class?

because we put the same property(and same value) in every instance/new object, which is unnecessary if they all are the same. We are not talking for individual values, but they all share the same one. That is why i want a prototype approach and i wonder if class has this under new syntax

You would access a static member via the Class itself, not as a property of a class object.

class Example{

    static myclass = 'buttons';
    
  constructor (id){
    this.id=id
  }
}

let buttons=['add', 'divide', 'multiply'] //my buttons Id's

buttons=buttons.map(id=>new Example(id))  //i turn them into objects with prop id

console.log(buttons)  // logs: [ { id: 'add' }, { id: 'divide' }, { id: 'multiply' } ]

console.log(Example.myclass) //logs: 'buttons'

It’s the same because class is the same thing, it doesn’t need new syntax. Attaching data to prototypes is such a rare thing to do that it makes no sense to add syntactic sugar to let you do it more easily. But anyway, it still doesn’t make much sense what you’re doing. There’s no real good reason to abuse the inheritance mechanism just to hide some shared data. Just add it as a property to the class, not even a static property, just a normal property. You seem to be trying to optimise something that afaics definitely doesn’t need to be optimised, and you’re making it more difficult for yourself: why do you want to hide this? Because that’s what you’re doing, and it just obfuscates things.

the purpose is not to hide, altho it is a secondary result, the purpose is to save data space. I know it sound ridiculous, but after all, this is duplicating property. Isnt this the whole purpose of prototypes, not to duplicate whats repeated, instead let objects reach for the same source.
I am not familiar with how common its use is, but by the curriculum prototype seemed an important thing and i found the mechanic of not duplicating repeating values to be great. Isnt DRY this? Dont Repeat Yourself! :stuck_out_tongue: