匿名函数中的“this”？

Question

在 John Resig 的“Pro Javascript 技术”一书中，他描述了一种使用以下代码生成动态对象方法的方法：

// 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;
            };
        })();
    }
}

问题是当我尝试实例化上述对象时，动态方法被附加到窗口对象而不是实例化对象。似乎“this”指的是窗口。

// 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() );

运行上面的代码会抛出这个错误“user.getname is not a function”。

为每个实例化的对象生成动态函数的正确方法是什么？

Answer 1

这是书中的代码吗？我有这本书，但我还没读完。

这是书中的一个错误。查看勘误表：http://www.apress.com/9781590597279

在匿名函数内部，this 是全局的window。

您可以在其后添加.call(this, i) 使其工作。

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

内部自执行函数中的this与外部User函数中的this不同。如您所见，它指的是全局window。

如果您通过添加一个引用外部this 的变量来稍微修改代码，问题就得到了解决。

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

也就是说，我不确定为什么这里甚至需要匿名自执行功能，所以您可以选择完全省略它，就像这样：

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

Answer 3

这里是如何做到这一点。您需要将上下文保存到另一个变量中。另一种选择是不执行您在 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;
       };
    })(); }
}

选项 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

您始终可以使用apply 方法为任何函数调用强制另一个this。

(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);