"esto" dentro de una función anónima? libro

Question

Dentro de John Resig "Pro técnicas javascript" que describe una forma de generar métodos de objetos dinámicos con el código de abajo:

// Create a new user object that accepts an object of properties 
function User(properties) { 
    // Iterate through the properties of the object, and make sure 
    // that it's properly scoped (as discussed previously) 
    for (var i in properties) { 
     (function() { 
      // Create a new getter for the property 
      this["get" + i] = function() { 
       return properties[i]; 
      }; 
      // Create a new setter for the property 
      this["set" + i] = function(val) { 
       properties[i] = val; 
      }; 
     })(); 
    } 
} 

El problema es cuando intento crear instancias del objeto anterior, los métodos dinámicos están siendo unidos a el objeto ventana en lugar del objeto instanciado. Parece que "esto" se refiere a la ventana.

// Create a new user object instance and pass in an object of 
// properties to seed it with 
var user = new User({ 
name: "Bob", 
age: 44 
}); 

alert(user.getname()); 

Al ejecutar el código anterior se arroja este error "user.getname no es una función".

Cuál es la forma correcta de generar las funciones dinámicas para cada instancia de objeto?

Answer 1

¿Este código es del libro? Tengo el libro, pero no lo he leído.

se trata de un error en el libro. Compruebe la errata: http://www.apress.com/9781590597279

Dentro de la función anónima, this es el window global.

Se podría hacer que funcione mediante la adición de .call(this, i) después de ella.

function User(properties) { 
    // Iterate through the properties of the object, and make sure 
    // that it's properly scoped (as discussed previously) 
    for (var i in properties) { 
     (function(i) { 
      // Create a new getter for the property 
      this["get" + i] = function() { 
       return properties[i]; 
      }; 
      // Create a new setter for the property 
      this["set" + i] = function(val) { 
       properties[i] = val; 
      }; 
     }).call(this, i); 
    } 
} 

Answer 2

El this en la función interna de autoejecución no es el mismo que el de la función User externa. Como habrás notado, se refiere al global window.

El problema se resuelve si se modifica ligeramente el código mediante la adición de una variable que se refiere al exterior this.

function User(properties) { 
    var self = this; 
    for (var i in properties) { 
    (function() { 
     self["get" + i] = function() { /* ... */ }; 
     self["set" + i] = function() { /* ... */ }; 
    })(); 
    } 
} 

Dicho esto, no estoy seguro de por qué la función anónima autoejecutable es incluso necesario aquí, para que tenga la opción más simple de poco dejándolo por completo, así:

function User(properties) { 
    for (var i in properties) { 
     this["get" + i] = function() { /* ... */ }; 
     this["set" + i] = function() { /* ... */ }; 
    } 
} 

Answer 3

Aquí está cómo hacerlo. Debe guardar el contexto en otra variable. La otra opción es no hacer esta función interna que está haciendo en el ciclo for.

// Create a new user object that accepts an object of properties 
function User(properties) { 
    // Iterate through the properties of the object, and make sure 
    // that it's properly scoped (as discussed previously) 
    var that = this; 
    for (var i in properties) { (function(){ 
     // Create a new getter for the property 
     that[ "get" + i ] = function() { 
      return properties[i]; 
     }; 
     // Create a new setter for the property 
     that[ "set" + i ] = function(val) { 
      properties[i] = val; 
     }; 
    })(); } 
} 

Opción 2:

// Create a new user object that accepts an object of properties 
function User(properties) { 
    // Iterate through the properties of the object, and make sure 
    // that it's properly scoped (as discussed previously) 
    for (var i in properties) { 
     // Create a new getter for the property 
     this[ "get" + i ] = function() { 
      return properties[i]; 
     }; 
     // Create a new setter for the property 
     this[ "set" + i ] = function(val) { 
      properties[i] = val; 
     }; 
    } 
} 

Answer 4

Siempre se puede obligar a otro this para cualquier llamada de función, usando el método apply.

(function() { 
    // Create a new getter for the property 
    this["get" + i] = function() { 
     return properties[i]; 
    }; 
    // Create a new setter for the property 
    this["set" + i] = function(val) { 
     properties[i] = val; 
    }; 
}).apply(this);