I am trying to learn how to write more object oriented javascript code, but I am having a hard time understanding the correct way to do it, and how it is useful for front end development. As you can see below, I tried to rewrite my old javascript code to be more object oriented, but it just doesn't seem necessary for what I am doing. I am not even sure if I am doing it correctly (would it be better to use a self executing anonymous function for this?). Could someone take a look at my code and tell me how I can improve it? Also, explain to me why it is important to write object oriented javascript for the development of a websites frontend?

Original Code

// Document and Windows Variables
var $document = $(document),
    $window = $(window);

// Equalize
function equal_heights() {
    var $row = $('.equal');

    if ($row.length > 0) {
        $row.each(function() {
            var $sections = $(this).children(),
                largest_height = 0;

            $sections.height('auto');

            $sections.each(function() {
                var h = $(this).height();
                if (largest_height < h) largest_height = h;
            });

            $sections.height(largest_height);
        });
    }
}

// Position Popups
function position_popup() {
    var $popup = $('.popup'),
        pop_height = $popup.outerHeight(true),
        pop_width = $popup.outerWidth(true),
        browser_height = $(window).height(),
        pop_top = 10,
        page_pos = document.documentElement.scrollTop || document.body.scrollTop;

    if (pop_height < browser_height) {
        pop_top = browser_height / 2 - pop_height / 2;
    }

    $popup.css({
        top: page_pos + pop_top
    });
}

// Page Animation Fade (On Scroll)
function page_animations() {
    $('.fade-me').each(function(i) {
        if ($window.scrollTop() > $(this).offset().top - ($window.height() / 1)) {

            $(this).addClass('is-showing');

        }
    });
}

page_animations();

/********************
Run Functions
********************/
$window.on({
  load: function() {
   equal_heights();
   position_popup();
  }
});

OOP

// Document and Windows Variables
var $reuseVars = {
    window: $(window),
    document: $(document)
}

//  Functions Object
function AllFunctions() {}

AllFunctions.prototype = {
    // Equal Heights
    equalHeights: function() {
        var $row = $('.equal');

        if ($row.length > 0) {
            $row.each(function() {
                var $sections = $(this).children(),
                    largest_height = 0;

                $sections.height('auto');

                $sections.each(function() {
                    var h = $(this).height();
                    if (largest_height < h) largest_height = h;
                });

                $sections.height(largest_height);
            });
        }
    },

    // Popup Position
    positionPopup: function() {
        var $popup = $('.popup'),
            pop_height = $popup.outerHeight(true),
            pop_width = $popup.outerWidth(true),
            browser_height = $(window).height(),
            pop_top = 10,
            page_pos = document.documentElement.scrollTop || document.body.scrollTop;

        if (pop_height < browser_height) {
            pop_top = browser_height / 2 - pop_height / 2;
        }

        $popup.css({
            top: page_pos + pop_top
        });
    },

    // Page Fade Animation - On Scroll
    pageAnimation: function() {
        $('.fade-me').each(function(i) {
            if ($reuseVars.window.scrollTop() > $(this).offset().top - ($reuseVars.window.height() / 1)) {

                $(this).addClass('is-showing');

            }
        });
    }
};

// Create All Functions Object
var allFunctions = new AllFunctions();

// Run Functions on doc ready
allFunctions.pageAnimation();

/********************
 Run Functions
********************/
$reuseVars.window.on({
   load: function() {
     allFunctions.equalHeights();
     allFunctions.positionPopup();
   }
});