Objetos en javascript

[GagleKas]

Holass,

Que yo sepa hay 2 posibles formas, o por lo menos las mas usuales, de crear objetos en javascript.

Una es la tradicional, la que implementa el core de javascript, es decir, con las clausulas function, new y this. Se puede aplicar herencia entre objetos pero ya es mas complicado y poco usado en javascript. Permite crear atributos y metodos publicos y privados. Es cierto que el codigo queda un poco feo, pero funciona bien.

Ahora bien, hay otra segunda forma que a veces he visto, pero que en mi opinion no deberia usarse porque no es ese su proposito. Se trata de usar objetos JSON y añadirles atributos y metodos. Tiene una grandisima ventaja, el codigo queda muy limpio y ordenado, pero tiene un gravisimo inconveniente, no permite atributos ni metodos privados. Todo atributo o metodo que pongas sera publico y se podra modificar, por lo que el termino "objeto" deja de tener sentido. Un ejemplo seria el siguiente:

Código Javascript:

var miObjeto = {
    atributo1: 10,
    atributo2: ["casa", "ventana", -1],
    funcion1: function (){
        this.atributo1 += 5;
    }
    funcion2: function (param1){
        this.atributo2[2] = param1;
    }
}
 
miObjeto.atributo1 = -2;
miObjeto.funcion2 (15);
miObjeto.funcion1 = function (){
    alert ("nueva funcion");
}
 

Como se ve, se esta utilizando un objeto JSON como un objeto tradicional cuando su objetivo original es facilitar el intercambio de datos mediante AJAX.

Creeis que es buena? Mala practica?
Vosotros como haceis vuestros objetos en javascript (si es que usais).

[maycolalvarez]

realmente nunca he tenido la necesidad de crear atributos privados en JS, de todas formas JS no maneja un mecanismo de herencia tradicional (polimorfismo por herencia como C#, java, php, etc), maneja lo de la clase prototipo que es ligeramente diferente y prácticamente nunca lo he usado.

js es un lenguaje limitado y por lo tanto lo uso para lo básico, uso json porque es una manera simple y rápida de hacer las cosas, además no todos los navegadores manejan el core de la misma forma, en cambio json es un estándar ampliamente difundido

[Panino5001]

Iniciado por GagleKas

Tiene una grandisima ventaja, el codigo queda muy limpio y ordenado, pero tiene un gravisimo inconveniente, no permite atributos ni metodos privados. Todo atributo o metodo que pongas sera publico y se podra modificar, por lo que el termino "objeto" deja de tener sentido.

Está equivocado. Deberías leer acerca de module pattern y también acerca de mixin.

[SergeMedina]

Javascript no es un lenguaje limitado, de hecho es un lenguaje muy poderoso gracias a que es orientado a objetos (todo en javascript es un objeto). La herencia es algo ampliamente usado en javascript, solo que es herencia de tipo prototype. Los invito a que vean las conferencias dictadas por Douglas Crockford, una en especial Javascript the good parts

[GagleKas]

Iniciado por Panino5001

Está equivocado. Deberías leer acerca de module pattern y también acerca de mixin.

Podrias poner un ejemplo de un objeto JSON usando metodos y atributos privados. Este hilo es para aportar algo, no solo para criticar. ;)

[SergeMedina]

Lo puedes ver corriendo en jsbin

Código Javascript:

var app = {
     public : 'soy publico',
     publicMethod : function() {
         var private = 'soy privado.',
             self = this,
             privateMethod = function() {
               alert('Soy un metodo privado que puede:');
               alert('llamar a un elemento publico: ' + self.public);
               alert('llamar a un elemento privado: ' + private);
             }
            
             
        privateMethod();
     }
}
             
app.publicMethod();
 

[maycolalvarez]

public : 'soy publico' -> aquí public cumple el rol de la variable, no se especifica que sea público, lo es por su ámbito ¿para hacerlo privado como haría y evitar: app.public?

no soy experto en js, pero realmente no veo similitudes con respecto a variables de ámbito privado aquí con respecto a otros lenguajes ¿? :S

Código PHP:

  class app{
    private $privado= "privado"; //mismo ámbito, diferente modificador de acceso (esto no lo se hacer en js)
    public $publico="publico";
}

class app2 extends app{
    public function __construct(){
        parent::$privado="modificando el privado desde clase derivada"; //error Cannot access private property app::$privado in...
    }
}

$i = new app();

echo $i->privado; //error Cannot access private property app::$privado in...
$i2 = new app2();  
   

