Ejemplo Javascript orientado a objetos

[ZiTAL]

Hola a todos, tengo esto:

Código:

	var persona = {
	        nombre: "Felipe",
	        apellido: "Pino",
	        presentar: function() {
				alert("Mi nombre es " + this.nombre + " " + this.apellido);
		}
	};
	persona.presentar({
	});

lo que me gustaria es que le pasase yo el nombre del parametro y su valor, ejemplo:

Código:

	var persona = {
	        // inicializar "nombre" y "apellido"
	        presentar: function() {
				alert("Mi nombre es " + this.nombre + " " + this.apellido);
		}
	};
	persona.presentar({
	        nombre: "Felipe",
	        apellido: "Pino",
	});

esto como se podria hacer?

[caricatos]

Hola ZiTAL:

Me suena extraño el mensaje... como si nunca hubieses usado objetos normales javascript (sin librerías ni modernidades...)

function tipoPersona(nombre, apellido) {
this.nombre = nombre;
this.apellido = apellido;
this.presentar = function() {
alert("Mi nombre es " + this.nombre + " " + this.apellido);
}
}

var persona = new tipoPersona("Felipe", "Pino");
persona.presentar();

Espero que sea válida la respuesta.

Saludos

[ZiTAL]

Aupa caricatos no es lo que busco, precisamente quisiera prescindir de mandarle X parametros a la funcion, no pasarle ninguna variable por la funcion:

Código:

function tipoPersona(nombre, apellido) {
...

cambiarlo por:

Código:

function tipoPersona() {

y pasarle los parametros con nombre de la variable y valor:

Código:

persona.presentar({
nombre: "Kepa",
apellidos: "Jametxo"
});

la cuestion es que veo librerias/frameworks que utilizan algo parecido a esto y no se como implementarlo ya que por mucho que lo intento descifrar no lo consigo :(

Muchas gracias por todo ;)

[MaBoRaK]

enloading........

Iniciado por ZiTAL

Hola a todos, tengo esto:

Código:

	var persona = {
	        nombre: "Felipe",
	        apellido: "Pino",
	        presentar: function() {
				alert("Mi nombre es " + this.nombre + " " + this.apellido);
		}
	};
	persona.presentar({
	});

lo que me gustaria es que le pasase yo el nombre del parametro y su valor, ejemplo:

Código:

	var persona = {
	        // inicializar "nombre" y "apellido"
	        presentar: function() {
				alert("Mi nombre es " + this.nombre + " " + this.apellido);
		}
	};
	persona.presentar({
	        nombre: "Felipe",
	        apellido: "Pino",
	});

esto como se podria hacer?

Bienvenido al mundo POO!!!! jejeje

Bueno en primera debes separar una propiedad de un parametro ya que no puedes, no deberías declarar un parametro y que esta se convierta en una propiedad (this.nombre)

La mayoría de los frameworks usan esa "forma" (nota que en ningun momento lo inicializan) como una simple TABLA DE DISPERSIÓN link.

Ahora bien, yendo a tu caso. se haría de esta forma.

Código PHP:

  var persona = { 
            // inicializar "nombre" y "apellido" 
                initialize:function(data) 
                { 
                    for(var i in data) 
                    { 
                        if(data.propertyIsEnumerable(i)) 
                        { 
                            this[i]=data[i]; 
                         } 
                    } 
                }, 
            presentar: function(param) { 
                                this.initialize(param || {}); 
                alert("Mi nombre es " + this.nombre + " " + this.apellido); 
        } 
    }; 
    persona.presentar({ 
            nombre: "Felipe", 
            apellido: "Pino", 
    });  
   

Pero no se... no le veo mucho sentido :D pero de esa forma se hace.
Algo que yo siempre hago para estos casos y quiero compartirlo contigo es.

Código PHP:

   /** 
 * propertyIsEnumerable for Safari 
 * @return Boolean 
 **/ 
 Object.prototype.propertyIsEnumerable=function(i) 
 { 
         return (typeof Object.prototype[i]==="undefined")?true:false; 
 } 
 /** 
 * Length of Object 
 * @return Int 
 */ 
 /*Object.prototype.length       = function() 
 { 
         var j=0; 
         for (var i in this) { 
                 if(this.propertyIsEnumerable(i)) 
                 { 
                         j+=1; 
                 } 
         } 
         return j; 
 };*/ 
 /** 
 * Concat Object 
 * @param {Object} obj Object 
 * @return {Object} this 
 */ 
 Object.prototype.concat = function(obj) 
 { 
         for (var i in obj) 
         { 
                 if(obj.propertyIsEnumerable(i)) 
                 { 
                         this[i]=obj[i]; 
                 } 
         } 
         return this; 
 }; 
var a = function() 
{ 
//este método pone variables por defecto en la clase 
//o lo que comunmente se conoce como propiedades o variables definidas. 
    this.make=function(options) 
   { 
//esto es clave porque el primer objeto tiene las propiedades con sus valores por defecto 
        this.options={ 
            nombre:'tu no tienes nombre y tomo ESTO como default' 
        }.concat(options || {}); 
        return this; 
    }; 
//procesamos de forma normal 
    this.process=function() 
    { 
        alert(this.options.nombre) 
    } 
    return this; 
}; 
var b = new a().make({ 
    nombre:'maborak' 
}); 
b.process();  
   

De esta forma puedes tener por un lado variables POR DEFECTO o bien construir esas variables por defecto en base a los parámetros que se te ocurra pasarle al método make.

Y bueno... nose. preguntas? :D

connection closed.

[ZiTAL]

A decir verdad el siguiente paso era mandarte un correo MaBoRaK, pero ya veo que escribes aqui. En cuanto asimile lo que has escrito lo comentare jejejeje, ya que ahora no tengo mucho tiempo para pruebillas, a ver si termino rapido el curro y le hecho un vistazo, muchas gracias ;)

[ZiTAL]

No he podido resistir y he estado un par de minutos con ello y se ve muy interesante, muchas gracias, aqui teneis el + de karma ;)

