JavaScript/Notes/Function

Functions are First-Class Objects

function f1() { 
  window.alert("v");
} 

function f2(func) {
  func();
}

f2(f1);

Functions Double as Constructor

// Colorized is a constructor.
function Colorized(name, favoriteColor) {
  this.name = name;
  this.favoriteColor = favoriteColor;
}

// c is an instance of Colorized.
var c = new Colorized("Mary", "red");
alert(c.toString());

A toString method is available on every native object. This is because toString is defined on Object.prototype and Object.prototype is at the base the prototype chain.

Functions' prototype Property

Every user-defined function gets a prototype property for free. This property is assigned to the instance's [[Prototype]] and is used for prototype inheritance, or "shared properties" of each instance.

function Colorized(name, favoriteColor) {
  this.name = name;
  this.favoriteColor = favoriteColor;
}

// alert(Colorized.prototype); // we get prototype for free.
Colorized.prototype.toString = function() {
  return this.name + ", " + this.favoriteColor;
};

var c = new Colorized("Mary", "red");
alert(c.toString());

The toString method is called by the engine when a primitive String value is required. For example, when calling the String constructor as a function, the engine finds the toString method and calls it.

alert( String(c) );

However, when string concatenation is performed, the hint for the primitive value is not string. Instead, the Object's valueOf may be called.

var o = {
  name : "Greg",
  toString : function() {
    return "[object " +this.name + "]";
  },
  valueOf : function() {
    return 10;
  }
};

alert( o + " is valued at " + (+o)); // "10 is valued at 10"

Variable this

function Slider(dir) {
  this.dir = dir;
}
Slider.prototype.move = function(d) {
  alert(this.dir + ", " + d);
};
var move = new Slider("h").move;
move(1); // Explain the result.

http://jsbin.com/EnocIJi/1/edit

Assignment

Function.prototype.call

1) Convert a NodeList into an Array (Hint, see lesson 1 on Array Generics).

var nodeList = document.body.childNodes;
// your code here!
var nodeArray;

http://jsbin.com/ihISoMEc/1/edit

Function.prototype.apply

1) Write a `bind` function -- roll your own, or search MDN.

2) Using `apply`, find the latest and earliest date value in an array of Dates and construct a new Date object, respectively.

var mon = new Date("December 02, 2013");
var tue = new Date("December 03, 2013");
var wed = new Date("December 04, 2013");
var thu = new Date("December 05, 2013");
var fri = new Date("December 06, 2013");
var sat = new Date("December 07, 2013");
var sun = new Date("December 08, 2013");

var dates = [ thu, tue, mon, sun, fri, sat, wed ];

// your code here!
var latest;
var earliest;

Hint, see: http://ecma-international.org/ecma-262/5.1/#sec-15.8.2.11

http://jsbin.com/ABUDohO/1/edit

What does the following code do when run? Explain.

function Duck () {
  this.sound = "Quack!";
  this.speak = function() {
    alert(this.sound);
  };
}

function Goose(){
}

Goose.prototype = {
  sound : "Honk!"
};

new Duck().speak.call(new Goose);

http://jsbin.com/AyAkUlu/2/edit