我真的不知道javascript闭包

Question

Here is the plunker .

function factory() {
    var yscale = function() {
        console.log("original");
    };
    var status = {
        yscale: yscale
    };

    function render() {
        yscale = function() {
            console.log("I am a scale");
        };
    }

    render.__privateStatus = {
        yscale: yscale
    };

    render.__privateStatus2 = status;

    render.__privateStatusGetter = function() {
        return status;
    };

    render.__privateStatusGetter2 = function() {
        return yscale;
    };

    return render;
}

var chart = factory();
chart();
console.log(chart.__privateStatus.yscale); // "original"
console.log(chart.__privateStatus2.yscale); // "original"

console.log(chart.__privateStatusGetter().yscale); // "original"
console.log(chart.__privateStatusGetter2()); // "I am a scale"

I returned a function in a closure, if some initialization happens in closure function, what the reason preventing the new value revealed as status of the returned function?

Could anyone help explain this from the language itself?

Update

Base on @RobG's answer, I think the question could be simplified with

• Is function a primitive type?
• What's the difference between a function and an object? .

You could noticed that yscale is a function(it is undefined before the call of chart(), even initialize yscale with a function, result is the same). If function is primitive type, we should not be able to attach properties to it. If function is an object, we possibly could use the reference passing to change it status.

I know my second question is kinda naive. If you define a function and let a variable point it, you cannot simply change its inner states by assign it to another function. But think my first question--we could change a function(or function pointer)'s states by attaching method to do like render.__privateMethods to change its behaviors.

Everybody knows we could use a module pattern to use an object to return the API of a module. Mike Bostock shows here that we could use a function to achieve similar thing just as an object and even more, we could have something like a constructor. I thought I know both function and object very well. But with some wild thoughts, I am confused.

That's the reason I am looking for an answer from javascript language rather than what the result should be even from instinct.

Answer 1

I'll take a guess that you're surprised that the following returns undefined :

console.log(chart.__privateStatus.yscale);

That is because when the following line is executed:

render.__privateStatus = {
        yscale: yscale
    }

the value of the yscale variable is undefined , so that's the value that gets assigned. Changing the value of the variable later has no effect. Note that in javascript, assigning a primitive assigns the actual value, assigning an object assigns a reference to the object. So while __privateStatus is passed a reference to the object, the yscale property is assigned the actual value undefined .

For the same reason:

console.log(chart.__privateStatus2.yscale);

returns undefined because there is:

var yscale;
var status = {
    yscale: yscale  // yscale is undefined when this assignment is made
};

so status.yscale is undefined and later:

render.__privateStatus2 = status;

is assigned a reference to the same object. Changing the value of yscale later has no effect, its previous value has already been assigned.

Same again for:

console.log(chart.__privateStatusGetter().yscale); // undefined

To get the current value of yscale , change the function to:

render.__privateStatusGetter = function() {
    return yscale;  // use closure to variable to get current value
}

then:

console.log(chart.__privateStatusGetter());