Prototyped properties on ECMA6 classes

Question

Take the following code:

function OldSchool() {}

OldSchool.prototype = {
  foo: "bar",
};

class NewSchool {
  foo = "bar";
}

let oldSchool = new OldSchool,
    newSchool = new NewSchool;

// false, true
console.log(
  oldSchool.hasOwnProperty("foo"),
  newSchool.hasOwnProperty("foo")
);

// 'bar', 'bar'
console.log(
  oldSchool.foo, newSchool.foo
);

How would I rewrite NewSchool to have the same prototyping behavior as OldSchool?

EDIT: The following does not work:

<script type="text/javascript">

    function OldSchool() {}

    OldSchool.prototype = {
        foo: "bar",
    };

    class NewSchool {}

    NewSchool.prototype = {
        foo: "bar",
    };

    let oldSchool = new OldSchool,
        newSchool = new NewSchool;

    // false, true
    console.log(
        oldSchool.hasOwnProperty("foo"),
        newSchool.hasOwnProperty("foo")
    );

    // 'bar', undefined
    console.log(
        oldSchool.foo, newSchool.foo
    );

</script>

@HereticMonkey I don't see how that is equivalent to putting the property on the prototype — Bergi, Oct 01 '22 at 23:20
@Dan Use strict mode to see the mistake. [Don't attempt to overwrite `.prototype`](https://stackoverflow.com/questions/17474390/defining-a-javascript-prototype), but add a new property to the existing prototype object: `NewSchool.prototype.foo = "bar";` — Bergi, Oct 02 '22 at 02:30
What about `Object.assign(NewSchool.prototype, {foo: 'bar'})`? — Dan, Oct 02 '22 at 02:52
Okay, apparently VS Code intellisense prefers `NewSchool.prototype.foo = "bar"`. Thank you. — Dan, Oct 02 '22 at 03:14

Mauro Aguilar · Answer 1 · 2022-10-01T22:03:00.637

0

Have you tried using Private Instance Fields? Here is an example:

function OldSchool() {}

OldSchool.prototype = {
  foo: "bar",
};

class NewSchool {
  #foo = "bar";

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

let oldSchool = new OldSchool,
    newSchool = new NewSchool;

// false, false
console.log(
  oldSchool.hasOwnProperty("foo"),
  newSchool.hasOwnProperty("foo")
);

// 'bar', 'bar'
console.log(
  oldSchool.foo, newSchool.foo
);

edited Oct 01 '22 at 22:03

answered Oct 01 '22 at 21:38

Mauro Aguilar

1,093
13
22

Question updated – Dan Oct 01 '22 at 21:42
@Dan Answer updated – Mauro Aguilar Oct 01 '22 at 22:04

Prototyped properties on ECMA6 classes

1 Answers1