Acceder a una propiedad publica desde un metodo privado

[mariano_donati]

Hola a todos. Tengo una clase en la cual declaro una variable pública, a la cual quiero acceder desde un método privado. El tema es que cuando intento acceder a ella, surge el error de que la variable no se encuentra definida. Este es el código:

Código:

TextEditor.Button = {};

function Button_constructor ( objid , img_normal , img_mouseover , title )
{
    
    var sel;
    var root = "Includes/Scripts/TextEditor/Images/";
    var obj = null;
    
    obj = document.getElementById(objid);
    obj.title = title;
    obj.src   = root+img_normal;

    this.innerObj = obj;
    
    this.selected = true;
    
    function change_cursor(obj)
    {

        try
        {
            obj.style.cursor = "pointer";        //MOZILLA
        }
        catch (ex)
        {
            obj.style.cursor = "hand";            //IEX
        }
    }
    
    function obj_onmouseover ( )
    {
        change_cursor(obj);
        if ( !this.selected )
            obj.src = root+img_mouseover;
    }
    
    function obj_onmouseout ( )
    {
        if ( !this.selected )
            obj.src = root+img_normal;
    }
    
    obj.onmouseover = obj_onmouseover;
    obj.onmouseout  = obj_onmouseout;
    
}

TextEditor.Button = Button_constructor;

¿Cómo hago para acceder al valor de la variable selected?. Gracias por adelantado. Saludos.

[derkenuke]

Hola mariano_donati:

Creo que confundes el objeto que creas con Button_constructor() con obj, que es un elemento del documento con id objid.

Lo que podrías hacer para solucionar tu problema es definir selected en vez de como propiedad de this, como propiedad de obj:

Código PHP:

  obj.selected = true;  
   

Y luego en los eventos, como se asignan así:

Código PHP:

  obj.onmouseover = function() { alert(this.selected); }  
   

El this de dentro de la función hace referencia a obj, luego sí existe selected. Podemos asignarle a objetos HTML propiedades como si fueran objetos javascript (incluso atributos HTML, podría ser lo mismo).

Pero depende qué objeto de HTML sea obj te recomiendo no utilizar la palabra selected para tu propiedad, puede confundirse con el atributo homónimo, cosa que creo no te interesa.


Saludos

[mariano_donati]

Gracias por tu respuesta derkenuke. Tu solución funciona. El tema es que obj en mi clase representa el elemento HTML que se usa para crear el botón (el cual es un elemento de etiqueta img). En mi aplicación, en realidad la variable selected debe corresponder al objeto Button y no al objeto subyacente con el que se crea el botón. Es quizás muy estricto esto que estaba buscando, pero lo he conseguido hacer. Así es como lo logré:

Código:

function Button_constructor ( objid , img_normal , img_mouseover , title )
{

    this.objid = objid;
    this.root = "Includes/Scripts/TextEditor/Images/";
    this.img_normal = img_normal;
    this.img_mouseover = img_mouseover;
    this.innerObj = document.getElementById(objid);
    this.selected = false;    
    
    this.innerObj.title = title;
    this.innerObj.src   = this.root + this.img_normal;
    this.innerObj.onmouseover = onmouseover(this);
    this.innerObj.onmouseout  = onmouseout(this);
    
    function onmouseover(instance)
    {
        var fn = function(){};
        fn = function()
        {
            change_cursor(this);
            if ( !instance.selected )
                this.src = instance.root + instance.img_mouseover;    
        };
        return fn;
    }
    
    function onmouseout(instance)
    {
        var fn = function(){};
        fn = function()
        {
            if ( !instance.selected )
                this.src = instance.root + instance.img_normal;            
        };
        return fn;
    }
    
    function change_cursor(obj)
    {
        try
        {
            obj.style.cursor = "pointer";        //MOZILLA
        }
        catch (ex)
        {
            obj.style.cursor = "hand";            //IEX
        }    
    }
    
}

El truco está en pasarle como argumento a la función onmouseover, onmouseout el objeto Button. Pero ese no es todo el truco. Dentro de la función, para que tengamos acceso a la propiedad selected, es necesario encerrar esa instrucción en una nueva función y devolver la función que acabamos de crear. De esta forma, dentro de una función local podemos acceder a la variable pública. Espero que a alguien le sirva. Saludos.

[derkenuke]

Me alegro de que lo pudieras solucionar mariano_donati, implementando una solución con closures y pasándo la instancia por argumento al evento, supongo que es la solución que se me habría ocurrido, es muy buena

[mariano_donati]

No me puedo hacer cargo en la totalidad de ese código. Puse mi duda en otro foro y allí me dieron esta opción. Tenía un par de cosas que no me convencían del todo, y las modifiqué.
Por si a alguien le interesa, este es el código que originalmente me abrió la cabeza:

Código:

function Button_constructor ( objid , img_normal , img_mouseover , title )
{
	var sel;
	var obj = null;
	
	this.objid = objid;
	this.root = "Includes/Scripts/TextEditor/Images/";
	this.img_normal = img_normal;
	this.img_mouseover = img_mouseover;
	this.innerObj = obj;
	this.selected = true;
	
	obj = document.getElementById(objid);
	obj.title = title;
	obj.src   = this.root + this.img_normal;
	obj.onmouseover = this.get_event('mouseover', this);
	obj.onmouseout  = this.get_event('mouseout', this);
	
}

Button_constructor.prototype = {
	
	change_cursor : function(obj)
	{
		try
		{
			obj.style.cursor = "pointer";		//MOZILLA
		}
		catch (ex)
		{
			obj.style.cursor = "hand";			//IEX
		}
	},
	
	get_event : function(type, instance)
	{
		var fn = function() {};
		switch (type)
		{
			case 'mouseover':
				fn = function() {
					instance.change_cursor(this);
					if ( !instance.selected )
						this.src = instance.root + instance.img_mouseover;
				};
				break;
			case 'mouseout':
				fn = function() {
					if ( !instance.selected )
						this.src = instance.root + instance.img_normal;
				};
				break;
		}
		return fn;
	}
	
};

Saludos.

[venkman]

Una manera más sencilla de tener this disponible es guardarlo antes y usarlo a través de esa referencia.

Lo puedes ver en este artículo clásico. Hacemos:

Código:

function Button_constructor(...) {
    var self = this;
    self.selected = ...
    ...
    function obj_onmouseover () {
        if (!self.selected) {
            ...
        }
    }
}