ООП javascript

[niko42]

Здравствуйте.

var Modal = function(){};

Modal.prototype.block = function(obj, content, time){

var obj = $(obj);
obj.after(content);

var s = obj.next('div');

time = (time == undefined) ? 4000 : time;

for(var i = 0; i < s.length; i++){
$(s[i]).delay(time).fadeOut(500);
setTimeout(function(){
$(s).remove();
},time + 500);
}

};

var Events = function(){
this.modal = new Modal();
};

Events.prototype.addBasket = function(){

$('.basket_bottom').on('click', function(){
this.modal.block(this, '<div class="modal add_basket border_f99100 borderRadius_5">Товар добавлен <a href="/Basket">в корзину</a></div>');
});

};

$(document).ready(function(){
var e = new Events();
e.addBasket();
});



Ошибка: Uncaught TypeError: Cannot read property 'block' of undefined

Направьте, пожалуйста, на путь истинный.

[nice_try]

this у тебя указывает на $('.basket_bottom')

http://jsfiddle.net/hML4P/

[niko42]

this у тебя указывает на $('.basket_bottom')Ясно, спасибо. А как обойти без создание var tmp ?

ТОбишь не писать такое:
Events.prototype.addBasket = function(){

var tmp = this.modal;

$('.basket_bottom').on('click', function(){
tmp.block(this, '<div class="modal add_basket border_f99100 borderRadius_5">Товар добавлен <a href="/Basket">в корзину</a></div>');
});

};

[kobezzza]

Events.prototype.addBasket = function(){
$('.basket_bottom').on('click', function () {
this.modal.block(this, '<div class="modal add_basket border_f99100 borderRadius_5">Товар добавлен <a href="/Basket">в корзину</a></div>');
}.bind(this)); // тут вся соль
};


В ECMAScript6 можно сделать так:

Events.prototype.addBasket = function(){
$('.basket_bottom').on('click', () => {
this.modal.block(this, '<div class="modal add_basket border_f99100 borderRadius_5">Товар добавлен <a href="/Basket">в корзину</a></div>');
});
};

[niko42]

Events.prototype.addBasket = function(){
$('.basket_bottom').on('click', function () {
this.modal.block(this, '<div class="modal add_basket border_f99100 borderRadius_5">Товар добавлен <a href="/Basket">в корзину</a></div>');
}.bind(this)); // тут вся соль
};


Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined


Events.prototype.addBasket = function(){
$('.basket_bottom').on('click', () => {
this.modal.block(this, '<div class="modal add_basket border_f99100 borderRadius_5">Товар добавлен <a href="/Basket">в корзину</a></div>');
});
};


Uncaught SyntaxError: Unexpected token )

[niko42]

kobezzza,
Честно говоря - bind(this)); // тут вся соль не понял.
Можете пояснить почему ?

[kobezzza]

niko42,

Не заметил, что тебе нужен родной this от узла
block(this

тогда только через переменную замыкания

var tmp = this.modal;.

***

Второй пример я привёл из будущего стандарта JS, он пока плохо поддерживается браузерами.

***

Что такое функция bind и как устроен this в JS в интернете over9000 статей.

[Octane]

bind
Кстати, почему jQuery не поддерживает handleEvent…
Мне больше нравится вариант:
var obj = {
method: {

element.addEventListener('click', {
boundObj: this,
handleEvent: function () {
this.boundObj //→ obj
}
});

}
};чем через bind. Во первых не создается лишняя функция, во вторых свойства объекта никак не влияют на аргументы функции.

[kobezzza]

тьфу ты, забыл, что handleEvent принимает объект события, походу переработал сёня :)


Events.prototype.addBasket = function(){
$('.basket_bottom').on('click', function (e) {
this.modal.block(e.target, '<div class="modal add_basket border_f99100 borderRadius_5">Товар добавлен <a href="/Basket">в корзину</a></div>');
}.bind(this));
};