Javascript with Classes

My talk on MeetUp https://www.meetup.com/pt-BR/poaswdev/events/229265689/

#javascript #meetup

Transcript

1. Javascript with Classes Henrique Schreiner
2. Where to find me? @hmschreiner /in/henriqueschreiner
3. Fundamentals
4. Scope - Responsible for the fundamental part of encapsulation - Scope is like several boxes, one inside another (Matryoshka doll) - Each box can see outside through all boxes which contain it, but it cannot see inside the boxes it contains https://developer.mozilla.org/en-US/docs/Glossary/Scope
5. Matryoshka Doll
7. Strict Mode - Introduced in ECMAScript 5 - Turns JavaScript into a more serious language - Force the interpreter to throw errors if the code tries to indirectly create global variables https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
9. Closures - Prevent polluting the global scope - Feature of functions (anonymous or not) which turn its containing objects (functions or variables) invisible outside of it https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
11. Arguments - The basis for our method signatures on OOP - A function may be called with any number of arguments, no matter how many of them are listed - Parameters are the names listed in the function definition - Arguments are the real values passed to (and received by) the function - Arguments which are not provided become undefined http://www.w3schools.com/js/js_function_parameters.asp http://javascript.info/tutorial/arguments
13. Objects - Almost everything in JavaScript is an object - Objects are king. If you understand objects, you understand JavaScript - They need no class to be instantiated from and they can completely change their shape in runtime http://www.w3schools.com/js/js_objects.asp https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
15. Context - One of the most misunderstood concepts in JavaScript - Basically is what object the “this” special pointer refers to - Must not to be confused with scope - Crucial to the OOP techniques - Kept in mind when we need to pass functions as arguments, usually when integrating OOP code with other basic JavaScript constructs such as event handlers and callbacks https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
17. Object Orientation (OO)
18. Classes - Since JavaScript doesn’t officially support classes these are sometimes called "pseudo classes" - We’ll just refer to them as classes for simplicity https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
20. Constructors - Declaring a class can be achieved with functions - The closure around it is simply for aesthetics right now, but it will help us keep our class organized soon - The inner function is our class constructor - We know it’s a class because it’s name starts with a capital letter (for convenience) - The comment right above it can also help it’s identification - What really turns this simple function into a pseudo class is how we use it - Inside the constructor function, we use "this" to reference the object, so we can add members, like properties https://css-tricks.com/understanding-javascript-constructors https://javascript.info/tutorial/constructor
21. Methods - Since we now know how to declare classes with their own members we may want to add methods to them so they encapsulate their own functionality using JavaScript prototypes - Every JavaScript object has a prototype (prototype is also an object) - All JavaScript objects inherit their properties and methods from their prototype - Objects created using an object literal, or with new Object(), inherit from a prototype called Object.prototype - The Object.prototype is on the top of the prototype chain - All JavaScript objects (Date, Array, RegExp, Function, ....) inherit from the Object. prototype http://www.w3schools.com/js/js_object_methods.asp http://www.w3schools.com/js/js_object_prototypes.asp https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions
23. Inheritance - When we think in code reusability, we think about nheritance and composition - With inheritance, we have a parent class which is extended by other classes which inherit from it - We basically have all of the functionality from the parent class, plus any other functionality on the inheriting class https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/call https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/create
25. - We created three classes: Grandfather, Father and Son - Son extends (inherits from) Father, which extends Grandfather - We can implement "getFullName()" and "setName()" only once in Grandfather and use it on instances of Grandfather, Father and Son - We explicitly called the super constructor from the inherited class in the inheriting class constructor, enforcing proper object initialization - The use of a init function guarantees that all methods have been defined before we actually instantiate an object from our class
26. To override any inherited (super) method, we just declare it in the inheriting class, like this:
27. If we ever need to call the inherited (super) method, e.g. within an overridden method, we can do it like this:
28. Composition - There’s another way of reusing code, by means of composition - We try to encapsulate functionality in classes which contain other classes which implement their specific functionality - Must not be confused with regular Aggregation, that allows elements to live independently, while composition enforces a relation in which one element does not exist without the other
30. Composition X Inheritance Composition: when a class is composed of other classes; an instance of an object has references to instances of other objects Inheritance: when a class inherits methods and properties from another class http://stackoverflow.com/questions/8696695/composition-inheritance-and-aggregation-in-javascript
31. Polymorphism - JavaScript does not perform type checking in your objects, so benefiting from polymorphism is almost trivial - It’s our responsability to make sure our objects actually implement every expected method - We can use the inheritance technique to achieve this, but keep in mind it can significantly increase complexity and code verbosity - It’s usually simpler to just use good naming convention while unit testing ensures object compatibility
32. Private Members - Since our class is nicely wrapped inside its own closure, we can add as many private members as we want - This is our public members, in the first place:
33. - The outer MyClass is a reference to the class in the outside scope, so the rest of our code can actually use it - Since we add our public methods (either instance or static) to it, they’re public too - Don’t forget to return the reference to our class constructor (the inner MyClass) at the end of the closure, so it’s actually assigned to the outer reference - At this point, we can assume everything else will be private, because it will be visible only inside our class’ scope
34. Code Examples
35. Questions?
36. Thank you!