O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Exciting JavaScript
 What makes it unique, how to use it.

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

...
Disclaimer

• I will use JavaScript, JS, and ECMAScript
  interchangeably.
• 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
  complexity.
• 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
  facilities:
  • To understand how JavaScript is different
  ...
Inventory
 Available tools.




        7
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
    most...
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
    f...
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
    correctness.
 • 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...
arguments
• 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
  will.
 • Read-only objects: numbers, strings,
    boolean...
OOP
Different flavors and approaches.




               27
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
  objects?
• 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;
      f...
OOP: prototypes
• JavaScript has notions of constructors and
  inheritance.
• 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:
  prototype.
  • 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.




                      45
AOP
Important aspects.




        46
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”
  advice:
  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 = [];
     return...
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();
attac...
AOP and OOP I
• There are some parallels between AOP and
  OOP:
 • Method chaining can be imagined as
    advices:
   • Co...
AOP and OOP II
• 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:/...
Próximos SlideShares
Carregando em…5
×

Disclaimer • I will use Exciting JavaScript - Part I

8.519 visualizações

Publicada em

Disclaimer

• I will use JavaScript, JS, and ECMAScript
interchangeably.
• The material is mostly based on
ECMAScript 3.




2

Publicada em: Tecnologia

×