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. 4.

    NO.

  2. 6.

    IDEA! Surely someone has been in my same position and

    maybe he/she implemented some workaround.
  3. 10.

    OBJECTS IN JS come in a literal or a constructed

    form are collections of key/value pairs have a prototype
  4. 11.
  5. 12.

    THE CONSTRUCTED FORM car __proto__ color: ‘red’ Object() .prototype //

    constructed form var car = new Object(); car.color = ‘red’; Object.prototype .constructor built-in
  6. 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.
  7. 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
  8. 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’
  9. 16.

    ES5 OBJECT.CREATE() myVehicle __proto__ color: ‘red’ Vehicle.prototype var myVehicle =

    Object.create(Vehicle.prototype); myVehicle.color = ‘red’;
  10. 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
  11. 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.
  12. 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"
  13. 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"
  14. 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"
  15. 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"
  16. 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"
  17. 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"
  18. 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"
  19. 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
  20. 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
  21. 41.
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 53.

    OLOO STYLE Person Student giamir set getSchool init getName __proto__

    __proto__ __proto__ Object.prototype built-in
  29. 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
  30. 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
  31. 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