为什么Chrome Dev Tools检查器显示的值与代码中的值不同？

Question

A picture is worth a thousand words. Maybe i'm tired I don't know, But this has me stuck for some reason and makes no sense what so ever. Can anyone point me in the right direction?

> Right click images and open in new tab

Stand Alone Code

/**
 * @file maestro.class.js
 *
 * @external $M         Main Maestro Object
 * @external $M.Core    Maestro Core Object
 */

/**
 * A modified version of class.js to cater to static inheritance and deep 
 * object cloning. Based almost completely on class.js (Javascript MVC -- 
 * Justin Meyer, Brian Moschel, Michael Mayer and others)
 * (http://javascriptmvc.com/contribute.html)
 *
 * - Some portions adapted from Prototype JavaScript framework, version 1.6.0.1 (c) 2005-2007 Sam Stephenson
 * - Some portions extracted from jQuery 1.7
 * - String utilities methods removed and added to String prototype. Documentation
 * added and making code Closure Compiler Advanced Safe by Andrew Donelson.
 *
 * Class system for javascript
 *
 * Setup method will be called prior to any init -- nice if you want to do things without needing the
 * users to call _super in the init, as well as for normalizing parameters.
 *
 * @class Class
 * @expose
 * @namespace Class
 * @memberof Core
 * Advanced Optimization Compliant
 */
(function (m$)
{
    var 
        /** 
         * I have dropped this code for production, But it's bothering as to why
         * this is happening and I would like to get it figured out.
         *
         * @property {Object} regs
         * @expose 
         */
        regs = {
            'undHash':/_|-/,
            'colons':/::/,
            'words':/([A-Z]+)([A-Z][a-z])/g,
            'lowUp':/([a-z\d])([A-Z])/g,
            'dash':/([a-z\d])([A-Z])/g,
            'replacer':/\{([^\}]+)\}/g,
            'dot':/\./
        },

        /**
         * @method getNext
         * @expose
         * @param {*} current
         * @param {string} nextPart
         * @param {boolean} add
         * @returns {*} 
         */
        getNext = function(current, nextPart, add)
        {
            return current[nextPart] || ( add && (current[nextPart] = {}) );
        },

        /**
         * Returns true if the given parameter is either a function or object
         *
         * @method isContainer
         * @expose
         * @param {*} current
         * @returns {*} 
         */
        isContainer=function (current)
        {
            var type = typeof current;
            return type && (  type == 'function' || type == 'object' );
        },

        /**
         * Gets an object from a string.
         *
         * @method getObject
         * @expose
         * @param {String} name the name of the object to look for
         * @param {Array} [roots] an array of root objects to look for the name
         * @param {Boolean} [add] true to add missing objects to
         *  the path. false to remove found properties. undefined to
         *  not modify the root object
         * @returns {String} 
         */
        getObject=function (objectName, roots, add)
        {
            //Production version:
            //var parts = objectName ? objectName.split(/\./) : [],

            var parts = objectName ? objectName.split(regs.dot) : [],
                length = parts.length,
                currents = m$.isArray(roots) ? roots : [roots || window],
                current,
                ret,
                i,
                c = 0,
                type;

            if (length == 0)
            {
                return currents[0];
            }
            while (current = currents[c++])
            {
                for (i = 0; i < length - 1 && m$.isContainer(current); i++)
                {
                    current = m$.getNext(current, parts[i], add);
                }
                if (m$.isContainer(current))
                {

                    ret = m$.getNext(current, parts[i], add);

                    if (ret !== undefined)
                    {

                        if (add === false)
                        {
                            delete current[parts[i]];
                        }
                        return ret;
                    }

                }
            }
        };

    //This is just trying to get it to save the names correctly. 
    //not really wanted. and not working anyway.
    m$.regs=regs;
    m$.getNext = getNext;
    m$.isContainer = isContainer;
    m$.getObject = getObject;   

})(M$['Core']);

And minimized with closure compiler, advanced optimizations:

