Javascript creación de objetos mejores prácticas

Question

tengo el siguiente javascript:

  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

Answer 1

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.

Answer 2

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. 

Answer 3

que he hecho una serie de JavaScript básico fundamentos - objetos y prototipos están cubiertos aquí:

Javascript Object Instantation and Prototypes

Intento en cierres aquí: Javascript Closures

Espero que ayuden. Aclamaciones.

Answer 4

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".