Javascript автоматический сборщик / установщик (John Resig Book) - PullRequest
Новая
       7

Javascript автоматический сборщик / установщик (John Resig Book)

17 голосов
/ 18 декабря 2008

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

EDIT:

делает 

var me = this;

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

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

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

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

Ответы [ 8 ]

4 голосов
/ 18 декабря 2008

РЕДАКТИРОВАТЬ: теперь, адаптируя ответ Джейсона, он работает:

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

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]);
  }
}
4 голосов
/ 19 декабря 2008

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

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

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

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

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

3 голосов
/ 19 декабря 2008

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

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

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

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

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

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

Решение: сохранить значение i в такой переменной, как эта 

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

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

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

3 голосов
/ 18 декабря 2008

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

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

Я также добавил «вернуть это»; так что вы можете сделать: 

u=new User({a: 1, b:77, c:48});
u.seta(3).setb(20).setc(400)
2 голосов
/ 31 октября 2011

Я просто немного изменил код следующим образом .. Этот должен работать .. Это то же самое, что установить 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's 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'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 );
2 голосов
/ 18 декабря 2008

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

function User( properties ) {
  // Iterate through the properties of the object, and make sure
  // that it's 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
1 голос
/ 18 декабря 2008

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

0 голосов
/ 18 декабря 2008

Я нашел что-то, что, кажется, ответ, это все о контексте. Использование анонимной функции внутри 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

Решение, предложенное ранее, заключается в изменении контекста. Это можно сделать, как сказал Дж. Купер, передав переменную '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' ... какие-нибудь идеи?

...