//So why did everything get renamed? Noot only was expose used,
//but I manually accessed the objects methods and property.
(function(b){
var h={undHash:/_|-/,colons:/::/,words:/([A-Z]+)([A-Z][a-z])/g,lowUp:/([a-z\d])([A-Z])/g,dash:/([a-z\d])([A-Z])/g,replacer:/\{([^\}]+)\}/g,dot:/\./};
b.e=h;
b.a=function(a,b,f){return a[b]||f&&(a[b]={})};
b.b=function(a){return(a=typeof a)&&("function"==a||"object"==a)};
b.d=function(a,d,f){a=a?a.split(h.c):[];
var k=a.length;
d=b.isArray(d)?d:[d||window];
var c,g,e,l=0;if(0==k)return d[0];
for(;c=d[l++];){for(e=0;e<k-1&&b.b(c);e++)c=b.a(c,a[e],f);
if(b.b(c)&&(g=b.a(c,a[e],f),void 0!==g))return!1===f&&delete c[a[e]],g}}
})(M$.Core);

Answer 1

I really wish you'd just copy pasted the complete text somewhere (in pastebin or jsfiddle if not here) because it's much harder to answer if I keep having to click on the picture, remember what I saw, click on this window and start typing, click on the picture to remind myself, click on this window and continue typing... click on the picture to be sure etc..

Anyway, the mysterious bit is not that f changes to J or h changes to J but that G changes to J and regs changes to J .

If you look at the line below, the variables f and h are simply assigned:

a.G = f;

And from that point on f is no longer used. Now, considering this, I'm going to assume that at some point aG or a.regs will be assigned to Core.J . I'm further going to assume that the non closure compiled code is actually assigning a.regs to Core.regs but the closure compiler compiles Core.regs into Core.J and a.regs into aG .

Search in the remainder of the code for how the values contained in a gets assigned to Core and you'll have your answer.

---

Additional Answer:

If you want to force closure to export something you need to make it impossible to replace the names safely. Global variables cannot be replaced safely because they may be used by another js file included in the page. As such, if you want the regs to be preserved then make it a global by removing the var .

Or, make it clear that a is global or Core or M$ is global depending on your needs.

Answer 2

清除缓存或按ctrl + F5重新加载页面。

Answer 3

Okay, here is the working stand alone code for anyone else trying to make their code Closure Compiler Advanced Optimization Safe. Keep in mind, Code and JSDOC/Closure Comments are required. I used extra @expose tags but that does not hurt.

Raw Source::

/**
 * A modified version of class.js to cater to static inheritance and deep 
 * object cloning. Based almost completely on class.js (Javascript MVC -- 
 * Justin Meyer, Brian Moschel, Michael Mayer and others)
 * (http://javascriptmvc.com/contribute.html)
 *
 * - Some portions adapted from Prototype JavaScript framework, version 1.6.0.1 (c) 2005-2007 Sam Stephenson
 * - Some portions extracted from jQuery 1.7
 * - String utilities methods removed and added to String prototype. Documentation
 * added and making code Closure Compiler Advanced Safe by Andrew Donelson.
 *
 * Class system for javascript
 *
 * Setup method will be called prior to any init -- nice if you want to do things without needing the
 * users to call _super in the init, as well as for normalizing parameters.
 *
 * @class Class
 * @expose
 * @namespace Class
 * @memberof Core
 * Advanced Optimization Compliant
 */
