¿Cómo funciona this en JavaScript?

En JavaScript, comprender el funcionamiento de this en las llamadas a funciones no suele ser sencillo al principio. Sin embargo, si se entiende lo que internamente hace JavaScript en las llamadas a funciones, todo queda más claro:

Cuando se llama a una función:

foo('hola')

internamente es como si se hiciera lo siguiente:

foo.call(undefined/window, 'hola');

Por otro lado, si se llama a una función perteneciente a un objeto:

objeto.foo('hola')

internamente es como si se hiciera lo siguiente:

foo.call(objeto, 'hola');

El primer parámetro de call es el valor de this dentro de la función. En modo estricto (strict mode), el valor pasado como this será undefined, mientras que en modo no estricto, será el objeto global (objeto window en cualquier navegador).

Teniendo esto en cuenta, veamos lo que pasaría con un objeto como el siguiente:

var person = {
    firstName: 'Isidro',
    sayHello: function() {
        console.log("Hello, I'm "+this.firstName);
    }
}

Si hacemos:

    person.sayHello();

Por consola se mostrará "Hello, I'm Isidro". En este caso, internamente se ejecuta algo como:

    person.sayHello.call(person);
   
Por lo que this.firstName "sería" person.firstName

¿Qué pasaría si obtengo una referencia a la función del objeto y la llamo desde fuera en modo no estricto?

var f = person.sayHello;
f();

En este caso, por consola se pintará "Hello, I'm undefined"

Esto es porque internamente se ejecuta algo como:

    person.sayHello.call(window);
   
y por tanto, como en el objeto window no hay ningún objeto llamado firstName, muestra undefined.   

En este caso, si quisiéramos ligar la función con un objeto en particular, usaríamos bind:

    f = person.sayHello.bind(person);
   
Ahora al ejecutar la función devolvería:   

    f(); // Hello, I'm Isidro
   
¿Qué pasa con las funciones anónimas?

Supongamos que la clase person es ahora:

var person = {
    firstName: 'Isidro',
    sayHello: function() {
        function getCapitalizeName() {
            return this.firstName.toUpperCase();
        }
        console.log("Hello, I'm "+getCapitalizeName());
    }
}

y ejecutamos:

    person.sayHello();   
   
En este caso, se muestro por consola de nuevo: "Hello, I'm undefined"
El motivo se entiende claramente si traducimos la llamada a la función getCapitalizeName() por lo que realmente se está ejecutando:

    getCapitalizeName.call(window)

De nuevo, dentro de getCapitalizeName, this apuntará a window y como en el objeto window no existe el objeto firstName, devuelve undefined. No podemos pensar que como la función getCapitalizeName está definida dentro del objeto person, automáticamente this apunta a person.

Para que funcione tal como esperamos, podríamos llamar a la función getCapitalizedName de forma explícita:

    console.log("Hello, I'm "+getCapitalizeName.call(this));  

En este caso, mostraría: Hello, I'm ISIDRO

Herencia Prototípica y AngularJS

A veces, aquellos que vienen de lenguajes con herencia clásica como Java, se encuentran con serios problemas cuando empiezan a trabajar con otros tipos de herencia como la prototípica de Javascript (Prototypal Inheritance). 

Un ejemplo es cuando se trabaja con AngularJS y se usan directivas que crean scopes que heredan prototípicamente de su scope padre, en concreto, directivas como ng-include, ng-switch, ng-controller o directivas con scope:true. En estos casos, el desarrollo puede generar dolores de cabeza si no se entiende bien este tipo de herencia.

Veamos un ejemplo. Supongamos que tenemos una directiva como la siguiente:

directive('test', [function() {

    return {

     scope: true,

     template: '<input type="checkbox" ng-model="active"></input>'

    };

}])

En este caso, la directiva crea un nuevo scope que hereda prototípicamente del scope padre.

Supongamos que tenemos un sencillo controlador como el siguiente:

controller('TestCtrl', ['$scope', function($scope) {

$scope.active=true;

}]);

Si nuestro template es el siguiente:

<div ng-controller="TestCtrl">

<div test1></div>{{active}}

</div>

Vemos que cuando ejecutamos la aplicación, aparece el checkbox marcado y bajo él la palabra true como era de esperar, ya que en el controlador la variable active se inicia a true.

Hasta aquí todo bien. Pero, ¿qué pasa cuando desmarcamos el checkbox?  ¡Sigue apareciendo true debajo del checkbox!

¿No debería cambiar la vista adaptándose al valor actual? Pues sí, pero aquí entra en juego la herencia prototípica que complica un poco las cosas.

