User Objects...

[claster]

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

window.onload=function(){
		for (var i = 0; i < 10; i++) {
			var box = new Box();
			box.append(document.body)
			box.styled();
			box.moveRandPos(500, 700);
			box.moveRandBacColor();
		}
	}
	function Box(element){
		this.box = element || this.create();
	}
	Box.prototype.create=function(){
		return document.createElement("DIV");
	}
	Box.prototype.append=function(to){
		return to.appendChild(this.box)
	}
	Box.prototype.styled=function(){
		this.box.style.cssText = "width:30px;height:30px;border:1px solid blue;position:absolute;"
		return this.box;
	}
	Box.prototype.randColor=function(){
		var sb = "0123456789abcdf";
		var color = "#";
		for(var i=0; i<6; i++){
			color += sb.charAt(Math.random()*15);
		}
		return color;
	}
	Box.prototype.randBacColor=function(){
		this.box.style.backgroundColor = this.randColor();
		return this.box;		
	}
	Box.prototype.moveRandBacColor=function(){
			var _this = this;
			function go()
			{
				_this.randBacColor();
				setTimeout(go,1000)
			}	
			go()
	}
	Box.prototype.randPos = function(max_top,max_left){
		
		this.box.style.top = parseInt(Math.random()*(max_top-1)) + "px";		
		this.box.style.left = parseInt(Math.random()*(max_left-1)) + "px";
	}		
	Box.prototype.moveRandPos=function(max_top,max_left){
			var _this = this;
			function go()
			{
				_this.randPos(max_top,max_left);
				setTimeout(go,1000)
			}	
			go()
	}

[Dmitry A. Soshnikov]

claster, ?? я зря объяснял? Или что-то было упущено? Или пример сильно отличался от твоего кода? =)

Kolyaj, не сбивай с толку человка =)

[claster]

ds [.code], в первом подходе я так и не смог получить доступ к родственным методам и свойствам в нутри метода определенного через прототип...

function UserObject() {
	this.color = 'blue';
	var _this = this;
	return true;
}
 
UserObject.prototype.bg = function() {

  this.style.backgroundColor = this.color;
  //alert(this.color); - это undefined так как this уже ссылаеться на div 
  //alert(_this.color); - это not defined
  return true;
}

var div = document.createElement("DIV")
div.style.cssText = "width:100px;height:100px;border :1px solid blue;"
document.body.appendChild(div);
var user_obj = new UserObject();
user_obj.bg.call(div);

в коде есть комментарии...

поэтому зашел с другой стороны
вот теперь меня интересует, правильно ли я мыслил во второй раз?
если же есть выход в первом случае, с удовольствием готов узнать решение.

[Dmitry A. Soshnikov]

claster, ууупс, да что ж такое-то! - опять я неправильно вопрос прочитал (мне причудилось, что у тебя там падает с ошибкой, а все из-за того, что я скопировал твой код без window.onload) - переутомление, наверно, прошу извинить =) Да, call и apply вызывают метод в контексте переданного объекта. В грубом приближении - просто подставиться нужная ссылка this (this будет правильно ссылаться - на нужный объект). А вот свойства color в твоем div'е нет. Поэтому, второй вариант (где div хранится отдельным свойством UserObject'a) правильней и подобных проблем не вызовит.

[claster]

ds [.code], я рад что ты понял суть проблемы, по крайней мере спасибо что пытался помочь, за что респект, но первый вариант пока остается без решения...

[Dmitry A. Soshnikov]

claster, а какое может быть решение при первой организации? Метод (и только метод!) вызывается в контексте нужного объекта. Означает это всего лишь то, что this в этот момент будет ссылаться на переданный объет. Это как будто у объекта "на пару секунд" (на время выполнения) появился свой такой же метод, как у родного объекта (которому принадлежит метод). Но свойстами объект будет оперировать своими, а не родного объекта. Поэтому, естественно, свойства color div не имеет и нельзя присвоить this.color. И поэтому оптимальной организацией является вторая, - где твой div хранится свойством объекта, и тогда до него можно достучаться в прототипе.

[claster]

ds [.code], да я об этом написал с самого начала, т.е. механизм я понимаю... просто предположил, что есть обходной маневр и поинтересовался у общественности... оказалось лучше вобще сменить подход на второй...

[Dmitry A. Soshnikov]

> просто предположил, что есть обходной маневр ... оказалось лучше вобще сменить подход на второй

нет, ну почему - если за "обходной маневр" посчитать, что UserObject работает только со свойствами конкретного объекта (или группы конкретных объектов со схожими свойствами), то вполне сработает и первый вариант (т.е. UserObject просто станет оберткой для методов объектов, вызванных call'ом или apply'ем)

Третьим вариантом может быть расширение самого объекта (div'a в твоем случае) таким методом (тогда можно будет вызвать твойDiv.bg(), хотя при первом варианте (при условии, что UserObject работает только со нужными свойствами) будет тратиться меньше памяти, поскольку вызывается всегда одна единственная функция в нужном контексте). Кстати, в FF и Opera можно расширить встроенные интерфейсы (например window.HTMLElement), от которого наследуются html-елементы и тогда также памяти сожрется меньше (тоже будет всего одна функция в прототипе) и также можно вызывать твойDiv.bg();

[vandy]

Kolyaj,

В вашем примере для каждого создаваемого объекта будет создаваться свой набор методов, а при использовании prototype он (набор методов) будет один. Т.е. с prototype и быстрее и памяти меньше.

Поясните, пож.

[claster]

>Кстати, в FF и Opera можно расширить встроенные интерфейсы (например window.HTMLElement), от которого наследуются html-елементы и тогда также памяти сожрется меньше (тоже будет всего одна функция в прототипе) и также можно вызывать твойDiv.bg();

Мало того, в нормальных браузерах можно расширить Object и эти методы будут доступны для HTML элементов, но есть Ослик который естественно всегда был и останется стокилограммовой гирей привязанной к ноге девелоперов...
Спасибо за помощь!