Что заставляет этот код не работать?

Question

Я пытаюсь понять, почему это не работает. (Базовый пример без проверки еще)

Когда я проверяю это, firebug сообщает, что Product.addPage не найден.

var Product = function ()
{
    var Page = function ()
    {
        var IMAGE = '';

        return {
            image : function ()
            {
                return IMAGE;
            },
            setImage : function (imageSrc_)
            {
                IMAGE = '<img id="image" src="' + imageSrc_ + '" height="100%" width="100%">';
            }
        };
    };
    var PAGES = [];

    return {
        addPage : function ()
        {
            var len = PAGES.length + 1;
            PAGES[len] = new Page();
            return PAGES[len];
        },
        page : function (pageNumber_)
        {
            var result = PAGES[pageNumber_];
            return result;
        }
    };
};

// Begin executing
$(document).ready(function ()
{
    Product.addPage.setImage('http://site/images/small_logo.png');
    alert(Product.page(1).image());
});

Answer 1

Вы пытаетесь сослаться на свойство addPage функции Product (которая в данном случае является конструктором), а не на возвращаемый объект.

Вы, вероятно, хотите что-то вроде:

<code>// Begin executing
$(document).ready(function ()
{
    var product = new Product();
    product.addPage().setImage('<a href="http://site/images/small_logo.png" rel="nofollow noreferrer">http://site/images/small_logo.png</a>');
    alert(product.page(1).image());
});

который также добавляет скобки к вызову addPage (хотя это не проблема, на которую FireBug будет жаловаться, так как он не сможет найти этот метод в любом случае).

Answer 2

Как насчет Product.addPage().setImage('http://site/images/small_logo.png');?

---

Редактировать: Оказывается, я поймал только половину проблемы. Посмотрите на ответ дцацзы за все это.

Answer 3

Как насчет:

var Product = {
    Page : function() {             
        return {
            _image : '',
            Image : function() {
                return this._image;
            },
            setImage : function(imageSrc_) {
                this._image = '<img id="image" src="' + imageSrc_ + '" height="100%" width="100%">';
            }
        };
    },
    Pages : [],
    addPage : function() {
        var Page = new Product.Page();
        this.Pages.push(Page);
        return Page;
    },
    GetPage : function(pageNumber_) {
        return this.Pages[pageNumber_];
    }
};

// Begin executing
$(document).ready(function ()
{
    Product.addPage().setImage('http://site/images/small_logo.png');
    alert(Product.GetPage(0).Image());
});

Answer 4

Это бы тоже сработало:

Product().addPage().setImage('http://site/images/small_logo.png');