Автоматические сгенерированные автоматы Javascript (Книга Джона Рестига)

Я читаю " 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 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 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 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: Я настоятельно рекомендую эту книгу.

EDIT:

делание:

var me = this;

похоже, работает немного лучше, но при выполнении "getname()" он возвращает "44" (второе свойство)...

Также мне кажется странным, что он работал над объектом окна без изменений...

и третий вопрос, какая разница между решением PEZ и оригиналом? (он не использует анонимную функцию)

Спасибо всем за отзыв! +1

Ответы

Ответ 1

Я начал этот пост с единственной целью узнать, почему это произошло, и я, наконец, сделал это. Поэтому, если кто-то еще интересуется "whys" здесь, они:

Почему в анонимной функции изменяется 'this'?

Новая функция, даже если она анонимна, объявлена ​​внутри объекта или другой функции ВСЕГДА ИЗМЕНИТЬ ОБЪЕМ, в этом случае вернемся к глобальной области (окну)

Решение: все, что указано в сообщении, я думаю, что clearer выполняет анонимную функцию с помощью .call(this)

Почему getname() всегда возвращает возраст?

В то время как анонимная функция выполняется сразу же, получатели/сеттеры выполняются в первый раз при их вызове. В этот момент значение i всегда будет последним, потому что оно уже повторилось для всех свойств... и всегда будет возвращать свойства [i], которое является последним значением, в этом случае возраст.

Решение: сохраните значение я в переменной, подобной этой

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

В основном это, если я ошибаюсь во всем, что я сказал, пожалуйста, исправьте меня, так как я пытаюсь это узнать...

Еще раз спасибо.

Ответ 2

EDIT: теперь, адаптируя ответ Джейсона, он работает:

Нам нужно сделать замыкание для значений. Здесь один из способов:

function bindAccessors(o, property, value) {
  var _value = value;
  o["get" + property] = function() {
    return _value;
  };
  o["set" + property] = function(v) {
    _value = v;
  };
}

Затем конструктор User выглядит так:

function User( properties ) {
  for (var i in properties ) {
    bindAccessors(this, i, properties[i]);
  }
}

Ответ 3

Я думаю, что лучше не использовать ключевое слово new вообще при работе в JavaScript.

Это связано с тем, что если вы затем создаете экземпляр объекта без с помощью нового ключевого слова (ex: 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;
}

В приведенном выше примере я создаю новый объект внутри функции, а затем присоединяю геттеры и сеттеры к этому вновь созданному объекту.

Наконец, я возвращаю этот вновь созданный объект. Обратите внимание, что ключевое слово this не используется нигде

Затем, чтобы "создать экземпляр" a user, я бы сделал следующее:

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

Лучший способ избежать попадания в ловушки - это не создавать их в первую очередь... В приведенном выше примере я избегаю ключевого слова new (как я сказал, а не использование ключевого слова new, когда оно должно использоваться, приведет к возникновению плохих вещей), не используя new вообще.

Ответ 4

вы, вероятно, хотите что-то вроде этого, что более читаемо: (закрытие легко узнать, как только вы получите некоторую практику)

function User( properties ) {
  // helper function to create closures based on passed-in arguments:
  var bindGetterSetter = function(obj,p,properties)
  {
    obj["get"+p]=function() { return properties[p]; }
    obj["set"+p]=function(val) { properties[p]=val; return this; }
  };
  for (var p in properties)
    bindGetterSetter(this, p, properties);
}

Я также добавил "return this"; так что вы можете сделать:

u=new User({a: 1, b:77, c:48});
u.seta(3).setb(20).setc(400)

Ответ 5

Как указано в OP, this в цикле не относится к объекту User, как и должно быть. Если вы запишете эту переменную за пределами цикла, вы можете заставить ее работать:

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

Ответ 6

Я только немного изменил код, как это. Это должно работать. Это то же самое, что и установка me = this; Но для правильного задания значения каждого свойства требуется замыкание, иначе последнее значение будет присвоено всем свойствам.

    // Create a new user object that accepts an object of properties
    var User = function( properties ) {
      // Iterate through the properties of the object, and make sure
      // that it properly scoped (as discussed previously)
      var THIS = this;
      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;
      };
    })(i); }
    }

    // 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 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 possible to set and get the age using
// the newly generated functions
user.setage( 22 );
alert( user.getage() == 22 );

Ответ 7

Может быть, переменная i "закрыта" с последним значением в итерации ( "возраст" )? Затем все геттеры и сеттеры будут обращаться к свойствам [ "age" ].

Ответ 8

Я нашел то, что кажется ответом, все о контексте. Используя анонимную функцию внутри for, измените контекст, создающий 'this', ссылаясь на объект окна, странно, не так ли?

так:

function User( properties ) {

  for ( var i in properties ) { 
     // here this == User Object
    (function(){
     // inside this anonymous function this == window object
    this[ "get" + i ] = function() {
      return properties[i];
    };

    this[ "set" + i ] = function(val) {
      properties[i] = val;
    };
    })(); 
  }
}

Я не знаю, почему эта функция меняет контекст исполнения, я не уверен, что это должно сделать это, так или иначе, вы можете протестировать ее, запуская там код и пытаться window.getname(), и это волшебным образом работает!: S

Решение, которое sated before, меняет контекст, может быть сделано, как сказал J Cooper, передавая переменную me и делая функцию закрытием, или вы можете сделать это:

(function(){
     // inside this anonymous function this == User because we called it with 'call'
    this[ "get" + i ] = function() {
      return properties[i];
    };

    this[ "set" + i ] = function(val) {
      properties[i] = val;
    };
 }).call(this); 

В любом случае, я все еще получаю 44 при запуске 'getname'... любых идей?