SlideShare a Scribd company logo

JavaScript OOP Workshop

•
•
G
German Escobar

The document discusses object-oriented programming concepts for JavaScript programmers. It covers object literals, constructor functions, prototypes, and how functions are objects in JavaScript. It shows examples of creating TodoItem objects using object literals, constructor functions, and prototypes. Methods like save() and destroy() are added to the TodoItem prototype and objects can inherit these methods. The document also discusses using functions as objects by adding a find() method directly to the TodoItem function.

1 of 10
Download to read offline
Programación Orientada a Objetos para programadores JS Germán Escobar germanescobar.net! @germanescobar! !
makeitreal .camp Objeto literal var todo_item1 = { airline: “Oceanic”, done: false }
makeitreal .camp Función constructora function TodoItem(title) { this.title = title; this.done = false; ! this.save = function } var ti1 = new TodoItem(“Mercado”); ! var ti2 = new TodoItem(“Tareas”);
makeitreal .camp Prototype En JavaScript no existe el concepto de clase. JavaScript es basado en prototipos.
makeitreal .camp Prototype function TodoItem(title) { … } var t1 = new TodoItem(“Mercado”); var t2 = new TodoItem(“Tareas”); ! TodoItem.prototype.save = function() { console.log(“saving” + this.title); } ! t1.save();
makeitreal .camp Prototype TodoItem.prototype • save() t1 (object) • title • done prototype Object.prototype prototype
makeitreal .camp Taller - Parte 1 var t1 = new TodoItem(“Mercado”); var t2 = new TodoItem(“Tareas”); ! t1.done = true t1.save(); ! t2.save(); t2.destroy();
makeitreal .camp Las funciones son objetos function TodoItem(title) { … } ! TodoItem.find = function(id) { … } ! var t1 = TodoItem.find(1); alert(t1.title); alert(t1.done);
makeitreal .camp Taller - Parte2
makeitreal .camp Callbacks :)

More Related Content

JavaScript OOP Workshop

  • 1. Programación Orientada a Objetos para programadores JS Germán Escobar germanescobar.net! @germanescobar! !
  • 2. makeitreal .camp Objeto literal var todo_item1 = { airline: “Oceanic”, done: false }
  • 3. makeitreal .camp Función constructora function TodoItem(title) { this.title = title; this.done = false; ! this.save = function } var ti1 = new TodoItem(“Mercado”); ! var ti2 = new TodoItem(“Tareas”);
  • 4. makeitreal .camp Prototype En JavaScript no existe el concepto de clase. JavaScript es basado en prototipos.
  • 5. makeitreal .camp Prototype function TodoItem(title) { … } var t1 = new TodoItem(“Mercado”); var t2 = new TodoItem(“Tareas”); ! TodoItem.prototype.save = function() { console.log(“saving” + this.title); } ! t1.save();
  • 6. makeitreal .camp Prototype TodoItem.prototype • save() t1 (object) • title • done prototype Object.prototype prototype
  • 7. makeitreal .camp Taller - Parte 1 var t1 = new TodoItem(“Mercado”); var t2 = new TodoItem(“Tareas”); ! t1.done = true t1.save(); ! t2.save(); t2.destroy();
  • 8. makeitreal .camp Las funciones son objetos function TodoItem(title) { … } ! TodoItem.find = function(id) { … } ! var t1 = TodoItem.find(1); alert(t1.title); alert(t1.done);