Encapsulation — more than what's for breakfast!

R. Alexander Miłowski


School of Information, UC Berkeley

What is Object-Oriented Anyway?

Class paradigm:

  1. Polymorphism

    • subtyping — instances are substitutable by common super-classes or interfaces/protocols
    • generics — code is written without types (weak) or utilizes subtypes as interfaces/protocols (strong)
    • function overloading — implementations are chosen based on parameter types
  2. Encapsulation - a mechanism for restricting or controlling access to an object's components (public / private / privileged)

  3. Inheritance - a mechanism of implementation reuse that typical establishes an is-a relationship.

Is JavaScript Object-Oriented?

Three perspectives:

  1. Interesting StackOverflow Q&A
  2. JavaScript: The World's Most Misunderstood Programming Language — Douglas Crockford
  3. Introduction to Object-Oriented JavaScript — MDN

What about CSS or HTML?

For CSS:


Use a combination of scripts and CSS to enable encapsulation and clean content.

TODO List Homework

      ⇓ the class ⇓ and id provide differently scoped access
<div class="todo" id="todo-list">
   <div class="controls"> ⇐ a class can be scoped by a parent class
      <input size="30" class="text"/><button class="add">Add</button><button class="clear">Clear</button>
   </div>   ⇓⇑ class and markup allows navigation of contained markup
   <ol class="list"/>

Markup provides functional overloading:

Example: Delete the <button class="clear">...</button> and what happens?

TODO List Solution Walk-through

(exercise in class)