Where base functionality comes from in JS

Daniel Jackson


  • First used in Self language (1980s)
  • A clever way to provide a class-like mechanism
  • Flexible and dynamic, but can be obscure

Objects have prototypes

  • (Almost) all objects have a prototype
  • Get prototype of o with Object.getPrototypeOf(o)
  • Create object o with prototype p with o = Object.create(p)

Property lookup propagates

  • When evaluating o.s, first try o
  • If o has no s slot, try its prototype
  • Repeat until found, or return undefined

Prototype Methods

  • Common pattern: prototype holds methods
  • Note special this variable
  • Bound by dot syntax: yes, this is hacky

Check your understanding

  • What does this code do?
  • What is the significance of this?


  • Functions that make objects
  • Also set the prototype
  • A subtle but essential mechanism

Functions that make objects

  • The function Color is like a constructor
  • Takes primitive values and returns an object
  • (Much more on this to come)

Constructor syntax

  • Calling a function with new keyword allocates an object
  • Object is bound to special this variable

Difference #1: constructor property

  • The keyword constructor maps an object to its constructor function

Testing "types"

  • Can use constructor and instanceof to check type
  • Puzzle: remove parens around the two exprs and explain the result

Difference #2: prototypes

  • When you call new F(), the prototype of the allocated object is F.prototype
  • Confusingly, F.prototype is not the prototype of F

Changing prototypes

  • Note the difference between changing the prototype
  • ... and changing which object is the prototype

Classes with Prototypes

  • Can use prototypes to simulate classes
  • ES6 provides syntactic sugar
  • But flawed: no encapsulation

A Class Pattern

  • Object holds instance variables
  • Prototype holds methods
  • Can simulate inheritance too

Class Syntax (ES6)

  • Just syntactic sugar for the class pattern
  • Prototype holds methods
  • Can simulate inheritance too

Breaking Encapsulation

  • Representation is exposed!
  • Can redefine methods too
  • Private fields proposed for next ES

JavaScript Nasties

  • Problems with empty prototypes
  • Problems with new and this

No empty objects

  • No truly empty objects, due to prototype fields
  • Entertaining example below by Doug Crockford
  • Lesson: don't use objects as hash tables

Omitting new

  • new allocates object and binds to this
  • If omitted, this is bound to the global environment (!)
  • Lesson: design constructors that don't use new

this and that

  • A clever hack: inside the call o.f(), this is bound to o
  • When o is missing, this bound to global env or is undefined
  • Try using arrow syntax for function passed to from_to
  • Try assigning var that = this and replacing this in call by that

Avoiding new and this

  • Here's a pattern that avoids this in constructors
  • The identifier that is a regular variable
  • Using prototype property ensures instanceof will work