09 · Objects, this and prototypes

Understand the mechanism

Property lookup checks the object and then its prototype chain until null. class offers syntax for constructors and prototype methods without replacing the prototype model. Initialize instance state in constructors; methods are normally shared on the prototype.

With obj.method(), an ordinary method receives obj as this. Extracting and calling it separately can lose that receiver. bind creates a bound function, while an arrow wrapper can explicitly refer to an instance. Do not assume an event listener this is your application object.

Inheritance suits stable is-a relationships; composition often handles changing responsibilities more easily. Course records usually need only plain objects. Classes help when multiple instances share behavior and state rules; JSON fields do not each need a class.

Runnable example

class Progress {
  constructor(total) { this.total = total; this.done = 0; }
  complete() { this.done = Math.min(this.total, this.done + 1); }
  percent() { return this.total === 0 ? 0 : Math.round(this.done / this.total * 100); }
}
const html = new Progress(8);
const css = new Progress(8);
const completeHTML = html.complete.bind(html);
completeHTML();
console.log(html.percent(), css.percent());
console.log(html.complete === css.complete);

Trace and verify

Expect 13, 0 and true. Instance state is independent while complete is shared through the prototype. Removing bind and calling independently in strict mode loses this; html.complete() retains the receiver.

Common mistakes and boundaries

The example assumes a nonnegative integer total; validate production inputs. Object spread does not preserve prototype methods. Parsed JSON is ordinary data and cannot call the original methods; validate and reconstruct deliberately.

Practice challenge

Reject negative, fractional and string totals in the constructor; add undo with a zero lower bound.

Reference solution and reasoning

Validate integer type and bounds, throwing TypeError on invalid construction. Clamp undo with Math.max and define zero-total percentage as zero.

Further reading

• MDN JavaScript Guide