JS: Leave the classes to those other languages!

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.


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

26.

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

27.


28.

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

29.


30.

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

31.


32.

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

33.


34.

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

35.


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.


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.


47.

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

48.


49.

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

50.


51.

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

52.


53.

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

54.


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

JS: Leave the classes to those other languages!

JS: Leave the classes to those other languages!

Want more?

Transcript