Object Oriented Design (Khan Academy Intro to JS: Drawing and Animation > OOD)
// Prototypes and instances:
Prototypes are blueprints
Object instances are created from prototypes
// To define an object type in JavaScript, we first have to define a "constructor function".
var Book = function(title, author, numPages) {
this.title = title;
this.author = author;
this.numPages = numPages;
this.currentPage = 0;
};
// To create an instance of a Book object, we declare a new variable to store it, then use the new keyword, followed by the constructor function name, and pass in the arguments that the constructor expects:
var book = new Book("Robot Dreams", "Isaac Asimov", 320);
// We can then access any properties that we stored in the object using dot notation:
println("I loved reading " + book.title); // I loved reading Robot Dreams
println(book.author + " is my fav author"); // "Isaac Asimov" is my fav author
// Behaviors. Object prototype attach functions to our object type definitions:
Book.prototype.readItAll = function() {
this.currentPage = this.numPages;
println("You read " + this.numPages + " pages!");
};
// We can then call the function (which we call a method, since it's attached to an object), like so:
var book = new Book("Animal Farm", "George Orwell", 112);
book.readItAll(); // You read 112 pages!
// Book is the "parent" object type, let's make a paperback. A paperback is like a book, but it has one main thing different, at least for our program: it has a cover image. So, our constructor needs to take an extra argument, to take in that extra info. Then call the Book constructor from the PaperBack constructor, and pass in those arguments. Add one more line to store the cover property in the object:
var PaperBack = function(title, author, numPages, cover) {
Book.call(this, title, author, numPages);
this.cover = cover;
}
// PaperBack prototype should be based on the Book prototype:
PaperBack.prototype = Object.create(Book.prototype);
// Define functions on the prototype, after that line above:
PaperBack.prototype.burn = function() {
println("Omg, you burnt all " + this.numPages + " pages");
this.numPages = 0;
};
// And now we can create a new paperback, read it all, and burn it!
var calvin = new PaperBack("The Essential Calvin & Hobbes", "Bill Watterson", 256, "http://ecx.images-amazon.com/images/I/61M41hxr0zL.jpg");
calvin.readItAll(); // You read 256 pages!
calvin.burn(); // Omg, you burnt all 256 pages!
Object Inheritance (Khan Academy Intro to JS: Drawing and Animation > OOD > Creature)
khan academy oo design > object inheritance
var Creature = function(nickname, age, x, y) {
this.nickname = nickname;
this.age = age + "yrs old";
this.x = x;
this.y = y;
};
Creature.prototype.talk = function() {
text("SUPPP!?!?!?!??!", this.x+20, this.y+140);
};
var Hopper = function(nickname, age, x, y) {
Creature.call(this, nickname, age, x, y);
};
Hopper.prototype = Object.create(Creature.prototype);
Hopper.prototype.draw = function() {
fill(217, 90, 0);
var img = getImage("creatures/Hopper-Happy");
image(img, this.x, this.y);
var txt = this.nickname + ", " + this.age;
text(txt, this.x+10, this.y-7);
};
Hopper.prototype.hooray = function() {
text("Hooooray!!!", this.x+29, this.y+140);
};
var Winston = function(nickname, age, x, y) {
Creature.call(this, nickname, age, x, y);
};
Winston.prototype = Object.create(Creature.prototype);
Winston.prototype.draw = function() {
fill(255, 0, 0);
var img = getImage("creatures/Winston");
image(img, this.x, this.y);
var txt = this.nickname + ", " + this.age;
text(txt, this.x+20, this.y-10);
};
var winstonTeen = new Winston("Winsteen", 15, 20, 50);
var winstonAdult = new Winston("Mr. Winst-a-lot", 30, 229, 50);
winstonTeen.draw();
winstonTeen.talk();
winstonAdult.draw();
winstonAdult.talk();
var lilHopper = new Hopper("Little Hopper", 15, 20, 240);
lilHopper.draw();
lilHopper.talk();
var bigHopper = new Hopper("Big Hopper", 30, 220, 240);
bigHopper.draw();
bigHopper.hooray();
Object Inheritance (Khan Academy Intro to JS: Drawing and Animation > OOD > Flower)
// make the Flower constructor
var Flower = function(x, y, height) {
this.x = x;
this.y = y;
this.height = height;
};
// create an object prototype that adds growBy method to Flower
Flower.prototype.growBy = function(amount) {
this.height += amount;
};
// change Tulip constructor to call Flower prototype so it inherits the growBy method
var Tulip = function(x, y, height) {
Flower.call(this, x, y, height);
};
Tulip.prototype = Object.create(Flower.prototype);
// change Sunflower constructor to do the same
var Sunflower = function(x, y, height) {
Flower.call(this, x, y, height);
};
Sunflower.prototype = Object.create(Flower.prototype);
OO example address book (Epicodus)
http://www.learnhowtoprogram.com/lessons/an-oo-example-address-book
//prototype
var Contact = {
fullName: function(){
return this.firstname + " " + this.lastname;
}
};
var Address = {};
//instance
var emily = Object.create(Contact);
emily.addresses = [];
var emilyHome = Object.create(Address);
emilyHome.state = "California";
emilyHome.city = "Los Angeles";
emilyHome.street = "1105 Idlewood Rd";
emily.addresses.push(emilyHome);
var mike = Object.create(Contact);
mike.addresses = [];
var mikeHome = Object.create(Address);
mikeHome.state = "Florida";
mikeHome.city = "Miami";
mike.addresses.push(mikeHome);
// create two objects
// create an empty array that we add on each instance
// push objects into the array, so if one object has many objects, you can add them
var Contact = {
fullName: function(){
return this.firstName + " " + this.lastName;
}
};
var Address = {
fullAddress: function(){
return this.street + ", " + this.city + ", " + this.state;
}
};
$("form#new-contact").submit(function(event){
event.preventDefault();
var inputtedFirstName = $("input#new-first-name").val();
var inputtedLastName = $("input#new-last-name").val();
var newContact = Object.create(Contact);
newContact.firstName = inputtedFirstName;
newContact.lastName = inputtedLastName;
newContact.addresses = [];
$(".new-address").each(function() {
var inputtedStreet = $(this).find("input.new-street").val();
var inputtedCity = $(this).find("input.new-city").val();
var inputtedState = $(this).find("input.new-state").val();
var newAddress = Object.create(Address);
newAddress.street = inputtedStreet;
newAddress.city = inputtedCity;
newAddress.state = inputtedState;
newContact.addresses.push(newAddress);
});
});
JS patterns for OO (Epicodus)
http://www.learnhowtoprogram.com/lessons/some-javascript-patterns-for-oo
var Contact = {
all: [],
create: function(firstName, lastName) {
var contact = Object.create(Contact);
contact.initialize(firstName, lastName);
Contact.all.push(contact);
return contact;
},
initialize: function(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.addresses = [];
},
fullName: function(){
return this.firstName + " " + this.lastName;
}
};
