Please enable JavaScript.

Coggle requires JavaScript to display documents.

Eloquent Javascript (Ch 6: Secret Life of Objects (PROTOTYPES (Almost all…

Eloquent Javascript

Ch 6: Secret Life of Objects

METHODS :

Methods are properties that hold function values.

var rabbit = {};
rabbit.speak = function(line) {
  console.log("The rabbit says '" + line + "'");
};

rabbit.speak("I'm alive.");

The rabbit says 'I'm alive.'

this points to the object that it was called on

function speak(line) {
  console.log("The " + this.type + " rabbit says '" + line + "'");
}

var whiteRabbit = {type: "white", speak: speak};
var fatRabbit = {type: "fat", speak: speak};

whiteRabbit.speak("Oh my whiskers, how late it's getting!");
fatRabbit.speak("I could sure use a carrot right now.");

The white rabbit says 'Oh my whiskers, how late it's getting!'
The fat rabbit says 'I could sure use a carrot right now.'

PROTOTYPES

Use Object.create to create an object with a specific prototype

var protoRabbit = {
  speak: function(line) {
    console.log("The " + this.type + "rabbit says '" + line + "'");
  }
};
var killerRabbit = Object.create(protoRabbit);
killerRabbit.type = "killer";
killerRabbit.speak("SKREEEE!");

The killer rabbit says 'SKREEEE!'

CONSTRUCTORS

Constructor: way to create objects that derive from some shared prototype.

function Rabbit(type) {
  this.type = type;
}
var blackRabbit = new Rabbit("black");
console.log(blackRabbit.type);

black

To add a speak method to rabbits created with the Rabbit constructor:

Rabbit.prototype.speak = function(line) {
  console.log("the " + this.type + " rabbit says '" + line + "'");
};
blackRabbit.speak("Doom...");

The black rabbit says 'Doom...'

PROTOTYPE INTERFERENCE

Prototype can be used any time to add new properties and methods to all objects based on it.

Rabbit.prototype.dance = function() {
  console.log("the " + this.type + " rabbit dances a jig.");
};
killerRabbit.dance();

The killer rabbit dances a jig.

But this may cause problems.

var map = {};
function storePhi(event, phi) {
  map[event] = phi;
}

storePhi("pizza", 0.069);
storePhi("touched tree", -0.081);

Object.prototype.nonsense = "hi";
for (var name in map)
  console.log(name);
// pizza
// touched tree
// nonsense *WRONG*

console.log("nonsense" in map);
// true *WRONG*
console.log("toString" in map);
// true *WRONG*

POLYMORPHISM

LAYING OUT A TABLE
Ex: A program that, given an array of arrays of table cells, builds up a string that contains a nicely laid out table
* Builder function will ask each cell how wide/high it wants to be, then uses info to determine column width and row height. Builder then asks cells to draw themselves at correct size and assemble into single string.
* Layout program communicates with cell objects through an interface. That way the types of cells program supports isn't fixed in advance. Can add new cell styles later without requiring changes to the layout program.

function drawTable(rows) {
  var heights = rowHeights(rows);
  var widths = colWidths(rows);

  function drawLine(blocks, lineNo) {
    return blocks.map(function(block) {
      return block[lineNo];
    }).join(" ");
  }

  function drawRow(row, rowNum) {
    var blocks = row.map(function(cell, colNum) {
      return cell.draw(widths[colNum], heights[rowNum]);
    });
    return blocks[0].map(function(_, lineNo) {
      return drawLine(blocks,lineNo) {
        return drawLine(blocks, lineNo);
      }).join("\n");
    }
  }

  return rows.map(drawRow).join("\n");
}

function repeat(string, times) {
  var result = "";
  for (var i = 0; i < times; i++)
    result += string;
  return result;
 }

// Constructor
function TextCell(text) {
  this.text = text.split("\n");
}
TextCell.prototype.minWidth = function() {
  return this.text.reduce(function(width, line) {
    return Math.max(width, line.length);
  }, 0);
};
TextCell.prototype.minHeight = function() {
  return this.text.length;
};
TextCell.prototype.draw = function(width, height) {
  var result = [];
  for (var i = 0; i < height; i ++) {
    var line = this.text[i] || "";
    result.push(line + repeat(" ", width - line.length));
  }
  return result;
};

// testing everything we've written so far..
var rows = [];
for (var i = 0; i < 5; i++) {
  var row = [];
  for (var j = -; j < 5; j++) {
    if ((j + i) % 2 == 0)
      row.push(new TextCell("##"));
    else
      row.push(new TextCell("  "));
  }
  rows.push(row);
}
console.log(drawTable(rows));

##    ##    ##
   ##    ##
##    ##    ##
   ##    ##
##    ##    ##

// Underline cells with dash chars 
// by writing cell type that handles underlining

function UnderlinedCell(inner) {
  this.inner = inner;
}
UnderlinedCell.prototype.minWidth = function() {
  return this.inner.minWidth();
};
UnderlinedCell.prototype.minHeight = function() {
  return this.inner.minHeight() + 1;
};
UnderlinedCell.prototype.draw = function(width, height) {
  return this.inner.draw(width, height - 1).concat([repeat("-", width)]);
};

// function that builds up grid of cells from our data set
function dataTable(data) {
  var keys = Object.keys(data[0]);
  var headers = keys.map(function(name) {
    return new UnderlinedCell(new TextCell(name));
  });
  var body = data.map(function(row) {
    return keys.map(function(name) {
      return new TextCell(String(row[name]));
    });
  });
  return [headers].concat(body);
}

console.log(drawTable(dataTable(MOUNTAINS)));

// → name         height country
//   ------------ ------ -------------
//   Kilimanjaro  5895   Tanzania
//   … etcetera

GETTERS AND SETTERS

In Javascript, we can use technique to specify properties that (from the outside) look like normal properties but secretly have methods associated with them.

var pile = {
  elements: ["eggshell", "orange peel", "worm"],
  get height() {
    return this.elements.length;
  },
};

console.log(pile.height);
// 3
pile.height = 100;
// ignoring attempt to set height to 100