[MaBoRaK]

loading............


Ayer estaba por postear este script pero se me fue internet jejejeje ahora lo hago.

Para tu caso en particular podemos hacer algo mas loko con nuestra clase.

Código PHP:

   /**
 * propertyIsEnumerable for Safari
 * @return Boolean
 **/
 Object.prototype.propertyIsEnumerable=function(i)
 {
         return (typeof Object.prototype[i]==="undefined")?true:false;
 }
 /**
 * Concat Object
 * @param {Object} obj Object
 * @return {Object} this
 */
 Object.prototype.concat = function(obj)
 {
         for (var i in obj)
         {
                 if(obj.propertyIsEnumerable(i))
                 {
                         this[i]=obj[i];
                 }
         }
         return this;
 };
var a = function()
{
//este método pone variables por defecto en la clase
//o lo que comunmente se conoce como propiedades o variables definidas.
    this.make=function(data)
   {
        data={
            nombre:'tu no tienes nombre',
            apellido:'apellido por defecto'
        }.concat(data || {});
        for(var i in data)
        {
            if(data.propertyIsEnumerable(i))
            {
                this[i]=data[i];
             }
        }
        return this;
    };
//procesamos de forma normal
    this.process=function()
    {
        alert("Mi nombre es " + this.nombre + " " + this.apellido);
    }
    return this;
};
var b = new a().make({
    nombre:'maborak'
});
b.process();  
   

También podemos modificar el comportamiento de un Objeto con su propiedad propotype y mmm nose, seguir jugando jejeje. Esto es maravilloso man!!!! :p

connection close.

[ZiTAL]

aqui estamos otra vez dando el coñazo, pues se me ha ocurrido probarlo en IE tanto en el 6 como en el 7 y no funciona, me dice que:

Código:

'a' no esta definido

:S

[jonathan_miguel]