lo que realmente si se le acerca es el método pattern: http://www.yuiblog.com/blog/2007/06/12/module-pattern/

[Panino5001]

GagleKas no fue mi intención criticar sino alertarte sobre tu error de concepto y, al mismo tiempo, darte pistas de dónde buscar. Pero bueno, te dejo un ejemplo donde están bien diferenciados los métodos públicos y privados, usando una función que retorna un objeto que contiene los métodos públicos:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
var panino=(function(){
/* ---- métodos privados ---- */
    var metodosPrivados={
        addEvent: function(type, fn ) {
            if ( this.addEventListener ) {
                this.addEventListener( type, fn, false );
            } else if(this.attachEvent){
                var _this=this;
                var f= function(){fn.call(_this,window.event);}
                this.attachEvent( 'on'+type, f);
                this[fn.toString()+type]=f;
            }else{
                this['on'+type]=fn;
            }
            var ev={_obj:this,_evType:type,_fn:fn};
            window.EvRegister=window.EvRegister || [];
            window.EvRegister.push(ev);
            return this;
        },
        removeEvent: function(type, fn ) {
            if( this.removeEventListener){
                this.removeEventListener( type, fn, false );
            }
            else if(this.detachEvent){
                this.detachEvent('on'+type,this[fn.toString()+type]);
                this[fn.toString()+type]=null;
            }
            else{
                  this['on'+type]=function(){};
            }
            for (var ii= 0, l=window.EvRegister.length; ii < l ; ii++) {
                if (window.EvRegister[ii]._evType== type && window.EvRegister[ii]._obj==this && window.EvRegister[ii]._fn==fn) {
                    window.EvRegister.splice(ii, 1);
                    break;
                    
                }
            } 
            return this;
            },
         css:function(propiedad,valor){
             if(!valor)
                return this.style[propiedad];
            this.style[propiedad]=valor;
            return this;
         },
         hover:function(a,b){
             this.addEvent('mouseover', a );
            this.addEvent('mouseout', b );
            return this;
         },
         alfa:function(value){
            this.style.opacity = value;
            this.style.MozOpacity = value;
            this.style.KhtmlOpacity = value;
            this.style.filter = 'alpha(opacity=' + value*100 + ')';
            this.style.zoom=1;
            return this;
        },
        toggle:function(a,b){
            this.style.display=this.style.display=='none'?'block':'none';
            if(!!a && !!b)
                a.parentNode.replaceChild(b,a);
            return this;
        },
        extendido:true
         
    }
/* ---- métodos públicos ---- */
    return{
        extend:function(el,obj){
            if(el.extendido && el!=metodosPrivados)return el;
            for(var i in obj)
                el[i]=obj[i];
            return el;
        },
        get:function(id){
            if(!document.getElementById(id))return false;
            return panino.extend(document.getElementById(id),metodosPrivados);
        },
        getO:function(obj){
            return panino.extend(obj,metodosPrivados);
        },
        add:function(obj){
            panino.extend(metodosPrivados,obj);
        },
                
        unregisterAllEvents:function(){
                        if(window.EvRegister)
            while (window.EvRegister.length > 0) {
                   panino.getO(window.EvRegister[0]._obj).removeEvent(window.EvRegister[0]._evType,window.EvRegister[0]._fn);
            }
            window.EvRegister=null;
            for(var i=0;el=document.getElementsByTagName('*')[i];i++)
                if(el.extendido)
                    for(var ii in metodosPrivados)
                        el[ii]=null;
            panino=null;
        }
    }    
})();
var $=panino.get;
panino.getO(window).addEvent('unload',panino.unregisterAllEvents);
/*----ejemplo de uso--------*/
function a(){
    var _this=this;
    var p=0,alfa=alfa || .5;
    var int=setInterval(
            function(){
                p+=(500-p)/10;
                alfa+=.015;
                if(p>=490){
                    clearInterval(int);    
                }
                _this.css('width',p+'px').css('height',p+'px').alfa(alfa>=1?1:alfa);
            },13);
}
onload=function(){
    $('pp').css('backgroundColor','red')
    .css('width','50px')
    .css('height','50px')
    .css('cursor','pointer')
    .addEvent('click',a)
    .alfa(.5);
}
</script>
</head>

<body>
<div  id="pp"></div>
</body>
</html>  
  

[GagleKas]

Gracias, ese ejemplo me sirvio de mucho juntamente con la explicacion oficial del module pattern de YUI. Por lo que veo jQuery utiliza el module pattern o algo parecido, me equivoco?

Buenisimoss links Sergemedina