Javascript автоматический сборщик / установщик (John Resig Book)
Я читаю " 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
8 ответов
Я начал этот пост с единственной целью узнать, почему это произошло, и я наконец сделал это. Так что, если кто-то еще заинтересован в "почему", вот они:
Почему "это" изменяется внутри анонимной функции?
Новая функция, даже если она является анонимной, объявляется внутри объекта или другой функции ВСЕГДА ИЗМЕНЯЕТ ОБЛАСТЬ, в этом случае возвращаясь к глобальной области (окно)
Решение: все изложенное в посте, я думаю, что яснее выполняет анонимную функцию с.call(это)
Почему getname() всегда возвращает возраст?
В то время как анонимная функция выполняется сразу же, геттеры / сеттеры выполняются впервые при вызове. В этот момент значение i всегда будет последним, потому что оно уже повторено для всех свойств... и всегда будет возвращать properties[i], которое является последним значением, в данном случае age.
Решение: сохраните значение i в такой переменной
for ( i in properties ) { (function(){
var j = i
//from now on use properties[j]
Вот и все, если я ошибаюсь во всем, что я сказал, поправьте меня, потому что я пытаюсь выучить это...
Еще раз спасибо.
Я думаю, что лучше не использовать 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 совсем.
РЕДАКТИРОВАТЬ: теперь, адаптируя ответ Джейсона, это работает:
Нам нужно сделать закрытие для значений. Вот один из способов:
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]);
}
}
Вы, вероятно, хотите что-то вроде этого, которое будет более читабельным:
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)
Как написано в ОП, this в цикле не ссылается на объект пользователя, как это должно быть. Если вы захватите эту переменную вне цикла, вы можете заставить ее работать:
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
Я просто немного изменил код, как это.. Этот должен работать.. Это то же самое, что установить 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 );
Может быть, переменная i "закрыта" с последним значением в итерации ("возраст")? Тогда все получатели и установщики получат доступ к свойствам ["age"].
Я нашел что-то, что, кажется, ответ, это все о контексте. Использование анонимной функции внутри 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... какие-нибудь идеи?