Tengo un jquery clase dentro de una clase normal en javascript. Es posible acceder a las variables en el ámbito de la clase de padre a partir de una función de devolución de llamada en el jquery clase?

Un simple ejemplo de lo que quiero decir es que se muestra a continuación

var simpleClass = function () {    
    this.status = "pending";
    this.target = jqueryObject;
    this.updateStatus = function() {
        this.target.fadeOut("fast",function () {
           this.status = "complete"; //this needs to update the parent class 
        });
    };
};

Ahora en el ejemplo anterior, la función de devolución de llamada intenta acceder al alcance del objeto jquery. ¿hay alguna manera de acceder a la variable de estado en la clase de padre?

  • por clase u significa método o función derecha ?
InformationsquelleAutor Sam | 2011-02-24

7 Comentarios

  1. 99

    Establece «este» a una variable en la función principal y, a continuación, utilizarlo en el interior de la función.

    var simpleClass = function () {         
        this.status = "pending";     
        this.target = jqueryObject;     
    
        var parent = this;
    
        this.updateStatus = function() {         
                this.jqueryObject.fadeOut("fast",function () {            
                    parent.status = "complete"; //this needs to update the parent class          
                });     
            }; 
        }; 
    • Que no el trabajo de los padres es en el ámbito de simpleClass no del objeto jquery Lo que usted tiene que recordar es jQuery volver a llamar código que se llama como su propia función, señalando que ver con el conjunto
    • Esto funcionó un placer, gracias por la ayuda
    • la variable es accesible por los poderes de la cierres! developer.mozilla.org/en/JavaScript/Guide/Closures
    • El toro de los ámbitos, jQuery devoluciones de llamada no son llamados en el ámbito de la clase que define
    • sé que esta con todos los call back sistema de coz tengo que añadir un var para el XMLHttpRequest para tener otro objetos de acceso dentro de la XMLHttpRequest yo uso varName.API = this; a continuación, en la devolución de llamada me sale el srcElement del objeto de modo que no es en el ámbito global, pero todavía accesible
    • Es divertido la forma en que usted está en la negación. Lo que Humberto dicho es correcto. Darle una oportunidad.

  2. 35

    Voy a publicar la respuesta a esta vieja pregunta de todos modos como aún nadie ha publicado esto antes.

    Puede utilizar el bind método en su función de llamadas para definir el alcance que this pertenece.

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

    Normalmente cada vez que se crea un método – this pertenece al ámbito actual de la función. Variables de scope2 no puede ver las variables de ámbito de aplicación1.

    por ejemplo,

    function(){
        //scope 1
        this.baz = 'foo';
    
        function(){
            //scope 2
            this.baz //not defined
        };
    };

    con el bind método puede definir el ámbito de aplicación de this dentro de la función. Así que el uso de .bind(this) estás diciendo la función llamada de que su propio ámbito de this se conoce el alcance de la función principal, tales como:

    function(){
        //scope 1
        this.baz = 'foo';
    
        function(){
            //scope 1
            this.baz //foo
        }.bind(this);
    };

    así que, en su caso, este sería un ejemplo de uso de la bind método

    var simpleClass = function () {    
        this.status = "pending";
        this.target = jqueryObject;
        this.updateStatus = function() {
            this.target.fadeOut("fast",function () {
               this.status = "complete"; //this needs to update the parent class 
            }.bind(this));
        }.bind(this);
    };
    • bueno gracias que ayudaron!
    • Esta perfectamente resuelve el problema cuando intento acceder a un anidada this objeto dentro de una clase de JavaScript. Gracias!
    • Funciona a la perfección, pero Sublime Text odia por alguna razón…
    • Gracias. Me ayudó a lo grande!!
  3. 8

    Utilizar un Función de Flecha

    Una flecha función no tiene this. El this valor de la envolvente ámbito léxico se utiliza; flecha funciones de seguir la variable normal reglas de búsqueda. Así, mientras que la búsqueda de this que no está presente en el ámbito actual que termina encontrando this de su ámbito envolvente.

    Normal de la sintaxis de la función

    function(param1, param2) {}

    Flecha sintaxis de la función

    (param1, param2) => {}

    Uso

    const simpleClass = function () {    
        this.status = "pending";
        this.target = jqueryObject;
        this.updateStatus = function() { 
            this.target.fadeOut("fast", () => { //notice the syntax here
               this.status = "complete"; //no change required here
            });
        };
    };

    El uso de una función de Flecha dentro de un ECMAScript 2015 Clase

    class simpleClass {
    
        constructor() {
            this.status = 'pending';
            this.target = jqueryObject;
        }
    
        updateStatus() {
            this.target.faceOut('fast', () => {
                this.status = "complete";
            });
        }
    }
    
    const s = new simpleClass();
    s.updateStatus();

    Describe código sólo funciona en los navegadores modernos.

    • Que debe ser el más votado respuesta.
  4. 2

    Lo siento m8. Usted tiene que anidar la referencia abajo en los objetos como:

    var simpleClass = function () {
        var _root = this;
        this.status = "pending";
        this.target = jqueryObject;
        this.updateStatus = function() {
            this.root = _root;
            _root.target.fadeOut("fast",function () {
               this.status = "complete"; //this needs to update the parent class 
            });
        };
    };

    aviso de la var _root

    • ok yo se ahora que podría haber utilizado this.root.target en lugar de _root.target, pero es igual, así que no importa 🙂
  5. 2

    Mediante el establecimiento de «este» a una variable puede tener acceso fácilmente. Como:

    $("#ImageFile").change(function (e) {
        var image, file;
        var Parent=this;
        if ((file = Parent.files[0])) {
            var sFileExtension = file.name.split('.')[file.name.split('.').length - 1];
    
            if (sFileExtension === "jpg" || sFileExtension === "jpeg" || sFileExtension === "bmp" || sFileExtension === "png" || sFileExtension === "gif") {
                var reader = new FileReader();
    
                reader.onload = function (e) {
                   alert(Parent.files[0].name);
                };
                reader.readAsDataURL(Parent.files[0]);
            }
            else { alert('Wrong file selected. Only jpg, jpeg, bmp, png and gif files are allowed.'); }
        }
    })
  6. 1

    intente esto:

       var sc = (function(scc){
    
        scc = {};
    
        scc.target = jQueryObject;
    
    
        scc.stt = "stt init";
    
        scc.updateStatus = function(){
            var elem = this;
    
            this.target.click(function(){
                elem.stt= "stt change";
                console.log(elem.stt);
            })
    
        }
    
        return scc;
    
    
    }(sc || {}));

    también puede definir su objeto de destino como variable privada

    • De alguna manera, me gusta esta manera.
  7. 0

    Puede mantener el estado mediante el cierre de las variables:

    function simpleClass() {
       var _state = { status: "pending", target: jqueryObject; }
    
       this.updateStatus = function() {
          this.target.fadeOut("fast",function () {
             _state.status = "complete"; //this needs to update the parent class 
          });
       }
    }
    
    //Later...
    var classInstance = new simpleClass();

Dejar respuesta

Please enter your comment!
Please enter your name here