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