从函数返回的对象的生命周期

Question

When using a module-esq pattern to allow chaining of methods, how long do the returned objects last before being garbage collected? I really like the way jquery allows chaining methods but I'm concerned it will pollute the memory of the page with lots of unnecessary objects if I use th pattern for my code.

here is a simple example

(function(){
    // persistant variable wrapped in a closure
    var prop = 'something';

    //module function
    function house(){
        function method1(){
            console.log(prop);
            return this;
        }
        function method2(value){
            prop = value
            return this;
        }
        return {
            getProp: method1,
            setProp: method2
        }
    }
    window.house = house;
})();

/*
 * I am wanting to know how long the returned object will last in memory
 */

house().setProp('somethingElse');

Here is more real world example:

(function(){
    // object cache to store all the elem id's that have been called
    var _elemIds = {};

    function get(elem){

        if(!_elemIds[elem]){
            // add to _elemIds object if doesn't exist
            _elemIds[elem] = document.getElementById(elem);
        }

        var _currentElem = _elemIds[elem];

        // set a css property using a json object, or get with a string
        function css(){
            if(typeof arguments[0] === 'object'){
                for( x in arguments[0]){
                    _currentElem.style[x] = arguments[0][x];
                }
                return this;
            }
            else if(typeof arguments[0] === 'string'){
                var l = arguments.length;
                // if more than one argument return an array
                if(l > 1){
                    var ret = [];
                    for (var i = 0; i < l; i++) {
                        if(_currentElem.style[arguments[0]] !== ''){
                            ret.push(_currentElem.style[arguments[i]]);
                        } else {
                            ret.push(window.getComputedStyle(_currentElem, null)[arguments[i]]);
                        }
                    }
                    return ret;
                } else {
                    if(_currentElem.style[arguments[0]] !== ''){
                        return _currentElem.style[arguments[0]];
                    } else {
                        return window.getComputedStyle(_currentElem, null)[arguments[0]];
                    }   
                }   
            }
        }

        // change the color of the text
        function color(color){
            _currentElem.style.color = color;
            return this;
        }

        // log the current element
        function test(){
            console.log('currentElem id: ' + _currentElem.id);
            return this;
        }

        // return the public methods
        return {
            css: css,
            current: test,
            color: color
        }
    };
    // set the get method to the global object
    window.get = get;

})();

to access the methods from the above code you would use something like

get('elemId').css(('prop': 'value'}).current().css('prop');

thanks for any answers.

Cheers,

Andrew

Answer 1

Well, first of all you should read this question: Learning garbage collection theory

Then, you need to know that every javascript runtime implement its own very specific GC, so there is absolutely no rule to when and how the objects are garbage collected. Once they are not referenced you should consider them gone forever, and trust (I know, it's a lot to ask) that GC will release the memory at the "best time" after the object are dereferenced.

To know more about specific stuff about each GC, you need to go read resources concerning each one of them, luckily for you, there is now only 3 major engines! Here are resources to help you get further on the topic of GC in JS:

• SpiderMonkey:
  • https://archive.fosdem.org/2013/schedule/event/spidermonkey_garbage_collection_where_we_are_now_and_where_we_are_going/
  • http://people.mozilla.org/~jcoppeard/fosdem_gc_talk/
  • https://air.mozilla.org/spider-monkey-garbage-collection/
  • https://blog.mozilla.org/javascript/2013/07/18/clawing-our-way-back-to-precision/
• Node.JS:
  • garbage collection with node.js
  • Garbage collector in Node.js
  • http://blog.nodejs.org/2013/03/11/node-v0-10-0-stable/ (paragraph Latency and Idle Garbage Collection)
  • https://github.com/bnoordhuis/node-idle-gc
  • https://npmjs.org/package/memwatch
• Chakra
  • http://blogs.msdn.com/b/ie/archive/2012/06/13/advances-in-javascript-performance-in-ie10-and-windows-8.aspx
  • http://gotocon.com/dl/goto-aar-2012/slides/SteveLucco_TheInnerWorkingsOfTheChakraJavascriptEngine.pdf
  • http://2012.jsconf.eu/speaker/2012/09/17/what-does-chakra-do-with-your-javascript-.html

I'm pretty sure I'm not exhaustive with all those links, but I guess it's a good starting point for you to learn more about all the specifics on the GC of the three JS engines!