Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Exciting JavaScript
 What makes it unique, how to use it.

           Eugene Lazutkin
  Dallas, TX, ClubAjax on 2/2/2010


• I will use JavaScript, JS, and ECMAScript
• The material is mostly based on
  ECMAScript ...
Why JavaScript?
• Browsers.
• CommonJS (ex-ServerJS) is gaining steam.
• CouchDB uses it to define “views”.
• Node.js with ...
JS the Language I
• JavaScript packages a formidable set of
  tools we can leverage to reduce
• While it doe...
JS the Language II
• Following paradigms can be supported:
 • Object-oriented programming (OOP).
 • Functional programming...
JS the Language III
• Let’s do an inventory of the language
  • To understand how JavaScript is different
 Available tools.

1 st   class functions

• We can create them on the fly.
 • Anonymous function.
• We can write them inline.
 • Function lit...
Function examples I
// “normal” function
function double1(x){
    return 2 * x;
// anonymous function
var double2 = func...
Function examples II
// takes function as an argument
function scale(f, x){
    return f(x);
// returns a function funct...
Closures I
• Closures are:
 • The most mysterious part of JavaScript.
 • The bane of beginners, and the source of
Closures II
• It is a function, which uses variables from its
  lexical environment.
• JavaScript closure uses external va...
Closures: examples
var a = 1;
// available here: a
function f1(x){
    var b = 2;
    // available here: a, f1, b, x
var: fine points I
• Only functions produce lexical scopes.
• It doesn’t matter where var statement is
  encountered: a var...
var: fine points II
function f(x){
    var n = 5, acc = 0;
    // available here: f, x, n, acc, i, d, b
    for(var i = 0; ...
Closures vs. Pure
• Pure functions:
 • Stateless.
 • Have no side effects.
 • Operate only on their arguments.
• Always re...
Why pure?
• Theoretically:
 • Easier to analyze the program for
 • Code can be rearranged and optimized
Practical closures I
// generate unique DOM ID
var uniqId = (function(){
 // truly private variables
 var prefix = “uniq_”...
Practical closures II
// parameterize a function
var scale = function(factor){
 return function(x){
     return factor * x...
this: fine points I
• Every function is called in a context of an
  object or the global scope.

• this is a pseudo-variabl...
this: fine points II
• Specifying a context implicitly:
  var name = “global”;
  var abc = function(a, b, c){ alert(this.na...
this: fine points III
• Specifying a context explicitly:
  var abc = function(a, b, c){ alert(this.name); };
  var myObj = ...
this: fine points IV
• Accessing outer this – just reassign this
  to a regular variable:
  function f1(){
   // this is “t...
• Another pseudo-variable with fine points
  and restrictions similar to this.
• It has two cool properties:
 • “...
Hash-based objects I
• Everything is an object. Sounds familiar?
• All objects are hash-based dictionaries of
  key-value ...
Hash-based objects II
• We can add/remove custom properties at
 • Read-only objects: numbers, strings,
Different flavors and approaches.

OOP: short intro
• Object-oriented programming is an
  important paradigm.
• It is a way to organize/partition code into
OOP: duck-typing I
• We can do OOP without classes!
• Example:
 • We have an iterator interface:
   • next() – returns “ne...
OOP: duck-typing II
• Notable:
 • The iterator interface here is a concept,
    it does’t have any corresponding code.
OOP: duck-typing III
• Let’s implement a counter from 1 to 5:
  var it = {
      value: 1, limit: 5,
      hasNext: functi...
OOP: duck-typing IV
• Let’s implement a stack-based iterator:
  var it = {
      stack: [1, 2, 3, 4, 5],
      hasNext: fu...
No constructors?
• What if we want to create several similar
• We need constructors.
• Yes, it is possible to h...
OOP: factories I
• Any function that return an object will do.
• Let’s construct our simple iterator:
  function makeIt(fr...
OOP: factories II
• Closure version of our simple iterator:
  function makeIt(from, to){
      var counter = from;
OOP: prototypes
• JavaScript has notions of constructors and
• But it doesn’t provide classes per se.
• The...
OOP: constructor I
• Constructor can be any function.
• When it runs its context is set to a newly
  created object.
  • U...
OOP: constructor II
• Constructor has one important property:
  • It points to a delegatee object.
• Usually ...
OOP: new operator
• new creates a proper object (a generic
  object for user-defined constructors).

• It takes a prototype...
OOP: delegate
• Now we can write a generic delegate:
  var delegate = (function(){
   function temp(){} // it’ll hold a pr...
OOP: using delegate I
var a = {
 hello: function(){ console.log(“Hello!”); },
 zen: function(){ console.log(“O-O-OM”); }
OOP: using delegate II
 var c = delegate(b);
 a.hello(); // Hello!
 b.hello(); // Huh?
 c.hello(); // Huh?
 c.hello = func...
OOP: advanced I
• We just saw how we can organize our code
  using the single inheritance.
• Many JS libraries provide OOP...
OOP: advanced II
• dojo.declare() provides:
 • Multiple inheritance based on class
    linearization (using C3 MRO).
 • Ch...
OOP: advanced III

• This is a big topic, which we can discuss
  some other time.

Important aspects.

AOP: short intro I
• Aspect-oriented programming pays
  attention to cross-cutting concerns
  implemented as advices, whic...
AOP: short intro II
• Examples of cross-cutting concerns:
 • Time/profile a function call.
 • Put all newly constructed obj...
AOP: short intro III
• All examples demonstrate common things:
 • Code required to perform an advice
    does not depend o...
AOP in JavaScript
• We can reliably intercept one thing: a
  method call.
  • In most cases it is more than enough for
AOP: toy example I
• Let’s implement the “afterReturning”
  function attachAfterReturning(obj, name, advice){
AOP: toy example II
• Let’s implement the “before” advice:
  function attachBefore(obj, name, advice){
      var old = obj...
AOP: toy example III
• Let’s implement the “around” advice:
  function attachAround(obj, name, advice){
      var old = ob...
AOP: advice example I
•   Simple tracer as “around” advice:
    var tracer = (function(){
     var stack = [];
AOP: using tracer
var fact = {
 fact: function(n){ return n < 2 ? 1 : n * this.fact(n); }
attachAround(fact, “fact”, tr...
AOP: advice example II
• Simple 1-arg memoization as two advices:
  var memoizer = function(){
   var cache = {};
   var m...
AOP: using memoizer
var fact = {
 fact: function(n){ return n < 2 ? 1 : n * this.fact(n); }
var mem = memoizer();
• There are some parallels between AOP and
 • Method chaining can be imagined as
   • Co...
• Super calls (inherited() calls) can be
  represented as “around” advice.
• These similarities are not by ...
More on AOP

• I wrote a blog post about AOP in JS and
  how it is implemented in Dojo:
 • http://lazutkin.com/blog/2008/m...
Intermediate stop
• …and I ran out of time.
• Next month we will talk about:
 • Functional programming (FP).
 • Domain-spe...
About me
• I am an independent software developer.
• My web site:
 • http://lazutkin.com
• Follow me on Tweeter:
 • http:/...
Nächste SlideShare
Wird geladen in …5

OOP: prototypes • JavaScript has Exciting JavaScript - Part I

8.512 Aufrufe

Veröffentlicht am

OOP: prototypes
• JavaScript has notions of constructors and
• But it doesn’t provide classes per se.
• The inheritance is of prototypal nature:
• Objects can delegate (statically) some
properties to another object, and so on.


Veröffentlicht in: Technologie