<p>Open developer console to see output</p>
// class definition
class FooClass {
  constructor(bar) {
    this.bar = bar;
  }

  frobnicate() {
    console.log(`My bar is a ${this.bar}!`);
  }
}

// constructor function
function FooConstructor(bar) {
  this.bar = bar;
}

FooConstructor.prototype.frobnicate = function() {
  console.log(`My bar is a ${this.bar}!`);
};

// prototype with factory function
const FooPrototype = {
  frobnicate() {
    console.log(`My bar is a ${this.bar}!`);
  }
};

function createFoo(bar) {
  const foo = Object.create(FooPrototype);
  foo.bar = bar;
  return foo;
}


const foo1 = new FooClass("baz");
const foo2 = new FooConstructor("baz");
const foo3 = createFoo("baz");
console.log(foo1, foo2, foo3);

foo1.frobnicate();
foo2.frobnicate();
foo3.frobnicate();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.