$30 off During Our Annual Pro Sale. View Details »

JS: Leave the classes to those other languages!

JS: Leave the classes to those other languages!

Giamir Buoncristiani

April 22, 2016
Tweet

More Decks by Giamir Buoncristiani

Other Decks in Programming

Transcript

  1. JS
    LEAVE THE CLASSES
    TO THOSE OTHER
    LANGUAGES!

    View Slide

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

    View Slide

  3. DOES JS HAVE
    CLASSES?

    View Slide

  4. NO.

    View Slide

  5. AND NOW?

    View Slide

  6. IDEA!
    Surely someone has been in my same position and
    maybe he/she implemented some workaround.

    View Slide

  7. WHAT THE HECK!
    MIXINS
    PARASITIC INHERITANCE
    PROTOTYPAL INHERITANCE
    ?

    View Slide

  8. YOU NEED TO LEARN JS

    View Slide

  9. AGENDA
    PSEUDOCLASSES
    JS PROTOTYPE CHAIN
    ALTERNATIVE PATTERNS

    View Slide

  10. OBJECTS IN JS
    come in a literal or a constructed form
    are collections of key/value pairs
    have a prototype

    View Slide

  11. THE LITERAL FORM
    car
    __proto__
    color: ‘red’
    Object.prototype
    // literal form
    var car = {
    color: ‘red’
    };
    built-in

    View Slide

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

    View Slide

  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.

    View Slide

  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

    View Slide

  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’

    View Slide

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

    View Slide

  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

    View Slide

  18. AGENDA
    PSEUDOCLASSES
    JS PROTOTYPE CHAIN
    ALTERNATIVE PATTERNS

    View Slide

  19. REAL
    CLASSES

    View Slide

  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.

    View Slide

  21. PSEUDO
    CLASSES

    View Slide

  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"

    View Slide

  23. MENTAL
    MAPS
    TIME

    View Slide

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

    View Slide

  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"

    View Slide

  26. PSEUDOCLASSES STYLE
    Person.prototype
    Object.prototype
    built-in
    __proto__
    Object()
    .prototype
    Person()
    .prototype

    View Slide

  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"

    View Slide

  28. PSEUDOCLASSES STYLE
    Person.prototype
    getName
    Object.prototype
    built-in
    __proto__
    Object()
    .prototype
    Person()
    .prototype

    View Slide

  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"

    View Slide

  30. PSEUDOCLASSES STYLE
    Person.prototype
    Student.prototype
    getName
    Object.prototype
    built-in
    __proto__
    Object()
    .prototype
    Person()
    .prototype
    Student()
    .prototype
    __proto__

    View Slide

  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"

    View Slide

  32. PSEUDOCLASSES STYLE
    Person.prototype
    Student.prototype
    getName
    __proto__
    Object.prototype
    built-in
    __proto__
    Object()
    .prototype
    Person()
    .prototype
    Student()
    .prototype

    View Slide

  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"

    View Slide

  34. PSEUDOCLASSES STYLE
    Person.prototype
    Student.prototype
    getSchool
    getName
    __proto__
    Object.prototype
    built-in
    __proto__
    Object()
    .prototype
    Person()
    .prototype
    Student()
    .prototype

    View Slide

  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"

    View Slide

  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

    View Slide

  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

    View Slide

  38. AGENDA
    PSEUDOCLASSES
    JS PROTOTYPE CHAIN
    ALTERNATIVE PATTERNS

    View Slide

  39. DO I REALLY
    NEED TO FAKE
    CLASSES?

    View Slide

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

    View Slide

  41. WHAT!?

    View Slide

  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

    View Slide

  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

    View Slide

  44. MENTAL
    MAPS
    TIME

    View Slide

  45. OLOO STYLE
    Object.prototype
    built-in

    View Slide

  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

    View Slide

  47. OLOO STYLE
    Person
    init
    getName
    __proto__
    Object.prototype
    built-in

    View Slide

  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

    View Slide

  49. OLOO STYLE
    Person
    Student
    init
    getName
    __proto__ __proto__
    Object.prototype
    built-in

    View Slide

  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

    View Slide

  51. OLOO STYLE
    Person
    Student
    set
    getSchool
    init
    getName
    __proto__ __proto__
    Object.prototype
    built-in

    View Slide

  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

    View Slide

  53. OLOO STYLE
    Person
    Student
    giamir
    set
    getSchool
    init
    getName
    __proto__ __proto__ __proto__
    Object.prototype
    built-in

    View Slide

  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

    View Slide

  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

    View Slide

  56. FINALLY
    ALL CLEAR!
    (…MAYBE)

    View Slide

  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

    View Slide

  58. THANK YOU.
    [email protected]
    @giamir
    Giamir Buoncristiani

    View Slide