Methods and Prototypes

Slide navigation: Forward with space bar, →, or PgDn. Backwards with ← or PgUp.

Methods

• JavaScript: Objects without classes.

  let harry = { name: 'Harry Smith', salary: 90000 }
  

• Object has state, identity, behavior.
• Method: function-valued property.

  harry = {
    name: 'Harry Smith',
    salary: 90000,
    raiseSalary: function(percent) {
      this.salary *= 1 + percent / 100
    }
  }

• Method invocation:

  harry.raiseSalary(10)

• this is set to harry in the call.
• Syntactic sugar for method definition:

  harry = {
    ...
    raiseSalary(percent) {
      this.salary *= 1 + percent / 100
    }
  }

Prototypes

• Factory function to create many employees:

  function createEmployee(name, salary) {
    return {
      name,
      salary,
      raiseSalary: function(percent) {
        this.salary *= 1 + percent / 100
      }
    }    
  }

• Drawback: Each employee has its own raiseSalary property.

  

Prototypes

• Place common properties into prototype object:

  const employeePrototype = {
      raiseSalary: function(percent) {
        this.salary *= 1 + percent / 100
    }
  }

• Set [[Prototype]] slot of object in factory:

  function createEmployee(name, salary) {
    const result = { name, salary }
    Object.setPrototypeOf(result, employeePrototype)
    return result
  }

Prototypes

• All employees share the same prototype object:

  

• Property lookup in object, then in prototype:

  harry.raiseSalary(5)

• Note: Prototype lookup is only for reading properties, never for writing:

  harry.raiseSalary = function(rate) { this.salary = Number.MAX_VALUE }

Constructors and Classes

Constructors

• Constructor: Factory function invoked with new operator.
• By convention, name is uppercase.

  function Employee(name, salary) {
    this.name = name
    this.salary = salary
  }

• Automatically sets a prototype.
• Prototype stored in function object:

  Employee.prototype.raiseSalary = function(percent) {
    this.salary *= 1 + percent / 100
  }

• Object construction:

  const harry = new Employee('Harry Smith', 90000)

Constructors

• new operator:
  1. Creates new object.
  2. Sets [[Prototype]] to Constructor.prototype
  3. Sets this
  4. Runs constructor body.
  5. Yields the object.

  

• Employee isn't a class—it's a function.
• All objects constructed with that function have the same behavior.

The Class Syntax

• Class syntax unifies constructor function and prototype methods:

  class Employee {
    constructor(name, salary) {
      this.name = name
      this.salary = salary
    }
    raiseSalary(percent) {
      this.salary *= 1 + percent / 100
    }
  }

• Does exactly what you saw on the preceding slides.
• Employee still isn't a class—it's a function.
• Note: Can only have one constructor
• Note: No commas between method definitions.
• Note: Classes are not hoisted.
• Note: Body of class is in strict mode.

Getters, Setters, and Instance Fields

Getters

• Getter—method with no parameters, declared with get:

  class Person {
    constructor(last, first) { this.last = last; this.first = first }
    get fullName() { return `${this.last}, ${this.first}` }
  }

• Call getter without parentheses:

  const harry = new Person('Smith', 'Harry')
  const harrysName = harry.fullName // 'Smith, Harry'

• Think of a getter as a dynamically computed property.

Setters

• Setter—method with one parameter, declared with set:

  class Person {
    ...
    set fullName(value) {
      const parts = value.split(/,\s*/)
      this.last = parts[0]
      this.first = parts[1]
    }
  }

• Invoked through assignment to property:

  harry.fullName = 'Smith, Harold'

• Getters/setters look like fields, act like methods.

Instance Fields and Private Methods

• Alternative to defining properties in constructor.
• In “Proposal stage 3”.
• List field names and optional initial values in class declaration:

  class BankAccount {
    balance = 0
    deposit(amount) { this.balance += amount }
    ...
  }

