Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   ООП javascript (https://javascript.ru/forum/misc/47435-oop-javascript.html)

niko42 23.05.2014 18:06

ООП javascript
 
Здравствуйте.
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 23.05.2014 18:16

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

http://jsfiddle.net/hML4P/

niko42 23.05.2014 18:17

Цитата:

Сообщение от nice_try (Сообщение 313137)
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 23.05.2014 18:22

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 23.05.2014 18:32

Цитата:

Сообщение от kobezzza (Сообщение 313139)
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

Цитата:

Сообщение от kobezzza (Сообщение 313139)
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 23.05.2014 18:41

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

kobezzza 23.05.2014 18:46

niko42,

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


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

var tmp = this.modal;
.

***

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

***

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

Octane 23.05.2014 19:00

Цитата:

Сообщение от kobezzza
bind

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

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

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

kobezzza 23.05.2014 19:19

тьфу ты, забыл, что 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));
};


Часовой пояс GMT +3, время: 19:55.