La herencia prototípica tiene la siguiente peculiaridad: para leer siempre se recorre la cadena de prototipos hacia arriba hasta encontrar la variable, mientras que para escribir no se recorre, por el contrario, se escribe en el objeto (scope) actual.

Lo que realmente está pasando es que tenemos dos scopes, uno el del controlador (S1) y otro el de la directiva (S2) que hereda prototípicamente de S1:

S1, que es el scope asociado al controlador (TestCtrl), incluye la variable active=true.

S2, que es el scope asociado a la directiva, no incluye esa variable.

Cuando se ejecuta la aplicación, la directiva enlaza el valor del checkbox con la variable active del scope. Pero, ¿de qué scope? pues del scope de la directiva. En este caso, intenta leer el valor de la variable active en el scope S2. Como en este scope no está definida, siguiendo las reglas de la herencia prototípica, busca en el scope padre S1 donde sí se encuentra y se muestra el checkbox marcado. Por otro lado, en la vista se muestra true porque ésta va enlazada con el scope S1 del controlador.

Cuando desmarcamos el check, lo que se está haciendo es una escritura. De nuevo, se comienza por el scope de la directiva S2. Como antes, en este scope no se encuentra la variable active y, aquí surge la confusión, se crea una nueva variable active con el estado false en S2.

En este momento hay definidas dos variables active, una en S1 con el valor true y otra en S2 con el valor false. La nueva variable active de S2 es la que a partir de ahora estará asociada al checkbox y la S1 seguirá asociada al controlador (vista). Es por ello, que en la vista aparece true ya que realmente la variable que se está leyendo para formar la vista es la de S1.

Si volviéramos a marcar el checkbox, el proceso sería el mismo, quedando en este caso la variable active de S2 con valor true, el checkbox marcado y en la vista la palabra true proveniente de la variable active del scope S1.

Una forma para evitar este tipo de problemas es usar variables accedidas por referencia en vez de por valor. Pero esto lo veremos en otro post otro día.

Peticiones HTTP asíncronas con AngularJS

Esta es una forma de hacer peticiones Get asíncronas con AngularJS:

angular.module('TestApp').
controller('MainCtrl', ['Async', function (Async) {     
  Async.get(<URL>).then(
      function(data) {
          console.log("OK:",data);
      }, function(error) {
          console.log("ERROR:", error);
      });
}]).
// Servicio que encapsula operaciones asíncronas
factory('Async', ['$http', function($http) {     
  return {
      get: function(url) {
        var promise = $http.get(url).then(function (response) {
          // Devuelvo el body
          return response.data;
        });
           
        return promise;
      }
  };
}]);

He creado un servicio llamado Async con una función "get" que devuelve un objeto "promise". Este objeto promise es consumido de forma habitual por el llamante, en este caso un controlador llamado "MainCtrl"

Si la respuesta es correcta, se devuelve al controlador el body del mensaje http. En el caso particular que el body sea una cadena JSON, Angular la convierte automáticamente a un objeto.

Si la llamada acaba en error, se devuelve al controlador el objeto de error con el status y el mensaje de error, entre otra información.

Javascript prototypal inheritance with Object.create

An advantage that can turns out in disadvantage is that Javascript is a very expressive language. You can do something in very different ways. In this case I'll show a way to model inheritance using Object.create (ECMAScript 5).

In the following example, two objects are created: parent and child. These both objects are like "classes" in lenguajes with classical inheritance as Java. From those objects, I create two instances using Object.create: Pepe (the parent) and Pablo (the child). In this case, Pablo prototypically inherits from Pepe.


// In case of using IE 
if (typeof console === 'undefined') {
  console = {
  log: function(text) {
  alert(text);
  }
  }
}
    
// In case of using IE<10
if(typeof Object.create !== 'function') { 
  Object.create = function (o) { 
    function F() {}; 
    F.prototype = o; 
    return new F(); 
  }; 
}
    
// Helper to add properties to an object
function extend(obj, props) { 
  for(prop in props) { 
    if(props.hasOwnProperty(prop)) { 
      obj[prop] = props[prop]; 
    } 
  } 
}
    
    // Parent object
var parent = {
talk: function() {
console.log("I'm "+this.name);
},
work: function() {
console.log("I'm going to work");
},
init: function(name) {
this.name=name;
return this;
},
create: function(name) {
return Object.create(this).init(name);
}
};

// Child object
var child = Object.create(parent)
extend(child, {
work : function() {
    console.log("I can't work, I'm a child!");
}
});

// Parent instance
var pepe = parent.create("Pepe");

// Child instance
var pablo = child.create("Pablo");

pepe.talk(); // I'm Pepe
pepe.work(); // I'm going to work

pablo.talk(); // I'm Pablo
pablo.work(); // I can't work, I'm a child!