• Private field prefixed with #

  class BankAccount {
    #balance = 0
    deposit(amount) { this.#balance += amount }
    ...
  }

• Separate stage 3 proposal: Private methods prefixed with #.

Static Methods and Fields

Static Methods

• Static method doesn't operate on objects:

  class BankAccount {
    ...
    static percentOf(amount, rate) { return amount * rate / 100 }
    ...
    addInterest(rate) {
      this.balance += BankAccount.percentOf(this.balance, rate)
    }
  }

• Invoke static method through constructor.
• Shortcut for setting constructor property:

  BankAccount.percentOf = function(amount, rate) { return amount * rate / 100 }
  

Static Fields

• Define static field in class:

  class BankAccount {
    static OVERDRAFT_FEE = 30
    ...
    withdraw(amount) {
      if (this.balance < amount) {
        this.balance -= BankAccount.OVERDRAFT_FEE
      }
      ...
    }
  }

• Access field through constructor.
• Same as adding property to constructor function:

  BankAccount.OVERDRAFT_FEE = 30

• Static fields in proposal stage 3.

Static Getters/Setters

• Static getters/setters available today:

  class BankAccount {
    ...
    static get OVERDRAFT_FEE() {
      if (this.overdraftFee === undefined)
        this.overdraftFee = 10
      return this.overdraftFee // this is the constructor
    }
    static set OVERDRAFT_FEE(newValue) {
      if (newValue > this.overdraftFee) {
        this.overdraftFee = newValue
      }
    }
  

Subclasses

Subclasses

• Subclass: Class that inherits some behavior from superclass.
• Managers are like employees, but they get a bonus.

  class Employee {
    constructor(name, salary) { ... }
    raiseSalary(percent) { ... }
    ...
  }
  
  class Manager extends Employee {
    getSalary() { return this.salary + this.bonus }
    ...
  }

Subclasses

• Sets up a prototype chain:

  

• Provides inheritance:

  const boss = new Manager(...)
  boss.raiseSalary(10) // Calls Employee.prototype.raiseSalary
  

Overriding Methods

• Can have methods with the same name in super- and subclass:

  class Employee {
    ...
    getSalary() { return this.salary }
  }
  
  class Manager extends Employee {
    ...
    getSalary() { return this.salary + this.bonus }
  }
  

• Subclass method overrides superclass method.
• Polymorphic method call:

  const empl = ...
  const salary = empl.getSalary()

Invoking Superclass Methods

• Invoke superclass method from subclass:

  class Manager {
    ...
    getSalary() { return super.getSalary() + this.bonus }
  }

• super starts lookup with the parent of the prototype object in which the method was defined.
• getSalary defined in Manager.prototype
• Lookup starts with parent Employee.prototype
• Note: Can override getters and setters:

  class Manager extends Employee {
    ...
    get salary() { return super.salary + this.bonus }
  }

Subclass Construction

• Subclass constructor must invoke superclass constructor:

  class Manager extends Employee {
    constructor(name, salary, bonus) {
      super(name, salary) 
      this.bonus = bonus 
    }
    ...
  }

• this is valid after call to super
• If you supply no subclass constructor, one is provided.
• That constructor passes all arguments to the superclass constructor.

  class Manager extends Employee {
    // No constructor
    getSalary() { ... }
  }
  
  const boss = new Manager('Mary Lee', 180000)
    // Calls Employee('Mary Lee', 180000)
  

• Better than Java (where the no-arg superclass constructor is invoked).

Advanced Topics

Class Expressions

• Class can be anonymous:

  const Employee = class {
    constructor(name, salary) { ... }
    raiseSalary(percent) { ... }
  }

• Useful for “mix in”:

  function withToString(base) {
    return class extends base {
      toString() {
        let result = '{' 
        for (const key in this) {
          if (result !== '{') result += ', ' 
          result += `${key}=${this[key]}` 
        }
        return result + '}' 
      }
    }
  }

• Call with class and get a better one:

  const BetterEmployee = withToString(Employee)
  e = new BetterEmployee('Mad Hatter', 90000)
  console.log(e.toString())
    // Prints {name=Mad Hatter, salary=90000}, not [object Object]

The this Reference

• new ClassName sets this to the new object.
• object.method(arguments) sets this to the object on which the method is invoked.
• What could possibly go wrong?
• Weirdness #1: Calling constructor without new
  • Call is illegal with class syntax.
  • this is undefined with old-style constructor.
  • Sometimes done on purpose: Number('3')/new Number('3')
• Weirdness #2: Calling non-constructor with new
  • Constructs empty object.
• Weirdness #3: Invoking method without object.

  const harrysAccount = new BankAccount()
  const action = harrysAccount.deposit
  action(1000) // Error—this doesn't point to any bank account

The this Reference

• Weirdness #4: Nested functions.

  class BankAccount {
    ...
    spreadTheWealth(accounts) {
      accounts.forEach(function(account) {
        account.deposit(this.balance / accounts.length)
          // Error—this undefined inside nested function
      })
      this.balance = 0
    }
  }

• Remedy: this is statically captured in arrow function.

    spreadTheWealth(accounts) {
      accounts.forEach(account => {
        account.deposit(this.balance / accounts.length) // this correctly bound
      })
      this.balance = 0
    }
  

The this Reference

The this Reference

• Weirdness #5: Array of functions.

  const observers = []
  function notifyObservers() {
    for (let i = 0; i < observers.length; i++) {
      observers[i]()
    } 
  }
  
  class BankAccount {
    constructor() { this.balance = 0 }
    deposit(amount) {
      this.balance += amount
      notifyObservers()
    }
    ...
  }

• obj.method(args) is the same as obj['method'](args)
• In any call obj[index](args), this is obj
• Makes no sense with array of functions.

The this Reference

• In observer function, this is the array of observers!

  class UserInterface {
    log(message) { ... }
    start() {
      const acct = new BankAccount()
      observers.push(function() { this.log('More money!') })
      acct.deposit(1000)
    }
  }
  

• Dynamic this is problematic.
• Use arrow functions for callbacks.
• Consider “hard objects”.

End of Lesson 4