Una respuesta a la pregunta inicial:

var persona = {
nombre: "Felipe",
apellido: "Pino",
presentar: function() {
alert("Mi nombre es " + this.nombre + " " + this.apellido);
}
};
persona.presentar({
});
//La forma de modificar las variables para cambiar la presentacion del alert() es:

persona.nombre = "Juan";
persona.apellido = "Perez";
//Ejecuto Metodo
persona.presentar();
/* Espero que sea de utilidad*/

[ZiTAL]

muchas gracias por contestar, se ve interesante pero tiene un PERO, si quiero hacer una nueva instancia del objeto como lo haria?

ya que ahi modificas el objeto en si,no una instancia del objeto,no se si se me entiende.

Vamos que no se puede hacer un:

Código:

var p=new persona();
p.nombre="Nombre";
p.apellido="Apellido";
p.presentar();

[MaBoRaK]

loading.............

Iniciado por ZiTAL

aqui estamos otra vez dando el coñazo, pues se me ha ocurrido probarlo en IE tanto en el 6 como en el 7 y no funciona, me dice que:

Código:

'a' no esta definido

:S

Bueno, tenía un asterisco detras de una llave jejejeje

Hasta donde te entendí es.

1.- Tienes un objeto algo al cual le pasas PROPIEDADES como parametros. Estas se crean.
2.- Creas una nueva instanca del objeto algo, entonces al crearse la instancia esta instancia debe devolver TAMBIÈN las propiedades creadas con el anterior constructor(cuando haces new algo(); por primera vez y le pasas propiedades). ??

es así???????

connection closed.

[ZiTAL]

no esta bien asi, cada instancia con sus propiedades y valores lo unico que queria es pasarle los parametros con nombre.

El aporte de jonathan_miguel me ha gustado, la pega es que al parecer solo puedes jugar con el objeto y no con una instancia del objeto, espero que vuelva a escribirnos, ya que he intentado poner un:

Código:

var persona = function(){
nombre: "Felipe",
apellido: "Pino",
presentar: function() {
alert("Mi nombre es " + this.nombre + " " + this.apellido);
}
};
persona.presentar({
});

pero asi se casca en:

Código:

nombre: "Felipe",
apellido: "Pino",

alguna idea maborak?

[ZiTAL]

he llegado hasta aqui:

Código:

var a = function()
{
	// cargar valores por defecto
    this.make=function(options)
     {
        this.options={
            method:'POST',
            url:'',
            parameters:'',
            contentType:'application/x-www-form-urlencoded',
            response:'text',
        }.concat(options || {});
        return this;
     };

    this.process=function()
     {
        var ajax=this.ajax();
        ajax.open(this.options.method,this.options.url+"?"+this.options.parameters,true);
        ajax.setRequestHeader("Content-Type", this.options.contentType);
        ajax.onreadystatechange=this.ready(ajax); 
        ajax.send(this.options.parameters);
        return this;
     };
    this.ready=function(ajax)
     {     	     	 
     	  alert(ajax.readyState);
          switch(ajax.readyState)          
           {           
           		case 1:case 2:case 3:
           		break;		
           		case 4:
           		 {
					switch(this.options.response)
					{
						case 'text':
						  this.response=ajax.responseText;
						  break;    
						case 'XML':
						  this.response=ajax.responseXML;
						  break;
					}
				   return this;      				
				   break;
				 }
				break;
           }     	
     };
    this.ajax=function()
	  {
		  var xmlHttp;
		  try { xmlHttp=new XMLHttpRequest();return xmlHttp; }
		  catch (e) { try { xmlHttp=new ActiveXObject('Msxml2.XMLHTTP');return xmlHttp; }
		  catch (e) { try { xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');return xmlHttp; }
		  catch (e) { alert('Your browser does not support AJAX!');return false; }}}
	  };
};
// ...

y solo me muestra una vez el:

Código:

 alert(ajax.readyState);

llamada:

Código:

var b = new a();
b.make({
});
b.process();

vamos me muestra un 1, pero no llega a hacer los 4 correspondientes :(

y en IE me sigue petando con el mismo error :(

[jonathan_miguel]

En referencia a tu último Post, paso a plantear mi punto de vista:

* La clase lanza un error cuando intenta ejecutar la funcion concat (que es de String) a un objeto JSON (this. options)
* La programación de la Clase no es del todo "profesional" ya que de esa manera en cada instancia que hago de la misma estoy definiendo todos los metodos y esto hace comsumir mas recursos de lo apropiado.
Un modelo seria:

A = function(){
//Declaro variables globales
this.a = "";
this.b = "";
//Termina A
}
//Defino Metodos y Objetos JSON
A.prototype = {
objeto : {nombre:"",apellido:""},
metodo1:function(){//Hace Cosas},
metodo2:function(param){//Hace cosas}

};
//Para Instanciarlo
var instancia = new A();
//Modifico propiedad
instancia.objeto.nombre = "Juan";
//Ejecuto Metodos
instancia.metodo1();

* Por último mencionarte de una clase AJax www.jomico.com.ar/Librerias/Ajaxsa/index.php que puedes hechar un vistazo ya que esta programado en "Castellano" y por supuesto descargarla y modificarla ya que es de codigo libre

Espero haya sido de utilidad.

[MaBoRaK]

loading............

* La clase lanza un error cuando intenta ejecutar la funcion concat (que es de String) a un objeto JSON (this. options)

Bueno, en realidad no es un objeto JSON sinó un OBJETO LITERAL, y puede ser concatenado (ya que antes añadimos un método prototype a los OBJETOS. entonces puedes concatenar un objeto con otro.

Código:

/**
 * Concat Object
 * @param {Object} obj Object
 * @return {Object} this
 */
 Object.prototype.concat = function(obj)
 {
         for (var i in obj)
         {
                 if(obj.propertyIsEnumerable(i))
                 {
                         this[i]=obj[i];
                 }
         }
         return this;
 };

* La programación de la Clase no es del todo "profesional" ya que de esa manera en cada instancia que hago de la misma estoy definiendo todos los metodos y esto hace comsumir mas recursos de lo apropiado.

Si, en eso te apoyo.. ZITAL que quieres hacer? jajajajaja

Pero la idea original creo yo era construir propiedades a partir de argumentos.

vamos me muestra un 1, pero no llega a hacer los 4 correspondientes :(

Es porque

ajax.onreadystatechange=this.ready(ajax);

Ahí ejecutas el método this.ready, recuerda que a onreadystate debe pasarse UNA FUNCION y no así EL RESULTADO DE UNA FUNCION.;

debería ser

ajax.onreadystatechange=this.ready;

En todo caso ya no es necesario pasarle el valor "ajax" ya que lo defines antes.

var ajax = blablabla;

Entonces al llamar a la funcion this.ready, ese valor "ajax" se mantiene en un contexto GLOBAL para la función

Código:

    this.ready=function()
     {     	     	 
     	  alert(ajax.readyState);

tiene que funcionar ;)

connection closed.

[MaBoRaK]

loading............

Zital, en teoría tu clase debería darte problemas de CLOSURE. :D avisame cuando esto suceda, tengo la solución ;)

connection closed.

[ZiTAL]

MaBoRaK en principio esa era la idea, pero de que me sirve esa idea si luego no puedo implementar nada? Jejjeje. Muchas gracias por las respuestas, mañana me pongo a ello ;)

[ZiTAL]

esto no funciona ni con suerte amobe:

Código:

    this.process=function()
     {
        this.ajax=new this.xmlHttp();
        this.ajax.open(this.options.method,this.options.url+"?"+this.options.parameters,true);
        this.ajax.setRequestHeader("Content-Type", this.options.contentType);
        this.ajax.onreadystatechange=this.ready; 
        this.ajax.send(this.options.parameters);
        return this;
     };
    this.ready=function()
     {     	     	 
		alert(this.ajax.readyState);
		return this;   	
     };
    this.xmlHttp=function()
	  {
		  var xmlHttp;
		  try { xmlHttp=new XMLHttpRequest();return xmlHttp; }
		  catch (e) { try { xmlHttp=new ActiveXObject('Msxml2.XMLHTTP');return xmlHttp; }
		  catch (e) { try { xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');return xmlHttp; }
		  catch (e) { alert('Your browser does not support AJAX!');return false; }}}
	  };

no entiendo como a una funcion le llega el this y al otro no, la unica diferencia es que a uno se le llama de la instancia y al otro desde la misma clase.

Hay alguna guia de referencia que pueda seguir, es que sino os voy a dar un coñazo de espanto.

[MaBoRaK]

loading..............

Algo que puedes hacer es.

this.process=function()
{
this.ajax=new this.xmlHttp();
this.ajax.open(this.options.method,this.options.ur l+"?"+this.options.parameters,true);
this.ajax.setRequestHeader("Content-Type", this.options.contentType);
var oThis=this;
this.ajax.onreadystatechange=function(){return oThis.ready();}
this.ajax.send(this.options.parameters);
return this;
};
this.ready=function()
{
alert(this.ajax.readyState);
return this;
};
this.xmlHttp=function()
{
var xmlHttp;
try { xmlHttp=new XMLHttpRequest();return xmlHttp; }
catch (e) { try { xmlHttp=new ActiveXObject('Msxml2.XMLHTTP');return xmlHttp; }
catch (e) { try { xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');return xmlHttp; }
catch (e) { alert('Your browser does not support AJAX!');return false; }}}
};

connection closed.

[ZiTAL]

Código:

var a = function()
{
	// cargar valores por defecto
    this.make=function(options)
     {
        this.options={
            method:'post',
            url:'',
            parameters:'id=1',
            contentType:'application/x-www-form-urlencoded',
            response:'text',
        }.concat(options || {});
        return this;
     };
    this.xmlHttp=function()
	  {
		  var _xmlHttp;
		  try { _xmlHttp=new XMLHttpRequest();return _xmlHttp; }
		  catch (e) { try { _xmlHttp=new ActiveXObject('Msxml2.XMLHTTP');return _xmlHttp; }
		  catch (e) { try { _xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');return _xmlHttp; }
		  catch (e) { alert('Your browser does not support AJAX!');return false; }}}
	  };
    this.ready=function()
     {     	     	      	
     	if(this.ajax.readyState!=4)
		 {
		  this.options.transition=this.options.transition.toLowerCase();
		 }
		else
		 {
		  this.options.response=this.options.response.toLowerCase();
		  if(this.options.response=='text')
		   {
		    this.response=this.ajax.responseText;
		   }
		  else if(this.options.response=='xml')
		   {
		    this.response=this.ajax.responseXML;
		   }		  
		 }
		return this;   	
     };	  
    this.process=function()
     {
        this.ajax=new this.xmlHttp;
        this.options.method=this.options.method.toUpperCase();
        this.ajax.open(this.options.method,this.options.url+"?"+this.options.parameters,true);
        this.ajax.setRequestHeader("Content-Type", this.options.contentType);
        var oThis=this;
        this.ajax.onreadystatechange=function(){return oThis.ready();} 
        this.ajax.send(this.options.parameters);
        return this;
     };	  
};
// ...

Gracias MaBoRaK, ahora si funciona, no entiendo el porque no de la otra forma pero bueno.

Seguimos preguntando, bueno ya cargo el resultado en la variable:

this.response

lo que me gustaria saber es como trabajar con esa variable fuera de la clase:

Código:

	var b=new a();
	b.make();
	b.process();
	alert(b.response);

ya que esto no funciona, ya que lo hace antes de ejecute el proceso.

Muchas gracias ;)

PD: Sigue sin funcionar en el IE de los cojones :(