Javascript自动getter/setters(John Resig Book)

Question

我正在阅读John Resig的" Pro Javascript Techniques ",我对一个例子感到困惑.这是代码:

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

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

// Just note that the name property does not exist, as it's private
// within the properties object
alert( user.name == null );

// However, we're able to access its value using the new getname()
// method, that was dynamically generated
alert( user.getname() == "Bob" );

// Finally, we can see that it's possible to set and get the age using
// the newly generated functions
user.setage( 22 );
alert( user.getage() == 22 );

现在在Firebug控制台上运行它(在FF3上)会抛出user.getname()不是函数.我试过这样做:

var other = User
other()
window.getname() --> this works!

它奏效了!

知道为什么吗？谢谢大家!

PS:我强烈推荐这本书.

编辑:

这样做的:

var me = this;

似乎工作得更好,但在执行"getname()"时,它返回'44'(第二个属性)...

我也觉得奇怪的是,它没有修改它在窗口对象上工作...

第三个问题,PEZ解决方案和原始解决方案有什么区别？(他不使用匿名函数)

感谢大家的反馈!+1

Answer 1

我认为new在 JavaScript 中工作时最好不要使用关键字。

这是因为如果您随后在不使用 new 关键字（例如：）的情况var user = User()下错误地实例化对象，*会发生非常糟糕的事情...*原因是在函数中（如果在没有new关键字的情况下实例化），this将引用全局对象，即window...

因此，我建议一种更好的方法来使用类对象。

考虑以下示例：

var user = function (props) {
    var pObject = {};
    for (p in props) {
        (function (pc) {
            pObject['set' + pc] = function (v) {
                props[pc] = v;
                return pObject;
            }
            pObject['get' + pc] = function () {
                return props[pc];
            }
        })(p);
    }
    return pObject;
}

在上面的例子中，我在函数内部创建了一个新对象，然后将 getter 和 setter 附加到这个新创建的对象上。

最后，我返回这个新创建的对象。请注意，该this关键字未在任何地方使用

然后，要“实例化” a user，我将执行以下操作：

var john = user({name : 'Andreas', age : 21});
john.getname(); //returns 'Andreas'
john.setage(19).getage(); //returns 19

避免陷入陷阱的最好方法是首先不创建它们......在上面的例子中，我避免了new关键字陷阱（正如我所说，new在应该使用的时候不使用关键字会导致不好的事情发生）完全不使用new。

Answer 2

我开始写这篇文章的唯一目的是了解为什么会发生这种情况，我终于做到了。因此，如果有人对“原因”感兴趣，他们在这里：

为什么匿名函数中的“this”会发生变化？

一个新函数，即使是匿名的，在对象或另一个函数内声明的，总是会更改作用域，在本例中返回到全局作用域（window）。

解决方案：帖子中都说了，我认为更清楚的是使用.call(this)执行匿名函数。

为什么 getname() 总是返回年龄？

虽然匿名函数会立即执行，但 getter/setter 会在调用时第一次执行。在那一刻， i的值将始终是最后一个，因为它已经迭代了所有属性......并且它将始终返回properties[i]，这是最后一个值，在本例中是年龄。

解决方案：将i值保存在这样的变量中

 for ( i in properties ) { (function(){ 
  var j = i
  // From now on, use properties[j]