Read Zackas Object Oriented Programming in JavaScript


I recently read Nicholas Zackas’ The Principles of Object Oriented Javascript and I really recommend it. Many people I know (and students I teach) struggle with mapping the concept of object orientation onto a language that does not follow classical inheritance and lacks many of the visible signals that developers recognize as OO-ish.

The books makes forays into hidden attributes of the language but remains friendly throughout. It offers practical tools and exploratory exercises that will help JavaScript programmers learn more about this interesting and protean language.

I wrote the following precis of my take-aways:

  1. Introduction: OO Languages
    1. Encapsulation
    2. Aggregation (an object can reference another)
    3. Inheritance
    4. Polymorphism
    5. Javascript has these, but they are implemented in a way that appears different
  2. Primitive and Reference Types
    1. Primitive types: simple data
    2. Reference types: stored as objects
    3. Autoboxing casts primitive types to reference types
    4. Primitive Types
    5. Boolean
    6. Number
    7. String
    8. Null: A primitive type with only one value, null
    9. Undefined: Primitive type with only value undefined, value assigned to uninitialized value
    10. A variable holding a primitive holds the value
    11. IDENTIFY WITH: typeof operator
    12. SCREWBALL: typeof null // => "object"
    13. Identify nullity by === null
    14. Primitives are autoboxed to provide them an OO interface, but they are not objects
    15. Reference Types
    16. Represent objects in JavaScript
    17. Reference values are instances of reference types
    18. An object is an unordered list of properties consisting of a name and a value
    19. When the value points to a function it is called a method
    20. Creating Objects
      1. Use new
      2. Assigned variable holds a pointer
    21. Destroying can be accomplished by assigning null and letting the GC clean
    22. Properties can be added or removed at any time.
    23. Instantiating Built-in Types
    24. Array, Date, Error, Function, Objecdt, RegExp
    25. Many of them have literal forms: Object, Array, RegExp
    26. Object literal does not actually fire new Object()
    27. Property Acess
    28. Dot notation
    29. Bracket-and-String
    30. Identifying Reference Types: instance instanceof Class
    31. Identifying Arrays Array.isArray()
    32. Primitives are wrapped (autoboxed)
  3. Functions
    1. Functions have an internal property named [[Call]]
    2. Presence of [[Call]] means typeof returns “function”
    3. Declarations v. Expressions
    4. Declaration: function foo()
    5. Expression: var x = function()
    6. Function declarations are hoisted and thus can be used before definition
    7. Functions can be used as values
    8. Parameters
    9. You can pass any number of parameters
    10. arguments object exists with all passed parameters
    11. arguments is not an Array
    12. Overloading function definitions is not possible
    13. this: The currrent execution context
      1. Can be changed by three means
      2. call
      3. apply
      4. bind
  4. Understanding Objects
    1. Defining Properties
    2. When a property is put on an object, [[Put]] is called
      1. Allocates the memory
      2. Specified initial value and attributes about the property
      3. This results in an own property
    3. When a property is updated on an object, [[Set]] is called
      1. Replaces the current value
    4. Detecting Properties
      1. Use the in operator: "name" in person1
      2. May want to test person1.hasOwnProperty("name") to preclude Prototype tampering
    5. Removing properties
      1. Don’t merely set to null
      2. DO use the delete operator
    6. Enumeration
    7. By default all properties you add are enumerable
    8. Properties have the internal [[Enumerable]] attributes set to true
    9. To get a list of propereties, use Object.keys(): only returns instance properties!
    10. Test whether a property is enumerable with propertyIsEnumerable()
    11. Types of properties
    12. Two types
      1. Data properties: contain a value
      2. Accessor properties: don’t contain a value, but a function that returns a value (i.e. a “getter”)
        1. Define getter with: get propertyName(){}
        2. Define setter with: set propertyName(){}
    13. Property Attributes
    14. Common
      1. [[Enumerable]]: Can be enumerated?
      2. [[Configurable]]: Can be changed?
      3. By default all properties are both
      4. Change with Object.defineProperty(objectOwner, propertyName, propertyDescriptorObject)
    15. Data Property Attributes
      1. To additional properties not found in property attributes
      2. [[Value]]: Holds the actual value
      3. [[Writable]]: Can be overwritten?
    16. Data Property Attributes
      1. [[Get]]: Holds the actual value
      2. [[Set]]: Can be overwritten?
    17. Multiple properties can be defined with Object.defineProperties()
    18. Preventing Object Motification
    19. Object.preventExtension() sets the [[Extensible]] flag to false
    20. Seal the object with Object.seal(): existing things can be changed
    21. Freeze the object with Object.freeze(): non-ext; unchangeable
  5. Constructors and Prototypes
    1. Constructor is a function used with new to create an Object
    2. Ensures siilarity of properties and methods
    3. new will invoke even with out ()
    4. instanceof can determine whether an instance is from a constructor
    5. When created with new a constructor property is set on the instance such that instance.constructor === ConstructorFunction is true
    6. Prototype
    7. in operator returns true for both proto properties and own properties
    8. An instance keeps track of its prototype with [[Prototype]]
    9. Read prototype with Object.getPrototypeOf()
    10. Test if something is prototype with object.isPrototypeOf(instance)
    11. Set prototype with Object.setPrototypeOf()
  6. Inheritance
    1. Prototypal Inheritance
    2. Instances inherit their prototype, the proto inherits from its prototype
    3. See Listing 1

Listing 1

function Animal(species) {
  this.species = species
} = function() {
  console.log("As a: " + this.species + ", I like to eat, yum yum");

function Person(name) {, "Homo Sapiens");
  this.__proto__ = new Animal = name;

var k = new Person("Chris");;