JavaScript/Notes/Function: Difference between revisions
(14 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
== Functions are First-Class Objects == | |||
<source lang="javascript"> | |||
function f1() { | |||
window.alert("v"); | |||
} | |||
function f2(func) { | |||
func(); | |||
} | |||
f2(f1); | |||
</source> | |||
== Functions Double as Constructor == | |||
{{Function Constructor}} | |||
== Functions' prototype Property == | |||
Every user-defined function gets a prototype property for free. This property is assigned to the instance's <nowiki>[[Prototype]]</nowiki> and is used for prototype inheritance, or "shared properties" of each instance. | |||
<source lang="javascript"> | |||
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()); | |||
</source> | |||
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. | |||
<source lang="javascript"> | |||
alert( String(c) ); | |||
</source> | |||
However, when string concatenation is performed, the hint for the primitive value is not string. Instead, the Object's valueOf may be called. | |||
<source lang="javascript"> | |||
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" | |||
</source> | |||
== Variable this == | == Variable this == | ||
<source lang="javascript"> | <source lang="javascript"> | ||
Line 21: | Line 76: | ||
var nodeArray; | var nodeArray; | ||
</source> | </source> | ||
http://jsbin.com/ihISoMEc/1/edit | |||
=== Function.prototype.apply === | === Function.prototype.apply === | ||
Line 26: | Line 82: | ||
1) Write a `bind` function -- roll your own, or search MDN. | 1) Write a `bind` function -- roll your own, or search MDN. | ||
2) Using `apply`, | 2) Using `apply`, find the latest and earliest date value in an array of Dates and construct a new Date object, respectively. | ||
<source lang="javascript"> | <source lang="javascript"> | ||
var mon = new Date("December 02, 2013") | var mon = new Date("December 02, 2013"); | ||
var tue = new Date("December 03, 2013") | var tue = new Date("December 03, 2013"); | ||
var wed = new Date("December 04, 2013") | var wed = new Date("December 04, 2013"); | ||
var thu = new Date("December 05, 2013") | var thu = new Date("December 05, 2013"); | ||
var fri = new Date("December 06, 2013") | var fri = new Date("December 06, 2013"); | ||
var sat = new Date("December 07, 2013") | var sat = new Date("December 07, 2013"); | ||
var sun = new Date("December 08, 2013") | var sun = new Date("December 08, 2013"); | ||
var dates = [ thu, tue, mon, sun, fri, sat, wed ]; | var dates = [ thu, tue, mon, sun, fri, sat, wed ]; | ||
Line 53: | Line 109: | ||
alert(this.sound); | alert(this.sound); | ||
}; | }; | ||
} | } | ||
function Goose(){ | function Goose(){ | ||
} | } | ||
Goose.prototype = { | Goose.prototype = { | ||
sound : "Honk!" | sound : "Honk!" | ||
Line 63: | Line 120: | ||
new Duck().speak.call(new Goose); | new Duck().speak.call(new Goose); | ||
</source> | </source> | ||
http://jsbin.com/AyAkUlu/ | http://jsbin.com/AyAkUlu/2/edit |
Latest revision as of 12:14, 12 August 2014
Functions are First-Class Objects[edit]
<source lang="javascript"> function f1() {
window.alert("v");
}
function f2(func) {
func();
}
f2(f1); </source>
Functions Double as Constructor[edit]
<source lang="javascript"> // 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()); </source> 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[edit]
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. <source lang="javascript"> 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()); </source>
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.
<source lang="javascript"> alert( String(c) ); </source>
However, when string concatenation is performed, the hint for the primitive value is not string. Instead, the Object's valueOf may be called.
<source lang="javascript"> 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" </source>
Variable this[edit]
<source lang="javascript"> 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. </source>
http://jsbin.com/EnocIJi/1/edit
Assignment[edit]
Function.prototype.call[edit]
1) Convert a NodeList into an Array (Hint, see lesson 1 on Array Generics). <source lang="javascript"> var nodeList = document.body.childNodes; // your code here! var nodeArray; </source> http://jsbin.com/ihISoMEc/1/edit
Function.prototype.apply[edit]
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. <source lang="javascript"> 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; </source> 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. <source lang="javascript"> function Duck () {
this.sound = "Quack!"; this.speak = function() { alert(this.sound); };
}
function Goose(){ }
Goose.prototype = {
sound : "Honk!"
};
new Duck().speak.call(new Goose); </source> http://jsbin.com/AyAkUlu/2/edit