JavaScript

tips & tricks

by Capy (Marcelo)

About.me

De que vamos a hablar

• this
• Estructuras para oop
• Funciones autoejecutables
• Algunos tips & tricks
• Hablar con el DOM a bajo nivel
• Closures
• __proto__
• Y vamos a charlar un poco :)

Funciones

autoejecutables

()

 
   !function () {}();

   +function () {}();
    
   !!+!!+!!+!!+!!function () {}();

   (function () {})();

   new function () {}();

var app = (function (fruta) {
  console.log('4: Ejecutada');
  console.log(this);
  return {foo: fruta}
})('mandiocas');

console.log(app);

var app2 = new function (fruta) {
  console.log('5: Ejecutada');
  console.log(this);
  return {foo: fruta}
}('mandiocas');

console.log(app2);

Orientación

a objetos

var Coche = function () {
  this.motor = 'Nitro';
};

Coche.prototype = {
  puertas: 4,

  abrirPuerta: function () {
    return 'Abriendo!';
  },

  tipoMotor: function () {
    return this.motor;
  }
};

var coche = new Coche;

console.log(coche.motor);
console.log(coche.puertas);
console.log(coche.abrirPuerta());
console.log(coche.tipoMotor());

function Coche2() {}

Coche2.prototype = (function () {
  // Propiedades privadas.
  var motor = 'Nitro';
  var miAcompanyante = 'Top secret 😉';

  // Métodos privados.
  var _acompanyante = function () {
    return miAcompanyante;
  };

  // Métodos públicos.
  return {
    abrirPuerta: function () {return 'Abriendo!'},

    tipoMotor: function () {return motor;},

    getAcompanyante: function () {return _acompanyante();}

  };
})();

var coche2 = new Coche2();
var c = console;

c.dir(coche2);

c.log(coche2.abrirPuerta());
c.warn('Propiedad privada: ' + coche2.motor);
c.log(coche2.tipoMotor());
c.warn('Método privado: ' + coche2.acompanyante());
c.log(coche2.getAcompanyante());

Closures

var estadoInicial = 'foo';

function closure() {
  var state = estadoInicial;

  return function () {
    console.log(state);
    console.log(estadoInicial);
  };
}

var estados = closure();
estadoInicial = 'bar';
estados(estadoInicial);

$('li').each(function (i) {
  var $li = $(this);
  var txtOrig = $li.html();
  
  $li.find('span').click(function (e) {
    console.clear();

    console.log(
      'Originalmente teníamos: ' + txtOrig
    );
    console.log(
      'Actualmente tenemos ' + $li.html()
    );
  });

  $li.find('strong').text(i)
});

this

function foo() { return this; }
var bar = function () { return this; };

function MiClass() {}

MiClass.prototype = {
  quienSos: function () { return this;  },
  copiaFoo: foo,
  copiaBar: bar
};

var miClase = new MiClass();

console.log(miClase.quienSos());
console.log(miClase.copiaFoo());
console.log(miClase.copiaBar());

console.log(foo.bind(window)());
console.log(foo.bind({})());
console.log(foo.bind([])());
console.log(foo.bind("hola")());
console.log(foo.bind(10)());
console.log(foo.bind(true)());
console.log(foo.bind(new Function())());

var objetoso = {
  red: '#F00',
  white: '#FFF',
  blue: '#00F',
  arcoiris: 
  this.red + ' ' + 
  this.white + ' ' + 
  this.blue
};

console.log(objetoso.red);
console.log(objetoso.arcoiris);

var objetoso = {
  red: '#f00',
  white: '#FFF',
  blue: '#00F',
  arcoiris: function () {
    return 
    this.red + ' ' + 
    this.white + ' ' + 
    this.blue
  }
};

console.log(objetoso.red);
console.log(objetoso.arcoiris());

function foo() {
  "use strict";
  console.log(this);
}

"use strict" 

• foo = 'foo';
  ReferenceError: assignment to undeclared variable foo

• var miObj = {};
  delete Object.prototype;
  TypeError: property "prototype" is non-configurable and can't be deleted

• Object.defineProperty(miObj, "foo", {value: 4, writable: false});
  miObj.ruedas = 5;
  TypeError: "foo" is read-only

• Tambien te tira la bronca si querés extender un objeto con miObj.preventExtensions(fixed) o si tratas de sobreescribir un getter.

• this es undefined por defecto

__proto__

var bicicleta = new Bicicleta;
var coche = new Coche;

Vehiculo.prototype.__proto__ = Cosa.prototype

Tips & tricks

¿Preguntas?

Gracias

Twitter / IRC: @capynet

Blog: ecapy.com