JS: Leave the classes to those other languages!

JS: Leave the classes to those other languages!

C54966aee8a212367249f653d3b1f8d2?s=128

Giamir Buoncristiani

April 22, 2016
Tweet

Transcript

  1. JS LEAVE THE CLASSES TO THOSE OTHER LANGUAGES!

  2. I’M A DEVELOPER, I HAVE CLASS.

  3. DOES JS HAVE CLASSES?

  4. NO.

  5. AND NOW?

  6. IDEA! Surely someone has been in my same position and

    maybe he/she implemented some workaround.
  7. WHAT THE HECK! MIXINS PARASITIC INHERITANCE PROTOTYPAL INHERITANCE ?

  8. YOU NEED TO LEARN JS

  9. AGENDA PSEUDOCLASSES JS PROTOTYPE CHAIN ALTERNATIVE PATTERNS

  10. OBJECTS IN JS come in a literal or a constructed

    form are collections of key/value pairs have a prototype
  11. THE LITERAL FORM car __proto__ color: ‘red’ Object.prototype // literal

    form var car = { color: ‘red’ }; built-in
  12. THE CONSTRUCTED FORM car __proto__ color: ‘red’ Object() .prototype //

    constructed form var car = new Object(); car.color = ‘red’; Object.prototype .constructor built-in
  13. WHAT IS A FUNCTION? is a sub-type of object ("callable

    object") function Vehicle() { this.color = ‘red’; } can be handled like any other plain object Vehicle() .prototype Vehicle.prototype automatically get a property called prototype, which is just an empty object.
  14. WHAT IS A CONSTRUCTOR? is any function which is used

    as a constructor function Vehicle() { this.color = ‘red’; } var myVehicle = new Vehicle(); I can use Vehicle as a constructor
  15. A “NEW” CONFUSION What happens when a constructor is called?

    var myVehicle = new Vehicle(); 1. It creates a new object 2. It sets the constructor property of the object to Vehicle 3. It sets up the object to delegate to Vehicle.prototype 4. It calls Vehicle() in the context of the new object myVehicle __proto__ Vehicle() .prototype Vehicle.prototype .constructor color: ‘red’
  16. ES5 OBJECT.CREATE() myVehicle __proto__ color: ‘red’ Vehicle.prototype var myVehicle =

    Object.create(Vehicle.prototype); myVehicle.color = ‘red’;
  17. PROTOTYPE CHAIN __proto__ shape triangle __proto__ border: ‘red’ null __proto__

    Object.prototype built-in var shape = { border: ‘red’ }; var triangle = Object.create( shape ); triangle.border; triangle.area; // ‘red’ // undefined
  18. AGENDA PSEUDOCLASSES JS PROTOTYPE CHAIN ALTERNATIVE PATTERNS

  19. REAL CLASSES

  20. CLASSIC INHERITANCE class Person attr_reader :name def initialize(name) @name =

    name end end class Student < Person attr_reader :school def initialize(name, school) super(name) @school = school end end giamir = Student.new('Giamir', 'TWU') puts giamir.name # Giamir puts giamir.school # TWU Classes are blue-prints Objects are copies of all the characteristics described by classes.
  21. PSEUDO CLASSES

  22. PROTOTYPAL INHERITANCE function Person(name) { this.name = name; } Person.prototype.getName

    = function() { return this.name; }; function Student(name,school) { Person.call( this, name ); // pseudo-polymorphism this.school = school; } Student.prototype = Object.create(Person.prototype); Student.prototype.getSchool = function() { return this.school; }; var giamir = new Student('Giamir','TWU'); giamir.getName(); // "Giamir" giamir.getSchool(); // "TWU"
  23. MENTAL MAPS TIME

  24. PSEUDOCLASSES STYLE Object.prototype built-in Object() .prototype

  25. PSEUDOCLASSES STYLE function Person(name) { this.name = name; } Person.prototype.getName

    = function() { return this.name; }; function Student(name,school) { Person.call( this, name ); // pseudo-polymorphism this.school = school; } Student.prototype = Object.create(Person.prototype); Student.prototype.getSchool = function() { return this.school; }; var giamir = new Student('Giamir','TWU'); giamir.getName(); // "Giamir" giamir.getSchool(); // "TWU"
  26. PSEUDOCLASSES STYLE Person.prototype Object.prototype built-in __proto__ Object() .prototype Person() .prototype

  27. PSEUDOCLASSES STYLE function Person(name) { this.name = name; } Person.prototype.getName

    = function() { return this.name; }; function Student(name,school) { Person.call( this, name ); // pseudo-polymorphism this.school = school; } Student.prototype = Object.create(Person.prototype); Student.prototype.getSchool = function() { return this.school; }; var giamir = new Student('Giamir','TWU'); giamir.getName(); // "Giamir" giamir.getSchool(); // "TWU"
  28. PSEUDOCLASSES STYLE Person.prototype getName Object.prototype built-in __proto__ Object() .prototype Person()

    .prototype
  29. PSEUDOCLASSES STYLE function Person(name) { this.name = name; } Person.prototype.getName

    = function() { return this.name; }; function Student(name,school) { Person.call( this, name ); // pseudo-polymorphism this.school = school; } Student.prototype = Object.create(Person.prototype); Student.prototype.getSchool = function() { return this.school; }; var giamir = new Student('Giamir','TWU'); giamir.getName(); // "Giamir" giamir.getSchool(); // "TWU"
  30. PSEUDOCLASSES STYLE Person.prototype Student.prototype getName Object.prototype built-in __proto__ Object() .prototype

    Person() .prototype Student() .prototype __proto__
  31. PSEUDOCLASSES STYLE function Person(name) { this.name = name; } Person.prototype.getName

    = function() { return this.name; }; function Student(name,school) { Person.call( this, name ); // pseudo-polymorphism this.school = school; } Student.prototype = Object.create(Person.prototype); Student.prototype.getSchool = function() { return this.school; }; var giamir = new Student('Giamir','TWU'); giamir.getName(); // "Giamir" giamir.getSchool(); // "TWU"
  32. PSEUDOCLASSES STYLE Person.prototype Student.prototype getName __proto__ Object.prototype built-in __proto__ Object()

    .prototype Person() .prototype Student() .prototype
  33. PSEUDOCLASSES STYLE function Person(name) { this.name = name; } Person.prototype.getName

    = function() { return this.name; }; function Student(name,school) { Person.call( this, name ); // pseudo-polymorphism this.school = school; } Student.prototype = Object.create(Person.prototype); Student.prototype.getSchool = function() { return this.school; }; var giamir = new Student('Giamir','TWU'); giamir.getName(); // "Giamir" giamir.getSchool(); // "TWU"
  34. PSEUDOCLASSES STYLE Person.prototype Student.prototype getSchool getName __proto__ Object.prototype built-in __proto__

    Object() .prototype Person() .prototype Student() .prototype
  35. PSEUDOCLASSES STYLE function Person(name) { this.name = name; } Person.prototype.getName

    = function() { return this.name; }; function Student(name,school) { Person.call( this, name ); // pseudo-polymorphism this.school = school; } Student.prototype = Object.create(Person.prototype); Student.prototype.getSchool = function() { return this.school; }; var giamir = new Student('Giamir','TWU'); giamir.getName(); // "Giamir" giamir.getSchool(); // "TWU"
  36. PSEUDOCLASSES STYLE Person.prototype Student.prototype giamir getSchool getName __proto__ name school

    __proto__ Object.prototype built-in __proto__ Object() .prototype Person() .prototype Student() .prototype INHERITANCE
  37. PSEUDOCLASSES STYLE Person.prototype Student.prototype giamir getSchool getName __proto__ name school

    __proto__ Object.prototype built-in __proto__ Object() .prototype Person() .prototype Student() .prototype INHERITANCE DELEGATION
  38. AGENDA PSEUDOCLASSES JS PROTOTYPE CHAIN ALTERNATIVE PATTERNS

  39. DO I REALLY NEED TO FAKE CLASSES?

  40. THE ALTERNATIVE EMBRACE OLOO “Kyle Simpson says…”

  41. WHAT!?

  42. WHAT IS OLOO? is a style pattern to implement delegation

    oriented design stands for objects linked to other objects is a much simpler and straightforward way to work in JS gets rid of the confusing “new” operator
  43. OLOO STYLE var Person = { init: function(name) { this.name

    = name; }, getName: function() { return this.name; } }; var Student = Object.create(Person); Student.set = function(name, school) { this.init(name); this.school = school; }; Student.getSchool = function() { return this.school; }; var giamir = Object.create(Student); giamir.set('Giamir', 'TWU'); giamir.getName(); // Giamir giamir.getSchool(); // TWU
  44. MENTAL MAPS TIME

  45. OLOO STYLE Object.prototype built-in

  46. OLOO STYLE var Person = { init: function(name) { this.name

    = name; }, getName: function() { return this.name; } }; var Student = Object.create(Person); Student.set = function(name, school) { this.init(name); this.school = school; }; Student.getSchool = function() { return this.school; }; var giamir = Object.create(Student); giamir.set('Giamir', 'TWU'); giamir.getName(); // Giamir giamir.getSchool(); // TWU
  47. OLOO STYLE Person init getName __proto__ Object.prototype built-in

  48. OLOO STYLE var Person = { init: function(name) { this.name

    = name; }, getName: function() { return this.name; } }; var Student = Object.create(Person); Student.set = function(name, school) { this.init(name); this.school = school; }; Student.getSchool = function() { return this.school; }; var giamir = Object.create(Student); giamir.set('Giamir', 'TWU'); giamir.getName(); // Giamir giamir.getSchool(); // TWU
  49. OLOO STYLE Person Student init getName __proto__ __proto__ Object.prototype built-in

  50. OLOO STYLE var Person = { init: function(name) { this.name

    = name; }, getName: function() { return this.name; } }; var Student = Object.create(Person); Student.set = function(name, school) { this.init(name); this.school = school; }; Student.getSchool = function() { return this.school; }; var giamir = Object.create(Student); giamir.set('Giamir', 'TWU'); giamir.getName(); // Giamir giamir.getSchool(); // TWU
  51. OLOO STYLE Person Student set getSchool init getName __proto__ __proto__

    Object.prototype built-in
  52. OLOO STYLE var Person = { init: function(name) { this.name

    = name; }, getName: function() { return this.name; } }; var Student = Object.create(Person); Student.set = function(name, school) { this.init(name); this.school = school; }; Student.getSchool = function() { return this.school; }; var giamir = Object.create(Student); giamir.set('Giamir', 'TWU'); giamir.getName(); // Giamir giamir.getSchool(); // TWU
  53. OLOO STYLE Person Student giamir set getSchool init getName __proto__

    __proto__ __proto__ Object.prototype built-in
  54. OLOO STYLE var Person = { init: function(name) { this.name

    = name; }, getName: function() { return this.name; } }; var Student = Object.create(Person); Student.set = function(name, school) { this.init(name); this.school = school; }; Student.getSchool = function() { return this.school; }; var giamir = Object.create(Student); giamir.set('Giamir', 'TWU'); giamir.getName(); // Giamir giamir.getSchool(); // TWU
  55. OLOO STYLE Person Student giamir set getSchool init getName __proto__

    __proto__ __proto__ Object.prototype built-in name school OBJECTS LINKED TO OTHER OBJECTS OLOO
  56. FINALLY ALL CLEAR! (…MAYBE)

  57. WRAPPING UP can be avoided adopting delegation oriented design faking

    classes introduces another level of complexity GETTING OUT OF OUR COMFORT ZONE IS THE KEY TO LEARN classes are an optional design pattern for code
  58. THANK YOU. hello@giamir.com @giamir Giamir Buoncristiani