2011-05-17 23 views
5

tengo el siguiente javascript:Javascript creación de objetos mejores prácticas

  var MyObject = (function() { 

       function Setup(args) { 
        this.prop1 = args.x; 
        this.prop2 = args.y 
        this.prop3 = this.prop1 + this.prop2; 

        this.Create = function() { 
         return 'a' + helperFunc(); 
        } 

        function helperFunc() { 
         return this.prop3; 
        } 
       } 

       return { 
        init : function(args) { 
         var setup = new Setup(args); 

         setup.Create(); 
        } 
       } 

      })(); 


      $(function() { 

       MyObject.init(someArgs); 

      }); 
  1. ¿Es mi enfoque para la construcción de objetos de una buena práctica?

  2. Recibo undefined en el helperFunc cuando intento acceder this.prop3.

  3. También han tratado de asignar this.prop1 + this.prop2 a una variable local y utilizar una función para devolver este valor, así:

     function Setup(args) { 
           var total; 
    
           this.prop1 = args.x; 
           this.prop2 = args.y 
    
           total = this.prop1 + this.prop2; 
           this.getTotal = function() { 
             return total; 
           }; 
    
           this.prop3 = this.prop1 + this.prop2; 
           ... 
    

... y cuando se llama a esto en el helperFunc como esto:

     return this.getTotal(); 

.. me sale this.getTotal no es una función

He estado leyendo acerca de la creación de objetos y el uso de cierres para imitar a miembros privados, y así sucesivamente, y dado que no hay una sola forma de definir objetos, me estoy confundiendo.

TBH - Yo no entiendo muy bien el constructo:

     var myObject = (function() { ... }(); 

que he visto que se usa mucho en los plugins jQuery pero ¿qué la primera parenth seguido por parenth vacío al final decir y hacer?

Cualquier conocimiento impartido sería muy apreciado.

Además, he pedido el libro de Douglas Crockford en JavaScript y hasta que llegue tengo que tratar de resolver este problema

+1

http://stackoverflow.com/questions/3921922/what-does-this-mean-function-x-y-a-b-in-javascript – mplungjan

+0

Aquí hay muchas preguntas. Sería mucho más fácil proporcionar respuestas precisas y precisas si intenta limitarse a una pregunta por pregunta. –

+0

mplungjan: ese es un enlace perfecto para entender el parenth al final de una llamada de función. Solo necesito entender por qué estoy indefinido cuando llamo a una propiedad y no a una función cuando llamo a una función ... –

Respuesta

4

Para citar Xhalent's wonderful article (muy bien hecho y claramente wirtten) mencionado por él:

Eso se debe a que el valor de “este” es diferente al valor de “esto” cuando se creó el objeto .

Así, en su caso:

... 
    var _this = this.prop3; 
    function helperFunc() { 
    return _this; 
    } 
... 

podría lograr lo que se desea.

+0

Esta es la respuesta a por qué estoy indefinido. Desearía poder marcar también la respuesta de Paul Butchers porque eso ayuda a comprender el problema. He leído los artículos de Xhalent y son muy útiles. Estableciendo el valor a una variable privada, no estaba al tanto de que podía acceder a eso desde la función helperFunc. He pasado demasiado tiempo en C# y necesito dejar de pensar en el clásico oop. Esperamos el libro de Douglas Crockford. Gracias a todos los que respondieron ... –

0

Usted tiene un buen tutorial de Mike Koss en la programación orientada a objetos en JS en this page.

que he visto que se usa mucho en jQuery plugins pero ¿qué la primera parenth seguido por parenth vacía al final media y hacer?

El segundo conjunto de parenth invoca inmediatamente la función que ha declarado en el primer conjunto de parenth.

Se podría declararlo y ejecutarlo separadamente (permite ejecutar varias veces):

var myFunction = function() { alert("boo"); }; // Declare & instanciate 
myFunction(); // Invoke 
myFunction(); // Invoke again 

o ambas cosas en una sola línea:

(function() { alert("boo"); })(); // Can only invoke now, the function is anonymous and not stored anywhere. 
1

Si tiene una función que utiliza this, debe asegurarse de que el contexto de la llamada sea correcto. es decir, use this.helperFunc(), no solo helperFunc() (pero también deberá configurar las cosas para que this.helperFunc esté definido). El referente de this dentro de helperFunc en su ejemplo no es el mismo que en Create().

Se puede pensar en él como si las funciones no son definido como miembros de los objetos, pero llamados como miembros de objetos.

Hay tres cosas que puede resolver this, dependiendo del contexto.

  1. Un objeto recién creado, si la llamada a la función fue precedida por la palabra clave new.
  2. Objeto a la izquierda del punto cuando se llamó a la función.
  3. El objeto global (window), si no se proporciona ninguno de los anteriores.

Si una función es llamada sin un objeto, como en el caso de su llamada a helperFunc en this.Create, this estará atado al objeto global (window, cuando se utiliza en un navegador)

dado algo de esta manera:

var o = {someVal:"hello"}; 
o.doSomething = function(){alert(this.someVal)}; 

Calling o.doSomething(), obviamente, de alerta "hola".

dado:

var o2 = {someVal:"world"}; 
o2.someFunc = o.doSomething; 

Calling o2.someFunc() alertará "mundo", no "hola", como era de esperar si se tratara de un puntero a la doSomething miembro del o.

Y teniendo en cuenta:

var someFunc = o.doSomething 
someVal = "sailor" 

Calling someFunc() alertará "marinero".

Otro punto de confusión es el uso de this directamente dentro de Setup(). Cuando llama a una función usando new, como lo ha hecho, this no está vinculado al objeto global, sino a una nueva instancia del objeto Setup.

Para mi ejemplo anterior, esto significa que llamar a new o.doSomething() alertará "indefinido", ya que el nuevo objeto que se ha creado para la llamada no tiene un miembro "someVal".