JS: Leave the classes to those other languages!

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