(function (m$)
{
    /** 
     * Some stand regular expressions used by the internal string prototypes
     * to handle correct naming.
     *
     * @property {Object} regs
     * @expose 
     */
    m$['regs'] = {
        'undHash':/_|-/,
        'colons':/::/,
        'words':/([A-Z]+)([A-Z][a-z])/g,
        'lowUp':/([a-z\d])([A-Z])/g,
        'dash':/([a-z\d])([A-Z])/g,
        'replacer':/\{([^\}]+)\}/g,
        'dot':/\./
    },

    /**
     * @method getNext
     * @expose
     * @param {*} current
     * @param {string} nextPart
     * @param {boolean} add
     * @returns {*} 
     */
    m$['getNext'] = function(current, nextPart, add)
    {
        return current[nextPart] || ( add && (current[nextPart] = {}) );
    },

    /**
     * Returns true if the given parameter is either a function or object
     *
     * @method isContainer
     * @expose
     * @param {*} current
     * @returns {*} 
     */
    m$['isContainer'] = function (current)
    {
        var type = typeof current;
        return type && (  type == 'function' || type == 'object' );
    },

    /**
     * Gets an object from a string.
     *
     * @method getObject
     * @expose
     * @param {String} name the name of the object to look for
     * @param {Array} [roots] an array of root objects to look for the name
     * @param {Boolean} [add] true to add missing objects to
     *  the path. false to remove found properties. undefined to
     *  not modify the root object
     * @returns {String} 
     */
    m$['getObject'] = function (objectName, roots, add)
    {   
        var parts = objectName ? objectName.split(regs['dot']) : [],
            length = parts.length,
            currents = m$.isArray(roots) ? roots : [roots || window],
            current,
            ret,
            i,
            c = 0,
            type;

        if (length == 0)
        {
            return currents[0];
        }
        while (current = currents[c++])
        {
            for (i = 0; i < length - 1 && m$.isContainer(current); i++)
            {
                current = m$.getNext(current, parts[i], add);
            }
            if (m$.isContainer(current))
            {

                ret = m$.getNext(current, parts[i], add);

                if (ret !== undefined)
                {

                    if (add === false)
                    {
                        delete current[parts[i]];
                    }
                    return ret;
                }

            }
        }
    }
})(M$['Core']);

And here is the Advanced Optimization minimized code cleaned up a bit for legibility::

(function(b){
b.regs={
undHash:/_|-/,
colons:/::/,
words:/([A-Z]+)([A-Z][a-z])/g,
lowUp:/([a-z\d])([A-Z])/g,
dash:/([a-z\d])([A-Z])/g,
replacer:/\{([^\}]+)\}/g,
dot:/\./
};
b.getNext=function(a,b,f){return a[b]||f&&(a[b]={})};
b.isContainer=function(a){return(a=typeof a)&&("function"==a||"object"==a)};
b.getObject=function(a,d,f){a=a?a.split(regs.dot):[];
var h=a.length;
d=b.isArray(d)?d:[d||window];
var c,g,e,k=0;if(0==h)return d[0];
for(;c=d[k++];){for(e=0;e<h-1&&b.b(c);e++)c=b.a(c,a[e],f);
if(b.b(c)&&(g=b.a(c,a[e],f),void 0!==g))return!1===f&&delete c[a[e]],g}}
})(M$.Core); // 584 Bytes

Simple Optimization minimized code cleaned up a bit for legibility::

(function(b){
b.regs={
undHash:/_|-/,
colons:/::/,
words:/([A-Z]+)([A-Z][a-z])/g,
lowUp:/([a-z\d])([A-Z])/g,
dash:/([a-z\d])([A-Z])/g,
replacer:/\{([^\}]+)\}/g,
dot:/\./
};
b.getNext=function(a,b,f){return a[b]||f&&(a[b]={})};
b.isContainer=function(a){return(a=typeof a)&&("function"==a||"object"==a)};
b.getObject=function(a,d,f){a=a?a.split(regs.dot):[];
var h=a.length;d=b.isArray(d)?d:[d||window];
var c,g,e,k=0;
if(0==h)return d[0];
for(;c=d[k++];){for(e=0;e<h-1&&b.isContainer(c);e++)c=b.getNext(c,a[e],f);
if(b.isContainer(c)&&(g=b.getNext(c,a[e],f),void 0!==g))return!1===f&&delete c[a[e]],g}}
})(M$.Core); //616 bytes

So, is it worth the headache and extra hassle to make your code compile in Advanced Optimizations?

I say Yes and No and I'll explain...

• Yes if: You plan your structure ahead of time and use proper Closures with all of your internal helper or utility methods added to another closure inside of your main closure. This way you don't clutter up your main object.

• No if: Standard unorganized code. Nothing wrong with this at all, but it is not worth wasting your time to do advanced optimizations.

Well, let me know what you think. and thanks for the input and help.