Advanced JavaScript Techniques

@hoatle – eXo Platform

Agenda

OOP (Object Oriented Programming) Scope Closure Context (this, arguments...)

OOP Object = data structure = properties + methods

var myPresent = { slides: 30, currentSlide: 17, previousSlide: function() { this.current--; }, nextSlide: function() { this.current++; }}

myPresent.slides; //30myPresent.currentSlide; //17myPresent.previousSlide();myPresent.currentSlide; //16myPresent.nextSlide();

OOP

3 primary goals of oop: Encapsulation Polymorphism Inheritance

Encapsulation: Hiding properties (private):

myPresent.slides; //not available

myPresent.currentSlide; //not available

Accessing by methods only:

myPresent.getSlides();

myPresent.getCurrentSlide();

myPresent.nextSlide();

myPresent.previousSlide();

Polymorphism

Ability of one type, A, to appear as and be used like another type, Bfunction getPresent(type) { if (type === 'special') { return new SpecialPresent(); } else if (type === 'normal')) { return new NormalPresent(); } else { throw new Error('type for Present is not specified'); }}var mySpecialPresent = getPresent('special');var myNormalPresent = getPresent('normal');methods can be called: getSlides(), getCurrentSlide(); previous(); next();

Inheritance

code reuse (sub class)var Present = Class.extend({ init: function() { this.slides = 30; this.currentSlide = 17; }, getSlides: function() { return this.slides; }, getCurrentSlide: function() { return this.currentSlide; }, previous: function() { this.currentSlide--; }, next: function() { this.currentSlide++; }});

var SpecialPresent = Present.extend({ init: function() { this._super(); this.specialPresent = 21; }, getSpecialPresent: function() { return this.specialPresent; }});

var specialPresent = new SpecialPresent();specialPresent.getSlides(); //30specialPresent.getSpecialPresent(); //21speicalPresent.next();specialPresent.getCurrentSlide(); //18

Simple inheritance by John Resig

Psedoclassical vs Prototypal schoolfunction Present() { var slides = 30, currentSlide = 17; this.getSlides = function() { return slides; } this.getCurrentSlide = function() { return currentSlide; } this.setCurrentSlide = function(i) { currentSlide = i; }}Present.prototype.previous = function() { this.setCurrentSlide((this.getCurrentSlide())--);}Present.prototype.next = function() { this.setCurrentSlide((this.getCurrentSlide())++);}

var myPresent = new Present();myPresent.next();myPresent.getSlides();

Psedoclassical vs Prototypal schoolvar Present = (function() { var slides = 30, currentSlide = 17; return { getSlides: function() { return slides; }, getCurrentSlide: function() { return currentSlide; }, previous: function() { currentSlide--; }, nextd: function() { currentSlide++; } };})();

function clone(obj) { var F = function() {}; F.prototype = obj; return new F();}var myPresent = clone(Present);myPresent.next();myPresent.getSlides();

Psedoclassical vs Prototypal school Google Closure lib Not really classical

util js version 2?

Raphaël truly natural js: object

prototypal inheritance

“I have been writing JavaScript for 8 years now, and I have never once found need to use an uber function. The super idea is fairly important in the classical pattern, but it appears to be unnecessary in the prototypal and functional patterns. I now see my early attempts to support the classical model in JavaScript as a mistake.” - Douglas Crockford

Scope Avoid global scope Use namespace Use function wrapper

Avoid global scopefunction test() { i = 3;}test();alert(i) //3

function test() { var i = 3;}test();alert(i); //undefined

function Present() {}

//what if other lib also define Present ??function?

(function() { function Present() { //implement here } //expose window.mylib = window.mylib || {}; window.mylib.Present = Present;})();

Closure

Inner function can access outer function and variable after the outer function executed

Function scope

Context

this

arguments

Thanks for your attention!

Questions?